873 lines
14 KiB
CSS
873 lines
14 KiB
CSS
.bg {
|
||
position: fixed;
|
||
z-index: -1;
|
||
width: 100%;
|
||
height: 100%;
|
||
/*background: url(../images/index/bg.jpg) no-repeat;*/
|
||
/*background-size: cover;*/
|
||
background: #353c47;
|
||
}
|
||
|
||
.header {
|
||
/*background: rgba(236, 253, 255, .4) !important;*/
|
||
}
|
||
|
||
|
||
/*导航栏：风琴主体容器*/
|
||
|
||
.navContainer {
|
||
width: 1200px;
|
||
margin: 0 auto 12px;
|
||
height: 380px;
|
||
background: #42a6b4;
|
||
}
|
||
|
||
|
||
/*风琴列表*/
|
||
|
||
.navContainer>ul {
|
||
overflow: hidden;
|
||
height: 380px;
|
||
}
|
||
|
||
|
||
/*每一个风琴列表的选项：此选项为一整页风琴的容器，它上面的其他选项和左右区分，都是以此为相对定位*/
|
||
|
||
.navContainer>ul>li {
|
||
background: url('../images/index/navBg1.jpg') no-repeat;
|
||
background-position: bottom center !important;
|
||
background-size: cover;
|
||
height: 380px;
|
||
float: left;
|
||
width: 50px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all 0.5s;
|
||
}
|
||
|
||
|
||
/*风琴列表选项的背景*/
|
||
|
||
.navContainer>ul>li:nth-child(2) {
|
||
background: url('../images/index/navBg2.jpg') no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.navContainer>ul>li:nth-child(3) {
|
||
background: url('../images/index/navBg3.jpg') no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.navContainer>ul>li:nth-child(4) {
|
||
background: url('../images/index/navBg4.jpg') no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.navContainer>ul>li:nth-child(5) {
|
||
background: url('../images/index/navBg5.jpg') no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.navContainer>ul>li:nth-child(6) {
|
||
background: url('../images/index/navBg6.jpg') no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.navContainer>ul>li:nth-child(7) {
|
||
background: url('../images/index/navBg7.jpg') no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.navContainer>ul>li:nth-child(8) {
|
||
background: url('../images/index/navBg8.jpg') no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.navContainer>ul>li:nth-child(9) {
|
||
background: url('../images/index/navBg9.jpg') no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
|
||
/*左侧容器区*/
|
||
|
||
.navContainer>ul>li .navLeftContainer {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 50px;
|
||
height: 380px;
|
||
background: #338b97;
|
||
z-index: 1;
|
||
border-right: 1px solid #ddd;
|
||
}
|
||
|
||
.navContainer>ul>li .navLeftContainer.choose {
|
||
background: rgba(0, 0, 0, .5) !important;
|
||
}
|
||
|
||
.navContainer>ul>li .nav_left2 {
|
||
background: #338b97;
|
||
}
|
||
|
||
.navContainer>ul>li .nav_left3 {
|
||
background: #3793a0;
|
||
}
|
||
|
||
.navContainer>ul>li .nav_left4 {
|
||
background: #3a9ca9;
|
||
}
|
||
|
||
.navContainer>ul>li .nav_left5 {
|
||
background: #3da3b1;
|
||
}
|
||
|
||
.navContainer>ul>li .nav_left6 {
|
||
background: #41ABB9;
|
||
}
|
||
|
||
.navContainer>ul>li .nav_left7 {
|
||
background: #47B7C5;
|
||
}
|
||
|
||
.navContainer>ul>li .nav_left8 {
|
||
background: #4CBDCD;
|
||
}
|
||
|
||
.navContainer>ul>li .nav_left9 {
|
||
background: #50C5D6;
|
||
}
|
||
|
||
.navContainer>ul>li:hover .navLeftContainer {
|
||
background: rgba(0, 0, 0, .5);
|
||
-webkit-transition: all .25s;
|
||
-o-transition: all .25s;
|
||
transition: all .25s;
|
||
}
|
||
|
||
|
||
/*左侧列表显示图文区*/
|
||
|
||
.navContainer>ul>li .navLeftContent {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 30px;
|
||
height: 380px;
|
||
padding: 0 10px;
|
||
text-align: center;
|
||
z-index: 2;
|
||
}
|
||
|
||
|
||
/*左侧列表装饰图片*/
|
||
|
||
.navContainer>ul>li .navLeftContent img {
|
||
width: 20px;
|
||
margin: 5px 0;
|
||
}
|
||
|
||
.navContainer>ul>li .navLeftContent img.nav_sign_img {
|
||
width: 17px;
|
||
margin-top: 10px;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
|
||
/*左侧列表文字*/
|
||
|
||
.navContainer>ul .navLeftContent i {
|
||
font-size: 16px;
|
||
font-style: normal;
|
||
color: #FFF;
|
||
}
|
||
|
||
|
||
/*右侧列表*/
|
||
|
||
.navContainer>ul>li .navRightContent {
|
||
float: left;
|
||
width: auto;
|
||
position: relative;
|
||
height: 380px;
|
||
left: 50px;
|
||
}
|
||
|
||
|
||
/*右侧列表的ul列表*/
|
||
|
||
.navRightUl {
|
||
width: auto;
|
||
height: 380px;
|
||
padding: 20px;
|
||
background: rgba(0, 0, 0, .5);
|
||
float: left;
|
||
}
|
||
|
||
.navRightUl>li a {
|
||
display: block;
|
||
width: auto;
|
||
height: 40px;
|
||
text-align: center;
|
||
margin: 0 auto 20px;
|
||
text-decoration: none;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.navRightUl>li a:hover img {
|
||
-webkit-transform: rotate(360deg);
|
||
-ms-transform: rotate(360deg);
|
||
-o-transform: rotate(360deg);
|
||
transform: rotate(360deg);
|
||
-webkit-transition: transform 0.4s;
|
||
-o-transition: transform 0.4s;
|
||
transition: transform 0.4s;
|
||
}
|
||
|
||
.navRightUl>li a img {
|
||
width: 24px;
|
||
margin: 0 15px;
|
||
}
|
||
|
||
|
||
/*主控内容区：tab切换*/
|
||
|
||
.tabContainer {
|
||
width: 1200px;
|
||
min-height: 650px;
|
||
margin: 0 auto 12px;
|
||
background-color: #fff;
|
||
text-align: center;
|
||
}
|
||
|
||
|
||
/*切换的控制选项 ：主体高度650，ul共有4个选项高270，剩余高度230px，上下平均分配*/
|
||
|
||
.tabContainer ul {
|
||
width: auto;
|
||
height: auto;
|
||
padding: 35px 0;
|
||
float: left;
|
||
list-style: none;
|
||
text-align: left;
|
||
margin-right: 0px;
|
||
background: #545454;
|
||
}
|
||
|
||
.tabContainer ul li {
|
||
width: 110px;
|
||
height: 120px;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
display: block;
|
||
}
|
||
|
||
.tabContainer ul li img {
|
||
width: 35px;
|
||
height: 35px;
|
||
margin: 30px 0 10px;
|
||
}
|
||
|
||
.tabContainer ul li:hover img {
|
||
-webkit-transition: all .2s;
|
||
-o-transition: all .2s;
|
||
transition: all .2s;
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.tabContainer ul li:first-child {
|
||
height: 120px;
|
||
line-height: normal;
|
||
}
|
||
|
||
.tabContainer ul li.container_active {
|
||
background: #42a6b4;
|
||
-webkit-transition: all .2s;
|
||
-o-transition: all .2s;
|
||
transition: all .2s;
|
||
}
|
||
|
||
|
||
/*切换的主体*/
|
||
|
||
.tabContainer .tabContent {
|
||
height: 650px;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
|
||
/*切换的主体控制显隐*/
|
||
|
||
.tabContainer .content_module {
|
||
display: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.tabContainer .content_module.content_active {
|
||
display: block;
|
||
}
|
||
|
||
|
||
/*咨询中心每一个tab切换模块*/
|
||
|
||
.zxContent {
|
||
display: inline-block;
|
||
width: 530px;
|
||
height: 320px;
|
||
margin: 0 0 7px 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
/*咨询中心展示图*/
|
||
|
||
.zxLogo {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
|
||
/*咨询中心每一个tab切换选项*/
|
||
|
||
.tab-nav {
|
||
height: 40px;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
}
|
||
|
||
.tab-nav span {
|
||
display: block;
|
||
float: left;
|
||
width: 100px;
|
||
height: 38px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
color: #999;
|
||
cursor: pointer;
|
||
border-radius: 10px 10px 0 0;
|
||
background: #fff;
|
||
border: 1px solid #ddd;
|
||
border-bottom: none;
|
||
-webkit-transition: all .5s;
|
||
-o-transition: all .5s;
|
||
transition: all .5s;
|
||
}
|
||
|
||
.tab-nav span:hover {
|
||
background: #42a6b5;
|
||
color: #fff;
|
||
-webkit-transition: all .5s;
|
||
-o-transition: all .5s;
|
||
transition: all .5s;
|
||
}
|
||
|
||
.tab-nav span.current {
|
||
background: #42a6b5;
|
||
color: #fff;
|
||
}
|
||
|
||
|
||
/*咨询中心每一个tab切换内容区域*/
|
||
|
||
.tab-con {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 285px;
|
||
overflow: hidden;
|
||
background: #f2f2f2;
|
||
}
|
||
|
||
.tab-con-item {
|
||
display: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
color: #333;
|
||
}
|
||
|
||
.more {
|
||
color: #42a6b5;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
text-align: right;
|
||
cursor: pointer;
|
||
display: block;
|
||
}
|
||
|
||
.tab-item-module {
|
||
width: 96%;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.tab-item-module:after {
|
||
content: ".";
|
||
display: block;
|
||
height: 0;
|
||
clear: both;
|
||
visibility: hidden;
|
||
zoom: 1;
|
||
}
|
||
|
||
.tab-item-module:hover {
|
||
width: 100%;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
-webkit-transition: .25s;
|
||
-o-transition: .25s;
|
||
transition: .25s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tab-item-module img {
|
||
width: 16px;
|
||
margin: 7px 10px 7px 0;
|
||
float: left;
|
||
}
|
||
|
||
.tab-item-module p {
|
||
width: 380px;
|
||
float: left;
|
||
display: inline-block;
|
||
text-align: left;
|
||
font-size: 12px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tab-item-module span {
|
||
height: 16px;
|
||
line-height: 16px;
|
||
margin-top: 7px;
|
||
float: right;
|
||
text-align: left;
|
||
font-size: 12px;
|
||
color: #333;
|
||
display: inline-block;
|
||
padding-left: 10px;
|
||
border-left: 2px solid #42a6b4;
|
||
}
|
||
|
||
|
||
/*教务新闻*/
|
||
|
||
.newsTitle {
|
||
display: block;
|
||
width: 510px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
color: #333;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
background: none;
|
||
margin: 0 auto;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
/*底部*/
|
||
|
||
.newsBottom {
|
||
width: 510px;
|
||
height: 203px;
|
||
margin: 0 auto;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.newsBottom p {
|
||
height: 100%;
|
||
width: 100%;
|
||
padding: 10px;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
color: #333;
|
||
overflow: hidden;
|
||
text-indent: 2em;
|
||
position: relative;
|
||
text-align: left;
|
||
}
|
||
|
||
|
||
/*教务新闻的多行文本溢出*/
|
||
|
||
.newsBottom p::after {
|
||
content: "...";
|
||
font-weight: bold;
|
||
position: absolute;
|
||
bottom: 6px;
|
||
right: 0;
|
||
padding: 0 16px 0 30px;
|
||
background: url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
|
||
}
|
||
|
||
|
||
/*服务中心*/
|
||
|
||
.fwContent {
|
||
float: left;
|
||
width: 532px;
|
||
height: 650px;
|
||
margin: 0 12px;
|
||
}
|
||
|
||
.fwContent:last-child {
|
||
margin: 0;
|
||
}
|
||
|
||
.fw_top {
|
||
width: 96%;
|
||
height: 70px;
|
||
line-height: 70px;
|
||
padding: 0 2%;
|
||
text-align: left;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.fw_middle {
|
||
display: block;
|
||
width: 96%;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
padding: 0 2%;
|
||
text-align: left;
|
||
color: #42a6b5;
|
||
background: #e7f2f6;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.fw_bottom {
|
||
width: 96%;
|
||
padding: 0 2%;
|
||
height: 520px;
|
||
background: #f2f2f2;
|
||
margin: 10px auto 0;
|
||
}
|
||
|
||
.fw_bottom h3 {
|
||
width: 100%;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: left;
|
||
border-bottom: 1px solid #42a6b5;
|
||
}
|
||
|
||
.fw_bottom_content {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.fw_bottom_content .tab-item-module {
|
||
width: 100%;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
|
||
/*快速通道*/
|
||
|
||
.ks_content {
|
||
width: 533px;
|
||
height: 100%;
|
||
background: #f2f2f2;
|
||
float: left;
|
||
margin-left: 12px;
|
||
}
|
||
|
||
.ks_top {
|
||
height: 60px;
|
||
line-height: 60px;
|
||
margin: 12px;
|
||
display: block;
|
||
background: #fff;
|
||
text-align: left;
|
||
color: #333;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.ks_top:hover {
|
||
background: #ddd;
|
||
-webkit-transition: all .25s;
|
||
-o-transition: all .25s;
|
||
transition: all .25s;
|
||
}
|
||
|
||
.ks_top:after {
|
||
content: ".";
|
||
display: block;
|
||
height: 0;
|
||
clear: both;
|
||
visibility: hidden;
|
||
zoom: 1;
|
||
}
|
||
|
||
.ks_top img {
|
||
margin: 0 12px;
|
||
}
|
||
|
||
.ks_sign {
|
||
float: right;
|
||
color: #999;
|
||
font-size: 12px;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.noMarginBottom {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.ks_top_a {
|
||
display: block;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
margin: 0 12px;
|
||
background: #fff;
|
||
border-top: 1px solid #ddd;
|
||
color: #333;
|
||
font-size: 12px;
|
||
text-align: right;
|
||
padding-right: 12px;
|
||
}
|
||
|
||
.ks_top_a:hover {
|
||
background: #ddd;
|
||
-webkit-transition: all .25s;
|
||
-o-transition: all .25s;
|
||
transition: all .25s;
|
||
}
|
||
|
||
|
||
/*规章制度*/
|
||
|
||
.gz_left,
|
||
.gz_right {
|
||
float: left;
|
||
width: 532px;
|
||
height: 650px;
|
||
margin: 0 12px;
|
||
}
|
||
|
||
.gz_right {
|
||
margin: 0;
|
||
}
|
||
|
||
.gz_left .gzContent {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #f2f2f2;
|
||
}
|
||
|
||
.gz_right .gzContent {
|
||
width: 100%;
|
||
height: 50%;
|
||
background: #f2f2f2;
|
||
}
|
||
|
||
.gz_top {
|
||
width: 96%;
|
||
height: 70px;
|
||
line-height: 70px;
|
||
padding: 0 2%;
|
||
text-align: left;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
background: #fff;
|
||
}
|
||
|
||
.gz_middle {
|
||
display: block;
|
||
width: 96%;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
padding: 0 2%;
|
||
text-align: left;
|
||
color: #42a6b5;
|
||
background: #e7f2f6;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.gz_bottom {
|
||
width: 96%;
|
||
height: auto;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.gz_bottom_content {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.gz_bottom_content .tab-item-module {
|
||
width: 100%;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.titleImg {
|
||
width: 40px;
|
||
height: 40px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
|
||
/*轮播图样式*/
|
||
|
||
.sliderTitle {
|
||
display: block;
|
||
width: 100px;
|
||
height: 38px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
border-radius: 10px 10px 0 0;
|
||
background: #42a6b5;
|
||
color: #fff;
|
||
border: 1px solid #ddd;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.slider {
|
||
position: relative;
|
||
height: 282px;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.slider .slider-pointer {
|
||
position: absolute;
|
||
bottom: 40px;
|
||
right: -40px;
|
||
color: #fff;
|
||
list-style: none;
|
||
padding: 0;
|
||
z-index: 999;
|
||
border: none;
|
||
}
|
||
|
||
.slider .slider-pointer li {
|
||
display: inline-block;
|
||
margin: 0 5px;
|
||
width: 8px;
|
||
height: 8px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
background-color: #ffffff;
|
||
opacity: 0.85;
|
||
transition: all 320ms ease;
|
||
}
|
||
|
||
.slider .slider-pointer li:hover {
|
||
background-color: #555;
|
||
border: 1px solid #fff;
|
||
}
|
||
|
||
.slider .slider-pointer li.active {
|
||
background-color: #555;
|
||
border: 1px solid #fff;
|
||
}
|
||
|
||
.slider .slider-inner {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.slider .slider-inner .item {
|
||
border: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
float: left;
|
||
}
|
||
|
||
.slider .slider-inner img {
|
||
/*width: 100%;*/
|
||
height: 100%;
|
||
border-radius: 0 0 4px 4px;
|
||
}
|
||
|
||
.slider .slider-control {
|
||
position: absolute;
|
||
width: 15px;
|
||
height: 15px;
|
||
z-index: 999;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
font-weight: 900;
|
||
font-size: 10px;
|
||
line-height: 15px;
|
||
background-color: #ffffff;
|
||
opacity: 0.5;
|
||
cursor: pointer;
|
||
top: 40%;
|
||
transition: all 320ms ease;
|
||
}
|
||
|
||
.slider .slider-control:hover {
|
||
opacity: 0.65;
|
||
background-color: #000;
|
||
}
|
||
|
||
.slider .slider-control:active {
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.slider .slider-control.prev {
|
||
display: none;
|
||
left: 20px;
|
||
}
|
||
|
||
.slider .slider-control.next {
|
||
display: none;
|
||
right: 20px;
|
||
}
|
||
|
||
.slider:hover .slider-control.prev {
|
||
display: block;
|
||
left: 20px;
|
||
}
|
||
|
||
.slider:hover .slider-control.next {
|
||
display: block;
|
||
right: 20px;
|
||
}
|
||
|
||
.slider-sign {
|
||
position: absolute;
|
||
background: rgba(0, 0, 0, .4);
|
||
width: 95%;
|
||
height: 36px;
|
||
line-height: 36px;
|
||
padding: 0 2.5%;
|
||
text-align: left;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
z-index: 999;
|
||
left: 0;
|
||
bottom: 0;
|
||
}
|