关于移动端swiper的2种样式重置

时间:2024-05-01 16:24:43

手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~

思路:主要考虑选择器优先级大于默认就可以随意撸码

注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也就那么几行。可以参考:地址

下面附上重置样式的代码

.top_banner{
margin-top: .05rem;
width: 100%;
height: 2.8rem;
position: relative;
}
.top_bannerlists a,.top_bannerlists img{
display: block;
width: 100%;
}
.swiper-container-horizontal>#bannerimg-pagination{
position: absolute;
display: block;
width: 225px;
margin: 0 auto;
margin-left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: -10px;
}
#bannerimg-pagination span{
width: 25%;
height: 8px;
background-color: #3879D9;
border-radius: 5px;
}
/*----------top_three-----------*/
.top_three{
margin-top: .1rem;
}
/*swiper重置*/
.experts_carousel{
position: relative;
}
#swiper-pagination{
position: absolute;
margin: 0 auto;
margin-left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: -.3rem;
}
#swiper-pagination span{
display: block;
width: .2rem;
height: .2rem;
margin-left: .15rem;
}