首页
登录 | 注册

CSS实现移动端横向滑动

CSS

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 3d说到空间坐标轴
    有一次我们说到掷骰子那个游戏,当时是用了一个steps属性+雪碧图来制作帧动画,这当然颇为不错,但其实一开始我想的不是这样的,我想的是用真的3d和动画去做,这个方案涉及到不少空间的知识,今天来给大伙好好说说,这css 3d到底怎么玩. 先上 ...
  • 补习系列(20)-大话 WebSocket 与 &quot;尬聊&quot;的实现
    目录 一.聊聊 WebSocket 二.Stomp 是个什么鬼 三.SpringBoot 整合 WebSocket A. 引入依赖 B. WebSocket 配置 C. 控制器 D. 前端实现 四.参考文档 一.聊聊 WebSocket 从 ...
  • ERP不规范,同事两行泪
    最近的很多次对外交流,都聊到了ERP建设的话题,并且无一例外的不那么让人省心,回想我这么多年走过的ERP坑坑路,在这里也写下经验和总结,希望能给正在或者即将走上ERP建设路的企业一些思考和帮助. 导读 1.几个瞎眼而普遍的案例 2.ERP的 ...
  • Android6.0 源码修改之 Contacts应用
    一.Contacts应用的主界面和联系人详情界面增加顶部菜单添加退出按钮 通过Hierarchy View 工具可以发现 主界面对应的类为 PeopleActivity 联系人详情界面对应的类为 QuickContactActivity 左 ...
  • WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNormalMaterial MeshNorm ...
  • 前言 本文也会在github上我的web-study仓库中同步更新,欢迎star. 戳这里,传送 准备工作 判断是否需要FQ或安装镜像,镜像一般可安装国内淘宝镜像,详情可看这里:cnpm npm install -g cnpm --regi ...

2019 cecdns.com webmaster#cecdns.com
12 q. 0.077 s.
京ICP备10005923号