关于移动端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;
}
关于移动端swiper的2种样式重置的更多相关文章
- CSS选 择器 三种样式
一.CSS三种样式 代码 宽度 高度 实线 颜色 A内联样式是优先级最高的方式 px必须写 A:内联式 弊端:代码多很乱 <body> <div class="divc ...
- XFire构建服务端Service的两种方式(转)
XFire构建服务端service的两种方式,一是用xfire构建,二是和spring集成构建. 一,xifre构建,确保把xfire的jar包导入到工程中或classpath. 1,service的 ...
- XFire构建服务端Service的两种方式
1.原声构建: 2.集成spring构建 http://blog.csdn.net/carefree31441/article/details/4000436XFire构建服务端Service的两种方 ...
- CSS的三种样式:内联式,嵌入式,外部式以及他们的优先级
从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码: <p style=" ...
- 多个超链接a 选中的和不选中的两种样式
<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"> 浏览器自带的jquery库 <scri ...
- css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
- CSS02--四种样式、背景、文本、链接状态、表格样式
接上面的“CSS01”,我们接着来说一下样式.很多人不知道的是一个HTML元素有四种样式,分别是浏览器默认样式.外部样式.内部样式.内联样式,而它们的优先级是越来越高的,后面的样式会覆盖前面的样式.多 ...
- 转载:CSS的组成,三种样式(内联式,嵌入式,外部式),优先级
(仅供自己备份) 原文地址:http://blog.csdn.net/chq11106004389/article/details/50515717 CSS的组成 选择符/选择器+声明(属性+值) 选 ...
- 5种样式实现div容器中三图摆放实例对比说明
代码地址如下:http://www.demodashi.com/demo/11593.html 效果演示: demo点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...
随机推荐
- GitHub iOS-Top 100 简介
GitHub排名前100的iOS第三方汇总简介,方便开发者选择适合的第三方框架. 项目名称 项目信息 1. AFNetworking 作者是 NSHipster 的博主, iOS 开发界的大神级人物, ...
- [C#] Socket 通讯,一个简单的聊天窗口小程序
Socket,这玩意,当时不会的时候,抄别人的都用不好,简单的一句话形容就是“笨死了”:也是很多人写的太复杂,不容易理解造成的.最近在搞erlang和C的通讯,也想试试erlang是不是可以和C#简单 ...
- The transaction log for database 'tempdb' is full due to 'ACTIVE_TRANSACTION'
今天早上,Dev跟我说,执行query statement时出现一个error,detail info是: “The transaction log for database 'tempdb' is ...
- HTML5系列:HTML5结构
1. 主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,增加几个与页眉.页脚.内容区块等文档结构相关联的结构元素. 1.1 article元素 article元素表示文档.页面或应用程序中独 ...
- ModelDataExchange - Import
ModelDataExchange - Import eryar@163.com Abstract. The ModelDataExchange import utility enables the ...
- Minor【 PHP框架】3.路由、控制器、视图
框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...
- 关于SubSonic3.0插件使用SqlQuery或Select查询时产生的System.NullReferenceException异常修复
早上在编写执行用例时,突然爆异常System.NullReferenceException: 未将对象引用设置到对象的实例 执行代码:
- iOS开发之集成iOS9中的Core Spotlight Framework搜索App的内容
Spotlight在iOS9上做了一些新的改进, 也就是开放了一些新的API, 通过Core Spotlight Framework你可以在你的app中集成Spotlight.集成Spotlight的 ...
- 关于Docker目录挂载的总结
Docker容器启动的时候,如果要挂载宿主机的一个目录,可以用-v参数指定. 譬如我要启动一个centos容器,宿主机的/test目录挂载到容器的/soft目录,可通过以下方式指定: # docker ...
- JS只能输入数字,数字和字母等的正则表达式
1.只能输入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> ...