捣鼓移动端的;移动的html首先要加一段话:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

这个可以让宽度没有滚轮;

 

html代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title></title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header class="header">
<a class="select" href="javascript:;" data-class="1">单机</a>
<a href="javascript:;" data-class="2">网游</a>
<a href="javascript:;" data-class="3">排行</a>
<a href="javascript:;" data-class="4">热门</a>
</header>
<div class="banner"></div>
<ul class="appList clearfix">
<li>
<a class="detail-link" href="detail.html" >
<span class="app-img"></span>
<span class="app-text">
<strong>录制视频</strong>
<i>文件大小:2.1Mb</i>
<em>中国最好的APP,疯狂来袭!</em>
</span>
</a>
<a class="downLoad-btn" href="javascript:;">下载</a>
</li>
<li>
<a class="detail-link" href="detail.html" >
<span class="app-img"></span>
<span class="app-text">
<strong>录制视频</strong>
<i>文件大小:2.1Mb</i>
<em>中国最好的APP,疯狂来袭!</em>
</span>
</a>
<a class="downLoad-btn" href="javascript:;">下载</a>
</li>
<li>
<a class="detail-link" href="detail.html" >
<span class="app-img"></span>
<span class="app-text">
<strong>录制视频</strong>
<i>文件大小:2.1Mb</i>
<em>中国最好的APP,疯狂来袭!</em>
</span>
</a>
<a class="downLoad-btn" href="javascript:;">下载</a>
</li>
<li>
<a class="detail-link" href="detail.html" >
<span class="app-img"></span>
<span class="app-text">
<strong>录制视频</strong>
<i>文件大小:2.1Mb</i>
<em>中国最好的APP,疯狂来袭!</em>
</span>
</a>
<a class="downLoad-btn" href="javascript:;">下载</a>
</li>
<li>
<a class="detail-link" href="detail.html" >
<span class="app-img"></span>
<span class="app-text">
<strong>录制视频</strong>
<i>文件大小:2.1Mb</i>
<em>中国最好的APP,疯狂来袭!</em>
</span>
</a>
<a class="downLoad-btn" href="javascript:;">下载</a>
</li>
<li>
<a class="detail-link" href="detail.html" >
<span class="app-img"></span>
<span class="app-text">
<strong>录制视频</strong>
<i>文件大小:2.1Mb</i>
<em>中国最好的APP,疯狂来袭!</em>
</span>
</a>
<a class="downLoad-btn" href="javascript:;">下载</a>
</li>
<li>
<a class="detail-link" href="detail.html" >
<span class="app-img"></span>
<span class="app-text">
<strong>录制视频</strong>
<i>文件大小:2.1Mb</i>
<em>中国最好的APP,疯狂来袭!</em>
</span>
</a>
<a class="downLoad-btn" href="javascript:;">下载</a>
</li>
<li>
<a class="detail-link" href="detail.html" >
<span class="app-img"></span>
<span class="app-text">
<strong>录制视频</strong>
<i>文件大小:2.1Mb</i>
<em>中国最好的APP,疯狂来袭!</em>
</span>
</a>
<a class="downLoad-btn" href="javascript:;">下载</a>
</li>
<li>
<a class="detail-link" href="detail.html" >
<span class="app-img"></span>
<span class="app-text">
<strong>录制视频</strong>
<i>文件大小:2.1Mb</i>
<em>中国最好的APP,疯狂来袭!</em>
</span>
</a>
<a class="downLoad-btn" href="javascript:;">下载</a>
</li>
</ul>
<footer class="footer">没有更多啦~</footer>
</body>
</html>

CSS代码如下:

 

body,ul,li,a,img,div,span,strong,i,em,header{ margin: 0;padding: 0; text-decoration: none;}
img{vertical-align: top;}
ul,li{list-style: none;}
/*清除*/
.clearfix{zoom: 1;}
.clearfix:after{ display: block; height: 0; font-size: 0; clear: both; visibility: hidden; content: '.'; }
/*header*/
.header{width: 100%;height: 40px;padding: 5px 0;}
.header a{width: 25%;height:30px;line-height: 30px;text-align: center;font-size:1em;border-right: 1px solid #cccccc;float: left; color: #444444;}
.header a.select{color: #0f6ac5;}
/*banner*/
.banner{width: 100%;height: 160px;background: #999}
/*app图标区域*/
.appList{width: 100%;}
.appList li{width: 100%;height: 78px;border-bottom: 1px solid #cccccc;position: relative;float: left;}
strong,i,em{font-style: normal;outline: none;}

.detail-link{display: block;padding: 10px;width: 100%;height: 78px;}
.detail-link:hover{background: #eee;}
.app-img{width: 58px;height: 58px;border-radius: 5px;background: #cccccc;position: absolute;top: 10px;left: 10px;}
.app-text{margin-left: 68px;padding-right:64px;display: block; }
.app-text strong,.app-text i,.app-text em{display: block;line-height: 130%;color: #999;overflow: hidden;}
.app-text strong{font-size: 1em;color: #444;}
.app-text i,.app-text em{font-size: 0.8em;}
.downLoad-btn{width: 60px;height: 36px;line-height: 36px;text-align: center;background:#0f6ac5;border-radius: 5px;position: absolute;top:21px;right: 10px;color: #fff;font-size: 1em;}
/*底部的*/
.footer{ width: 100%; padding: 10px 0; text-align: center; font-size: 0.8em; color: #999;}





/*公用部分*/
.header,.header a,.detail-link,.app-text{-webkit-box-sizing: border-box;}



















 

·······