鹽城網站建設 -> 信息中心 -> 網絡編程 -> CSS/HTML

純CSS實現移動端導航左右滑動的方法

日期:2019-01-18 09:34:27 閱讀:198次 【 字體:

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

海南飞鱼游戏技巧