/* banner */ /* 本例子css */ .slideBox { width: 100%; height: 420px; overflow: hidden; position: relative; } .slideBox .hd { height: 15px; overflow: hidden; position: absolute; right: 46.5%; bottom: 5px; z-index: 1; } .slideBox .hd ul { overflow: hidden; zoom: 1; float: left; } .slideBox .hd ul li { float: left; margin-right: 2px; width: 30px; height: 5px; 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{ padding-top: 40px; overflow: hidden;} .box1 .box01{ width: 68%; } .bt{ height: 36px; border-bottom:1px solid #003366; } .bt h1{ display: inline; } .bt span{ font-size: 18px; color: #888888; padding-top: 6px; margin-left: 10px; } .bt a{ display: block; float: right; padding-top: 6px; font-size: 14px; } /*轮播图*/ .slideBox2 { width: 380px; height: 290px; overflow: hidden; position: relative; margin-top: 15px; } .slideBox2 .hd { height: 15px; overflow: hidden; position: absolute; right: 5px; bottom: 5px; z-index: 2; } .slideBox2 .hd ul { overflow: hidden; zoom: 1; float: left; } .slideBox2 .hd ul li { float: left; margin-right: 2px; width: 20px; height: 10px; line-height: 14px; text-align: center; background: url(../images/dian.png) no-repeat; cursor: pointer; } .slideBox2 .hd ul li.on { background: url(../images/dian2.png) no-repeat; color: #fff; } .news_bt{ width: 380px; height: 35px; overflow: hidden; position: absolute; bottom: -6px; z-index: 1; background: url(../images/news_bj.png) no-repeat; color: #FFFFFF; padding-top: 6px; padding-left: 10px; } .slideBox2 .bd { position: relative; height: 100%; z-index: 0; } .slideBox2 .bd li { zoom: 1; vertical-align: middle; } .slideBox2 .bd img { width: 100%; height: 290px; display: block; } /* 下面是前/后按钮代码,如果不需要删除即可 */ .slideBox2 .prev, .slideBox2 .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; } .slideBox2 .next { left: auto; right: 3%; background-position: 8px 5px; } .slideBox2 .prev:hover, .slideBox2 .next:hover { filter: alpha(opacity=100); opacity: 1; } .slideBox2 .prevStop { display: none; } .slideBox2 .nextStop { display: none; } /*轮播图*/ .box002{ width: 51%; margin-top: 15px; } .box002 li{ line-height: 33px; background:url(../images/list.png)left center no-repeat; padding-left: 20px; } .box002 li:hover{ color: #003366; } .box002 span{ float: right; } .box1 .box02{ width: 30%; } .box1 .box02 .bt span{ font-size: 18px; color: #888888; padding-top: 6px; margin-left: 10px; } .box1 .box02 .bt a{ float: right; padding-top: 6px; font-size: 14px; } .box1 .box02 .list{ margin-top: 15px; } .box1 .box02 li{ line-height: 33px; background:url(../images/list.png) left center no-repeat; padding-left: 20px; } .box1 .box02 .list li:hover{ color: #003366; } .box1 .box02 .list span{ float: right; } /*第二部分*/ .box2{ margin-top: 40px; overflow: hidden; } .box2 .list{ margin-top: 15px; } .box2 .box01{ width: 68%; } .box2 .box02 .list{ margin-top: 30px; } .date{ width: 12.3%; height: 68px; text-align: center; line-height: 34px; margin-right: 30px; } .date .day{ height: 34px; background: #003366; color: white; font-size: 20px; } .date .month{ height: 34px; background: #f4f4f4; color: #003366; font-size: 14px; } .box2 .box01 .list li{ line-height: 38px; } .box2 .box01 .list li p{ font-size: 12px; color: #444444; } .box2 .box01 .list a:hover{ color: #003366; } .link{ width: 358px; height: 60px; text-align: center; font-size: 16px; line-height: 60px; } .box2 .box02 .list a{ display: block; } .box2 .box02 .list .link:hover{ width: 358px; height: 60px; text-align: center; font-size: 16px; line-height: 60px; } .box2 .box02 .list .a{ border: solid 1px #bf3b48; color: #bf3b48; } .box2 .box02 .list .a:hover{ background-color: #bf3b48; color: #FFFFFF; } .box2 .box02 .list .b{ border: solid 1px #003366; color: #003366; } .box2 .box02 .list .b:hover{ background-color: #003366; color: #FFFFFF; } .box2 .box02 .list .c{ border: solid 1px #009999; color: #009999; } .box2 .box02 .list .c:hover{ background-color: #009999; color: #FFFFFF; } .box2 .box02 .list .d{ border: solid 1px #c44183; color: #c44183; } .box2 .box02 .list .d:hover{ background-color: #c44183; color: #FFFFFF; } .box2 .box02 .list .e{ border: solid 1px #009966; color: #009966; } .box2 .box02 .list .e:hover{ background-color: #009966; color: #FFFFFF; } .box2 .box02 .list .b,.box2 .box02 .list .c,.box2 .box02 .list .d,.box2 .box02 .list .e{ margin-top: 10px; } /*第三部分*/ .box3{ margin-top: 40px; } .box3 .bt{ margin-bottom: 30px; } .box3 .box01{ width: 1170px; margin: 0 auto; overflow: hidden; } .box3 .box01 .bt{ width: 100%; } .box3 .box01 .left{ width: 70.1%; } .imga,.imgb{ width: 403px; height: 165px; margin-bottom: 12px; } .shipin{ width: 340px; height: 342px; } .img2b{ margin-left: 14px; } .box3 .box02{ display: flex; justify-content: space-around; margin-top: 30px; margin-bottom: 30px; } .er{ width: 270px; height: 300px; border: solid 1px #efefef; text-align: center; }