/* banner */ /* 本例子css */ .slideBox { width: 100%; height: 420px; overflow: hidden; position: relative; } .slideBox .hd { height: 15px; overflow: hidden; position: absolute; right: 12.5%; bottom: 15px; z-index: 1; } .slideBox .hd ul { overflow: hidden; zoom: 1; float: left; } .slideBox .hd ul li { float: left; margin-right: 15px; width: 14px; height: 14px; line-height: 14px; text-align: center; background: #fff; cursor: pointer; } .slideBox .hd ul li.on { background: #1b6698; color: #fff; } .slideBox .bd { position: relative; height: 100%; z-index: 0; } .slideBox .bd li { zoom: 1; vertical-align: middle; } .slideBox .bd img { width: 100%; height: 420px; display: block; } /* 下面是前/后按钮代码,如果不需要删除即可 */ .slideBox .prev, .slideBox .next { position: absolute; left: 3%; top: 50%; margin-top: -25px; display: block; width: 32px; height: 40px; background: url(images/slider-arrow.png) -110px 5px no-repeat; filter: alpha(opacity=50); opacity: 0.5; } .slideBox .next { left: auto; right: 3%; background-position: 8px 5px; } .slideBox .prev:hover, .slideBox .next:hover { filter: alpha(opacity=100); opacity: 1; } .slideBox .prevStop { display: none; } .slideBox .nextStop { display: none; } /* banner */ .box1 { margin-top: 30px; } /* 新闻图 */ .slideBox1 { width: 585px; height: 406px; overflow: hidden; position: relative; background: #f2f2f2; } .slideBox1 .hd { height: 15px; overflow: hidden; position: absolute; right: 5px; bottom: 5px; z-index: 1; } .slideBox1 .hd ul { overflow: hidden; zoom: 1; float: left; } .slideBox1 .hd ul li { float: left; margin-right: 2px; width: 15px; height: 15px; line-height: 14px; text-align: center; background: #fff; cursor: pointer; } .slideBox1 .hd ul li.on { background: #f00; color: #fff; } .slideBox1 .bd { position: relative; height: 100%; z-index: 0; } .slideBox1 .bd ul { margin: 20px; } .slideBox1 .bd li { zoom: 1; vertical-align: middle; } .slideBox1 .bd .news_tu img { width: 545px; height: 307px; display: block; } /* news */ .title { height: 48px; margin-bottom: 30px; } .box1 .title b { font-size: 24px; color: #0070bc; background: url(../images/news.png) center 8px no-repeat; padding-top: 24px; box-sizing: border-box; width: 124px; padding-left: 10px; } .title span { font-size: 14px; color: #0070bc; background: #d3e1ff; width: 68px; height: 24px; border-radius: 12px; text-align: center; margin-top: 14px; } .news_t { margin-top: 10px; } .news_t .date { width: 64px; border-right: #c7c7c7 1px solid; margin-right: 10px; } .news_t .date b { font-size: 24px; color: #0070bc; } .news_t .date span { font-size: 14px; color: #999; } .news_t .news { width: 450px; } .news_t .news p { width: 465px; overflow: hidden; } .news_list { width: 48%; } .news_list ul li { position: relative; height: 135px; border-bottom: #e5e5e5 1px solid; padding-bottom: 20px; box-sizing: border-box; padding-top: 25px; } .news_list ul li:hover{ box-shadow: 0px 0px 18px #aaaaaa; padding: 25px 10px; transition: all 0.3s ease-in-out; transform: translate(5px); } .news_list ul li div { font-size: 16px; float: left; width: 90%; background: url(../images/list_bg.png) left center no-repeat; padding-left: 20px; box-sizing: border-box; } .news_list ul li span { font-size: 18px; float: right; } .news_list ul li p { font-size: 14px; color: #999; width: 88%; float: left; margin-top: 10px; } .news_list ul li img { float: right; position: absolute; bottom: 23px; right: 0; border-left: 1px solid #999; padding-left: 10px; } .box2 { margin-top: 30px; height: 588px; background: url(../images/box2_bg.png) center no-repeat; padding-top: 30px; box-sizing: border-box; } .notice { width: 48%; } .notice .title b { font-size: 24px; color: #0070bc; background: url(../images/notice.png) left 8px no-repeat; padding-top: 24px; box-sizing: border-box; width: 156px; padding-left: 10px; } .notice_list ul li { margin-bottom: 30px; height: 67px; } .notice_list ul li :hover .notice_list ul li .date{ background: url(../images/date_bg2.png) no-repeat; } .notice_list ul li :hover div{ color: #0070BC; } .notice_list ul li .date { width: 62px; height: 67px; color: #fff; background: url(../images/date_bg.png) no-repeat; text-align: center; line-height: 30px; padding-top: 7px; box-sizing: border-box; } .notice_list ul li .date:hover{ background: url(../images/date_bg2.png) no-repeat; } .notice_list ul li :hover > .notice_list ul li #date{ background: url(../images/date_bg2.png) no-repeat; } .notice_list ul li .date b { font-size: 24px; font-family: "Cambria Math"; border-bottom: 1px solid #fff; } .notice_list ul li .date span { font-size: 14px; } .notice_t { width: 86%; line-height: 34px; } .notice_t p { font-size: 14px; color: #999; } .about_us { width: 44%; } .about_us .title b { font-size: 24px; color: #FFFFFF; background: url(../images/about_us.png) left 8px no-repeat; padding-top: 24px; box-sizing: border-box; width: 156px; padding-left: 10px; } .about_us .left { float: left; margin-left: 30px; margin-top: 30px; } .about_us .left a { display: block; border: 1px solid #FFFFFF; position: relative; margin-top: 18px; top: 0; transition: all 0.3s ease-in-out; } .about_us .left a .newsImg { position: relative; top: -45px; left: -30px; margin-bottom: -7px; } .about_us .left a .newsInfo { padding: 0 23px 0px 12px; margin-bottom: 40px; position: relative; } .about_us .left a .newsInfo p { line-height: 30px; height:60px; overflow: hidden; margin-bottom: 5px; font-size: 16px; color: #FFFFFF; font-weight: normal; } .triangle { position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-bottom: 31px solid #d3e1ff; border-left: 31px solid transparent; display: block; } .triangle b { width: 10px; height: 10px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; display: block; position: absolute; top: 14px; right: 4px; } .about_us .left a:before { background: #009944; background: -webkit-linear-gradient(left, #a9cd07, #006a2d); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #a9cd07, #006a2d); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #a9cd07, #006a2d); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #a9cd07, #006a2d); /* 标准的语法 */ content: ''; display: block; clear: both; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; filter: Alpha(opacity=0); transition: all 0.3s ease-in-out; } .imgResponsive { width: 100%; overflow: hidden; height: 0; display: block; padding-bottom: 61.44%; } .imgResponsive img { /* width: 100%; */ transition: all 0.8s ease-in-out; } a:hover .imgResponsive img { transform: scale(1.08); } .about_us .left a:hover .newsInfo h3 { color: #009944; } /* .about_us .left a:hover .newsInfo span{color:#a0d4b0;} */ /* .about_us .left a:hover:before{opacity: 100;filter:Alpha(opacity=100);} */ .box3 { margin-top: 30px; } .box3 .title b { font-size: 24px; color: #0070bc; background: url(../images/Professional.png) left 8px no-repeat; padding-top: 24px; box-sizing: border-box; width: 330px; padding-left: 10px; } /* 本例子css */ .picScroll-left { width: 1200px; overflow: hidden; position: relative; } .picScroll-left .bd ul { overflow: hidden; zoom: 1; } .picScroll-left .bd ul li { margin: 0 8px; float: left; _display: inline; overflow: hidden; text-align: center; } .picScroll-left .bd ul li .pic { text-align: center; } .picScroll-left .bd ul li .pic img { width: 278px; height: 198px; display: block; } .picScroll-left .bd ul li .pic a:hover img {} .picScroll-left .bd ul li .title { line-height: 24px; }