关于移动端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点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...
随机推荐
- iOS-调试技巧
目录 前言逼优鸡知己知彼 百战不殆抽刀断Bug 普通操作 全局断点(Global BreakPoint) 条件断点(Condational Breakpoints)打印的艺术 NSLog 开启僵尸对象 ...
- GitHub iOS-Top 100 简介
GitHub排名前100的iOS第三方汇总简介,方便开发者选择适合的第三方框架. 项目名称 项目信息 1. AFNetworking 作者是 NSHipster 的博主, iOS 开发界的大神级人物, ...
- SVN:服务器资源删掉,本地添加时和删掉的名字同名出现One or more files are in a conflicted state.
异常处理汇总-开发工具 http://www.cnblogs.com/dunitian/p/4522988.html
- Sql Server系列:系统函数
1. 返回表中指定字段的长度值COL_LENGTH 返回列的定义长度(以字节为单位). 语法: COL_LENGTH ( 'table' , 'column' ) 示例: SELECT COL_LEN ...
- ExtJs4之Grid详细
ExtJs博客前奏 由于这段时间事情比较杂乱,博客就主要以项目中例子来说明编写. ExtJs4中的Grid非常强大,有展示,选中,搜索,排序,编辑,拖拽等基本功能,这篇博客我就这几个功能做写累述. 1 ...
- 移动端web开发
meta基础知识点: 页面自动调整到设备宽度,并禁止用户缩放. <meta name="viewport" content="width=device-width, ...
- hdu 2222 Keywords Search(AC自动机)
/* 啥也不说了,直接套模板... */ 1 #include<iostream> #include<map> #include<string> #include& ...
- iOS开发之手势识别
感觉有必要把iOS开发中的手势识别做一个小小的总结.在上一篇iOS开发之自定义表情键盘(组件封装与自动布局)博客中用到了一个轻击手势,就是在轻击TextView时从表情键盘回到系统键盘,在TextVi ...
- Ubuntu杂记——Ubuntu下Eclipse搭建Maven、SVN环境
正在实习的公司项目是使用Maven+SVN管理的,所以转到Ubuntu下也要靠自己搭环境,自己动手,丰衣足食.步骤有点简略,但还是能理解的. 一.安装JDK7 打开终端(Ctrl+Alt+T),输入 ...
- IE 11 如何设置“用户代理字符串”
"用户代理字符串"这个术语在IE11 之前被叫作“浏览器模式”(Browser Mode),在IE11下面这个特殊的选项被放在F12的“仿真”选项下面了. Figure 1通过按下 ...