你的位置:首页 > Java教程

[Java教程]关于移动端swiper的2种样式重置


手机查看效果地址:猛戳 ,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;}