header{width: 100%; height: 120px; background: center center no-repeat; background-size: cover;} .header{width: 1391px; margin: 0 auto;} .search{float: right;} .logo{float: left; padding-top: 0px;} .logo *{display: inline-block; vertical-align: middle;} .logo span{width: 2px; height: 40px; margin: 0 20px 0 20px; background-color: #ccc;} header{ background: url(/uploads/image/csiimages/header_bg.png); } .search{padding-top: 30px;} .search a{font-size: 14px; cursor: pointer; margin: 20px; color: #fff;} .search>.search-top>span{ height: 18px;border-left: 1px solid #ccc;} .search input{display: block; outline: none; margin-left: 10px; width: 272px; border: none; padding-left: 10px; border-radius: 10px; height: 38px; margin-top: 10px; color: #fff; font-size: 14px; background: #ffff;} .search button{height: 38px; position: relative; outline: none; top: -38px; left: 248px; cursor: pointer; display: block; border: none; background: #003967;} .search button img{ display: block; height: 100%; } nav{width: 100%; height: 75px; background: hsl(207, 94%, 26%); font-size: 0;position: relative;} .nav{width: 1391px; margin: 0 auto; display: flex;position: absolute;left: 50%;margin-left: -696px;} .nav a{display: inline-block; line-height: 75px; vertical-align: top; font-size: 18px;color: #fff; transition: all .5s;} .sub-nav a:hover{background: #044980; color: #fff;} .nav li{/*width: auto;*/ position: relative; height: 75px; overflow: hidden; z-index: 900; display: inline-block; text-align: center; vertical-align: top;} .sub-nav{ display: inline-block; visibility: hidden; position: relative; top: -20px; opacity: 0; white-space: nowrap; transition: all .5s; background: #ba0000;/*width: 100%;*/} .sub-nav a{display: block; width: auto !important; text-align: left !important; line-height: 40px !important; padding: 0 40px 0 40px !important;font-size: 14px;} .nav li:hover .sub-nav{ opacity: 0; visibility: inherit; top: 0px; opacity: .8;background-color: #023964; } .nav li:hover{background-color: #023964; overflow: inherit;} .nav li:hover a{ color:#fff; } .nav li::after{ content: ''; display: block; height: 18px;border-left: 1px solid #0073ce; position: absolute; top: 31px; left: 0; } .nav li:nth-child(1):after{ display: none; } .swiper-pagination-custom { bottom: 10px; left: 0; width: 100%; } /*自定义分页器的样式,这个你自己想要什么样子自己写*/ .swiper-pagination-customs { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #fff; margin: 0 5px; } /*自定义分页器激活时的样式表现*/ .swiper-pagination-customs-active { width: 38px; border-radius: 5px; background-color: #0061ae; } /* 学院新闻 */ h3{ position: relative; text-indent: 35px; line-height: 70px; font-size: 20px; color: #7f7f7f; margin: 30px 0; } h3::after{ content: ''; display: block; width: 30px; height: 30px; background: url(/uploads/image/csiicon/news.png) no-repeat ; background-size: auto; position: absolute; top: 21px; } h4{ text-indent: 25px; font-size: 18px; width: 100%; color: #fff; height: 50px; background-color: rgba(140,140,140,.5); position: absolute; bottom: 5px; line-height: 50px; } /* 查看更多 */ h6{ position: relative; text-align: right; line-height: 56px; font-size: 12px; color: #7f7f7f; padding-right: 30px; } h6::after{ content: ''; display: block; width: 30px; height: 30px; background: url(/uploads/image/csiicon/more.png) no-repeat ; background-size: auto; position: absolute; top: 22px; right: 0; } .notice{ background-color: #f3f3f3; margin-top: 50px; } .notice .content{ width: 1391px; margin: 0 auto; display: flex; justify-content: space-between; } .notice .content h3::after{ background: url(/uploads/image/csiicon/notice.png) no-repeat ; } .content .left{ position: relative; margin-bottom: 40px; } .content .left ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } .notice .content .left li{ width: 446px; height: 72px; background-color: #e2e9ee; display: flex; margin-bottom: 30px; } .notice .content .left li:hover a{ background-color: #0061ae; color: #fff; } .notice .content .left li .time{ width: 73px; padding: 10px 0; } .notice .content .left li a{ color: black; padding: 10px; } .time{ background-color: #c1d9ec; color: #0061ae; } .time h2{ font-size: 24px; text-align: center; } .time p{ font-size: 12px; text-align: center; } .content>.left .more{ font-size: 12px; color: black; } .content>.left .more{ position: absolute; top: 40px; right: 0; text-align: right; line-height: 56px; font-size: 12px; color: #7f7f7f; padding-right: 30px; } .content>.left .more::after{ content: ''; display: block; width: 30px; height: 30px; background: url(/uploads/image/csiicon/more01_03.png) no-repeat ; background-size: auto; position: absolute; top: 22px; right: 0; } .content .right li{ width: 320px; height: 36px; text-align: center; margin-bottom: 5px; } .content .right li:nth-child(1){ background-color: #378ed0; } .content .right li:nth-child(2){ background-color: #51cbc4; } .content .right li:nth-child(3){ background-color: #82ca5d; } .content .right li:nth-child(4){ background-color: #6fa8d3; } .content .right li:nth-child(5){ background-color: #e09567; } .content .right li:nth-child(6){ background-color: #aa76cb; } .content .right li:nth-child(7){ background-color: #dd7399; } .content .right li>a{ font-size: 16px; line-height: 36px; color: #fff; } .container .bottom{ height: 124px; background-color: #044980; } .bottom .content{ width: 1391px; margin: 0 auto; position: relative; } .top{ position: absolute; right: 0; bottom: 30px; } .bottom .content span{ font-size: 14px; color: #fff; } .contact{ padding-top: 40px; padding-bottom: 30px; margin-left: 30px; } .contact span{ display: block; } .serve_nav{ width: 1391px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; } .serve_nav a{ display: block; height: 82px; width: 332px; margin-top: 24px; padding: 0 50px; box-sizing: border-box; display: flex; justify-content: space-around; border-radius: 5px; } .serve_nav a span{ font-size: 24px; font-weight: bold; line-height: 82px; color: #fff; } .serve_nav a:nth-child(1){ background-color: #0a509f; } .serve_nav a:nth-child(2){ background-color: #fd776c; } .serve_nav a:nth-child(3){ background-color: #1398ed; } .serve_nav a:nth-child(4){ background-color: #ff9507; } .serve_nav a:nth-child(5){ background-color: #63b23b; } .serve_nav a:nth-child(6){ background-color: #8964ff; } .serve_nav a:nth-child(7){ background-color: #f7648a; } .serve_nav a:nth-child(8){ background-color: #35acab; } .news_nav{ width: 1391px; margin: 0 auto; display: flex; justify-content: space-between; margin-top: 60px; } .news_list{ width: 446px; } .news_top a{ display: block; color: #fff; position: relative; height: 278px; margin-bottom: 36px; } .news_top img{ border-radius: 10px; } .news_top p{ width: 100%; position: absolute; bottom: 15px; text-align: center; line-height: 20px; } .news_bot a{ display: flex; justify-content: space-between; color: #000; height: 42px; line-height: 42px; border-bottom: dashed 1px #ccc; } .news_bot a p{ width: 360px; overflow: hidden; } .news_bot a p:hover{ color: red; font-weight: bold; text-decoration: underline; } .news_bot a span{ font-size: 12px; color: #ccc; } footer{ width: 100%; height: 180px; background-color: #044980; } .foot_cont{ padding-top: 30px; width: 1391px; margin: 0 auto; } .foot_cont ul{ display: flex; justify-content: space-between; width: 100%; margin-bottom: 45px; } .foot_cont ul li:nth-child(1){ background-color: #db7507; } .foot_cont ul li:nth-child(2){ background-color: #011486; } .foot_cont ul li:nth-child(4){ background-color: #b00000; } .foot_cont ul li:nth-child(6){ background-color: #1398ed; } .foot_cont ul li a{ display: block; height: 62px; } .foot_cont p{ width: 100%; text-align: center; color: #fff; font-size: 14px; } .xwzx{ width: 1391px; margin: 0 auto; display: flex; justify-content: space-between; height: 35px; position: relative; } .xwzx .more{ padding-top: 65px; font-size: 12px; color: #7f7f7f; padding-right: 30px; } .xwzx .more::after{ content: ''; display: block; width: 30px; height: 30px; background: url(/uploads/image/csiicon/more01_03.png) no-repeat; background-size: auto; position: absolute; top: 67px; right: 0; }