html:

<div class="chosen-container">
<div class="chosen-swiper">
<a href="ticketDetail.html">
<p class="name">壳牌加油</p>
<p class="money">20<span>元</span></p>
<p class="explain">20元无门槛优惠券</p>
</a>
<a href="ticketDetail.html">
<p class="name">壳牌加油</p>
<p class="money">20<span>元</span></p>
<p class="explain">20元无门槛优惠券</p>
</a>
<a href="ticketDetail.html">
<p class="name">壳牌加油</p>
<p class="money">20<span>元</span></p>
<p class="explain">20元无门槛优惠券</p>
</a>
<a href="ticketDetail.html">
<p class="name">壳牌加油</p>
<p class="money">20<span>元</span></p>
<p class="explain">20元无门槛优惠券</p>
</a>
</div>
</div>

css:

.chosen-container{
overflow: auto;
}
.chosen-swiper{
display: -moz-box; /*Firefox*/
display: -webkit-box; /*Safari,Opera,Chrome*/
display: box;
}
.chosen-swiper a{
position: relative;
display:block!important;
width: 4.7rem;
height: 2.5rem;
background: url('../../img/user/btn_-image.png') no-repeat;
background-size: cover;
color: rgb(65,61,62);
text-decoration: none;
} .chosen-swiper .name{
position: absolute;
top: .36rem;
right: .54rem;
font-size: .26rem;
} .chosen-swiper .money{
position: absolute;
top: .88rem;
left: .52rem;
font-size: .55rem;
} .money span{
font-size: .3rem;
} .chosen-swiper .explain{
position: absolute;
top: 1.74rem;
left: .58rem;
font-size: .24rem;
}

CSS实现移动端横向滑动的更多相关文章

  1. 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条

    <!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...

  2. 纯css实现移动端横向滑动列表

    前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...

  3. 纯css实现移动端横向滑动列表(可应用于ionic3移动app开发)

    前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...

  4. 用css巧妙实现移动端横向滑动展示功能

    前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...

  5. 【css】用css巧妙实现移动端横向滑动展示功能

    前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...

  6. 实现移动端touch事件的横向滑动列表效果

    要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...

  7. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  8. overflow-x: scroll;横向滑动详细讲解

    overflow-x: scroll;横向滑动(移动端使用详解) css3 , ie8以上 <!DOCTYPE html> <html lang="en"> ...

  9. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

随机推荐

  1. Javascript高级编程学习笔记(27)—— BOM(1)window对象1

    ECMAScript是JS的核心 但是对于在浏览器中运行的JS,BOM显然才是真正的核心 我们知道JS是由三个部分组成的 BOM.DOM.ECMAScript 之前的文章我们主要介绍的是ECMAScr ...

  2. 9.视差特效、回弹动画、overScrollBy

    视差特效 * 应用场景: 微信朋友圈, QQ空间, 微博个人展示,向下拉出,松开回弹* 功能实现: > 1. 重写overScrollBy > 2. 松手之后执行动画, 类型估值器 .  ...

  3. 2.AsyncQueryHandler、内容提供者

    会话页面 Test :测试 public class Test extends AndroidTestCase{ public void test(){ Uri uri = Uri.parse(&qu ...

  4. Linux服务器开机自动启动服务或脚本的方法

    由于种种原因我们需要重启服务器或断电重启,服务都得手动一个一个启动太过麻烦,所以专门了解开机自启脚本的设置方法. 方式一: 直接在脚本/etc/rc.d/rc.local(和/etc/rc.local ...

  5. 【Spark调优】小表join大表数据倾斜解决方案

    [使用场景] 对RDD使用join类操作,或者是在Spark SQL中使用join语句时,而且join操作中的一个RDD或表的数据量比较小(例如几百MB或者1~2GB),比较适用此方案. [解决方案] ...

  6. AccessTokenValidation3 源码分析 jwttoken验证流程图

    processon分享地址:https://www.processon.com/view/link/5c6a0b59e4b08a7683c40fc5

  7. spark面试总结1

    Spark Core面试篇01 一.简答题 1.Spark master使用zookeeper进行HA的,有哪些元数据保存在Zookeeper? 答:spark通过这个参数spark.deploy.z ...

  8. Django-用户模块与权限系统相关

    Django的用户模块与权限系统 Django的用户系统都提供哪些功能: 提供用户模块(User Model) 权限验证(默认添加已有模块的增加删除修改权限) 用户组与组权限功能 用户鉴权与登录功能 ...

  9. Azure认知服务之Face API上手体验

    Azure认知服务:Face API Face API是Azure认知服务之一,Face API有两个主要功能: 人脸检测 Face API可在图像中以高精度人脸位置检测多达64个人脸.图像可以通过文 ...

  10. python自动化工具之pywinauto(一个实例)结合pyuserinput

    以下是pywinauto使用指南.这个窗口句柄可以在Spy++中查看 (Microsoft Spy++(查看窗口句柄) 10.00.30319 官方最新绿色版) python自动化工具之pywinau ...