关于移动端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点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...
随机推荐
- Execute Sql Task 的Result DataSet如何返回
Execute Sql Task的Result DataSet 主要有以下四种,当Execute Sql Task返回结果之后,需要使用SSIS Variable 来接收数据. 例子中使用的数据表代码 ...
- CSS系列:CSS表格样式
1. 设置单元格的边框 border-collapse: collapse; 2. 边框的分离 对table使用CSS实现cellspacing的属性border-spacing. border-sp ...
- Matlab 循环读入和输出
这两天要给导师做实验,因此要写Matlab程序,在做程序的时候,涉及到了循环读入和输出,查找相关资料 代码如下 : Image=['F:\\SYTP\\',num2str(i),'.jpg']; Te ...
- Android沉浸式通知栏设计
转载博客:http://www.2cto.com/kf/201503/381348.html Android4.4新特性,系统状态栏一体化. 实现的步骤主要有以下几点: 1.android4.4 以上 ...
- 虚拟化 - 每天5分钟玩转 OpenStack(2)
OpenStack是云操作系统,要学习OpenStack,首先需要掌握一些虚拟化和云计算的相关知识. 虚拟化 虚拟化是云计算的基础.简单的说,虚拟化使得在一台物理的服务器上可以跑多台虚拟机,虚拟机共享 ...
- Android样式之selector
日常开发当中,难免会出现这样一种情况,为一个按钮.TextView...设置一个点击状态的颜色改变,可能是background背景的改变,也可能是字体颜色的改变,简单点说:默认状态下,字体颜色或者背景 ...
- 把《c++ primer》读薄(3-2 标准库vector容器+迭代器初探)
督促读书,总结精华,提炼笔记,抛砖引玉,有不合适的地方,欢迎留言指正. 标准库vector类型初探,同一种类型的对象的集合(类似数组),是一个类模版而不是数据类型,学名容器,负责管理 和 存储的元素 ...
- Java:IDEA下使用JUNIT
JUnit单元测试--IntelliJ IDEA (本文转载自华行天下) 单元测试的基本使用 一.环境配置 使用idea IDE 进行单元测试,首先需要安装JUnit 插件. 1.安装JUnit插件步 ...
- canvas 图片拖拽旋转之二——canvas状态保存(save和restore)
引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...
- 前端读取Excel报表文件
在实际开发中,经常会遇到导入Excel文件的需求,有的产品人想法更多,想要在前端直接判断文件内容格式是否正确,必填项是否已填写 依据HTML5的FileReader,可以使用新的API打开本地文件(参 ...