码迷,mamicode.com
首页 > 移动开发 > 详细

手机站横向滚动

时间:2016-08-01 12:05:47      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:

写手机站时我们会遇到像这样的左右滑动的效果,技术分享刚开始还误以为是某个js效果,后来才知道,原来是css就可以实现的。

* {margin: 0;padding: 0;}
.box {width: 100%; height: 44px; background: rgba(252, 252, 252, .8); border-bottom: 1px solid #ebebeb; line-height: 40px; overflow: hidden; position: relative;}
.box2 {width: 100%; overflow: hidden; height: 52px; overflow-x: auto; position: relative;}
.box3 {width: 1400px; left: 0; position: absolute; top: 0;}
.box3 div {width: 86px; height: 44px; background: #999; float: left; padding: 0 10px;}
<div class="box">
    <div class="box2">
        <div class="box3">
            <div>first</div>
            <div>second</div>
            <div>third</div>
            <div>four</div>
            <div>five</div>
            <div>six</div>
            <div>first</div>
            <div>second</div>
            <div>third</div>
            <div>four</div>
            <div>five</div>
            <div>six</div>
        </div>
    </div>
</div>

 

手机站横向滚动

标签:

原文地址:http://www.cnblogs.com/xuemingyao/p/5725171.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!