70 lines
1.0 KiB
CSS
70 lines
1.0 KiB
CSS
/* 轮播图的样式 */
|
|
.banner {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 399.38px;
|
|
overflow: hidden;
|
|
}
|
|
.swiper-content {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 2000%;
|
|
transition: all .7s;
|
|
}
|
|
|
|
.swiper-content li {
|
|
position: relative;
|
|
height: 399.38px;
|
|
float: left;
|
|
}
|
|
|
|
.swiper-content li img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiper-spot {
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
}
|
|
.swiper-spot li{
|
|
float: left;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 100%;
|
|
background: #999;
|
|
margin-right: 5px;
|
|
}
|
|
.swiper-action {
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: -25px;
|
|
width: 100%;
|
|
display: none;
|
|
}
|
|
.banner:hover .swiper-action {
|
|
display: inline-block;
|
|
}
|
|
|
|
.swiper-action .action-left,
|
|
.swiper-action .action-right{
|
|
width: 30px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
background: #000;
|
|
text-align: center;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
.swiper-action .action-left {
|
|
float: left;
|
|
}
|
|
|
|
.swiper-action .action-right {
|
|
float: right;
|
|
}
|
|
|
|
.active {
|
|
background: #ff4019 !important;
|
|
} |