# **新建一個項目**
```
<!--引入zepto-->
<script src="js/zepto.min.js"></script>
<!--引入touch-->
<script src="js/touch.js"></script>
```
#### 搭建布局
```
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<!--
? ? ? ?視口：兼容移動
? ?-->
? ?<meta name="viewport"
? ? ? ? ?content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
? ?<!--
? ? ? ?告訴ie瀏覽器使用最新的解析器解析
? ?-->
? ?<meta http-equiv="X-UA-Compatible" content="IE=edge">
? ?<title>Title</title>
</head>
<body>
? ?<div class="box">
? ? ? ?<!--頭部-->
? ? ? ?<ul class="header">
? ? ? ? ? ?<li class="current">新聞</li>
? ? ? ? ? ?<li>科技</li>
? ? ? ?</ul>
?
? ? ? ?<!--線條-->
? ? ? ?<span class="line"></span>
?
? ? ? ?<!--內容-->
? ? ? ?<div class="list">
? ? ? ? ? ?<div class="list1">
? ? ? ? ? ? ? ?<ul>
? ? ? ? ? ? ? ? ? ?<li>新聞內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>新聞內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>新聞內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>新聞內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>新聞內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>新聞內容新聞內容</li>
? ? ? ? ? ? ? ?</ul>
? ? ? ? ? ? ? ?<a href="javascript:;">查看更多...</a>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div class="list2">
? ? ? ? ? ? ? ?<ul>
? ? ? ? ? ? ? ? ? ?<li>科技內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>科技內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>科技內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>科技內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>科技內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>科技內容新聞內容</li>
? ? ? ? ? ? ? ?</ul>
? ? ? ? ? ? ? ?<a href="javascript:;">查看更多...</a>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ?</div>
<!--引入zepto-->
<script src="js/zepto.min.js"></script>
<!--引入touch-->
<script src="js/touch.js"></script>
</body>
</html>
```
#### 添加默認的樣式
```
*{
.....
/*清除系統的觸摸事件*/
touch-action: none;
/*盒子大小的計算方式*/
/*box-sizing: border-box;*/
}
/*box里面的盒子要移動，移動要用到定位*/
.box{
position: relative;
}
```
