盐城网站建设 -> 信息中心 -> 网络编程 -> CSS/HTML

纯CSS实现移动端导航左右滑动的方法

日期:2019-01-18 09:34:27 阅读:183次 【 字体:

html代码:

<div id="nav">
<ul class="list">
<li class="item">菜单1</li>
<li class="item">菜单2</li>
<li class="item">菜单3</li>
<li class="item">菜单4</li>
<li class="item">菜单5</li>
<li class="item">菜单6</li>
<li class="item">菜单7</li>
<li class="item">菜单8</li>
</ul>
</div>

css代码

body{
width:100%;
overflow-x:hidden;
}
li{
list-style:none;
}
#nav{
width:100%;
height:80px;
overflow-x:scroll;
position:relative;
}
.list{
width:500%;
box-sizing:border-box;
}
.item{
float:left;
width:150px;
height:50px;
font-size:30px;
line-height:50px;
margin-right:30px;
text-align:center;
}

方法二:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="maincate">
 <a href="#">首页</a>
 <a href="#">SuperMap</a>
 <a href="#">三维GIS</a>
 <a href="#">移动GIS</a>
 <a href="#">云GIS</a>
 <a href="#">二三维一体化</a>
 <a href="#">大数据GIS</a>
</div>
<div>
 正文<br>
 正文<br>
 正文<br>
 正文<br>
 正文<br>
 正文<br>
 正文<br>
 正文<br>
 正文<br>
 正文<br>
</div>
<style>
 .maincate{width: 100%;
   height: 50px;
   line-height: 50px;
   white-space: nowrap;
   box-shadow: 0 1px 2px rgba(0,0,0,.1);
   overflow-x: scroll;
   overflow-y: hidden;
   -webkit-backface-visibility: hidden;
   -webkit-perspective: 1000;
   -webkit-overflow-scrolling: touch;
   text-align: justify;
   background: #f78361;
   padding: 0px 5px;
   box-sizing: border-box;
 }
 .maincate a{ color: #fff; text-decoration: none; margin-right: 10px;}
 .maincate::-webkit-scrollbar{display: none;}
</style>
</body>
</html>









暂无...


上一篇:纯css 瀑布流实现方法
下一篇:select 不可选 变灰 只读
最新文章
会员 客服 QQ 电话 充值 工单
Top

24小时客服热线

0515-87213010

18036323215

多特vs奥格斯堡
时时彩平台排行 赖子牛牛抢庄技巧 后三选包胆 万人炸金花安卓版 128福彩官网 时时彩教程图片 万汇棋牌app 时时彩单双怎么跟 河北时时走势图开奖号码 软件计划怎么跟好 冠军pk10直播视频 速八彩票骗局 鱼丸游戏下载安卓 立博 时时彩后一稳赚技巧 三d一胆四拖对照表