.pages li { list-style-type: none; width: 25px; height: 14px; background-color: rgba(128, 128, 128, .4); } .pages li:hover { box-shadow: 0 0 5px 2px white; } .pages li.active { background-color: orange; box-shadow: 0 0 5px 2px orange; } .pages { position: absolute; z-index: 999; } /*横屏滑动*/ .pages.horizontal { right: -90px; transform: translateX(-50%); bottom: 5px; } .bannerContainer .pages.horizontal { display: none; } .pages.horizontal li { display: inline-block; margin-right: 10px; } .pages.horizontal li:last-child { margin-right: 0; } /*竖屏滑动*/ /*.pages.vertical { right: 5px; top: 50%; transform: translateY(-50%); } .pages.vertical li { margin-bottom: 10px; } .pages.vertical li:last-child { margin-bottom: 0; }*/ /*小轮播*/ #container { width: 100%; height: 310px; overflow: hidden; } .sections, .section { height: 100%; } #container, .sections { position: relative; } .section { background-color: #000; background-size: 100% 100%; background-position: 50% 50%; text-align: center; color: white; } /*#section0 { background-image: url('../img/qiehuan.png'); } #section1 { background-image: url('../img/qiehuan.png'); } #section2 { background-image: url('../img/qiehuan.png'); } #section3 { background-image: url('../img/qiehuan.png'); }*/ .section h3 { margin-top: -35px; width: 210px; background: rgba(128, 128, 128, .4)!important; font-size: 16px; padding: 10px; text-align: left; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .section img { width: 100%; height: 310px; } /*banner轮播*/ .bannerContainer { width: 100%; overflow: hidden; } .bannerContainer img { width: 100%; height: 100%; display: block; font-size: 0; text-align: center; } /* #bannerContainer #section0 { background-image: url(../img/banner-img_0.png); } #bannerContainer #section1 { background-image:url(../img/banner-img_1.jpg); } #bannerContainer #section2 { background-image: url(../img/banner-img_2.jpg); }*/ /*小轮播样式*/ .carousel-inner>.item>a>img { width: 100%; height: 310px; } .carousel-indicators li { width: 15px; height: 15px; margin-right: 10px; line-height: 16px!important; background-color: rgba(128, 128, 128, .4); } .carousel-indicators { bottom: 0; /*right: 0;*/ right: 2%; margin-bottom: 0px; line-height: 32px; } .carousel-indicators li.active { /*width: 15px; height: 14px;*/ /*margin-right: 10px;*/ /*border: none; border-radius: 0;*/ border: 2px solid #ff4900; color: #FF4900; /*background-color: orange;*/ /*box-shadow: 0 0 5px 2px orange;*/ } .carousel-caption { left: 0; right: 0; bottom: 0; padding-top: 0px; padding-bottom: 0px; } .carousel-caption p { width: 95%; text-align: center; margin: 0 auto; font-size: 16px; /*padding: 10px;*/ line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }