开始先加meta;

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

CSS推荐的书写习惯如下:

 

/*提倡书写顺序*//*
.sub-menu-test{display: block;width: 20px;height: 20px;line-height: 20px;margin:0;padding: 0;border: 1px solid red;border-radius: 5px;background: #cccccc;background-size: 50px 50px;}
*/

多个单词之间可以用“-”来表示,不推荐用下划线;

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 class="detail-body">
<div class="wrap clearfix">
<!--top-->
<div class="detail-top">
<span class="app-img"></span>
<span class="app-text">
<strong>录制视频</strong>
<i>文件大小:2.1Mb</i>
<em>中国最好的APP</em>
</span>
</div>

<!--main-->
<div class="detail-box">
<h3>中国最好的社交APP</h3>
<div id="detailImg">
<div id="maxWidth">
<span class="img-info"></span><span class="img-info"></span><span class="img-info"></span><span class="img-info"></span>
</div>
</div>
</div>

<!--detail text-->
<div class="detail-text">
<h2 class="detail-sub-title">最炫民族风</h2>
<p>能不能让我陪着你走;既然你说留不住你;回去的路有些黑暗;担心让你一个人走;我想是因为我不够温柔;不能分担你的忧愁;如果这样说不出口;就把遗憾放在心中;把我的悲伤留给自己你的美丽让你带走;从此以后我再没有快乐起来的理由;把我的悲伤留给自己你的美丽让你带走;我想我可以忍住悲伤可不可以你也会想起我。</p>
<i >此页面实现原理:<a href="javascript:;" target="_blank">点此查看</a></i>
</div>
<!--hot app-->
<ul class="app-list">
<li>
<span class="detail-hot-app"></span>
<i>我是一只鱼</i>
<a href="javascript:;" class="hot-down">下载</a>
</li>
<li>
<span class="detail-hot-app"></span>
<i>我是二只鱼</i>
<a href="javascript:;" class="hot-down">下载</a>
</li>
<li>
<span class="detail-hot-app"></span>
<i>我是三只鱼</i>
<a href="javascript:;" class="hot-down">下载</a>
</li>
<li>
<span class="detail-hot-app"></span>
<i>我是四只鱼</i>
<a href="javascript:;" class="hot-down">下载</a>
</li>
</ul>

<!--footer-->
<div class="detail-footer">
<a href="javascript:;" class="detail-footer-btn">立即下载</a>
</div>
</div>
<script>
var maxWidth=document.getElementById("maxWidth");
var finfImg=maxWidth.getElementsByTagName("span");
//是以每一个图片宽度都一样的基础上开始计算的;
var widthNum=(finfImg[0].offsetWidth+10)*finfImg.length;
maxWidth.style.width=widthNum+"px";
</script>
</body>
</html>

CSS代码如下;和上次的用一个文件夹的;

body,ul,li,a,img,div,span,strong,i,em,header,h2,h3{ 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-img img{width: 58px;height: 58px;vertical-align:top; }
.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%; background: #0fa6c5; height: 40px; line-height: 40px; text-align: center; font-size: .8em; color: #fff;}


/*公用部分*/
.header,.header a,.detail-link,.app-text{-webkit-box-sizing: border-box;}
#home_bottom { color: #444; text-align: center; font-size: 1em;width: 100%;height: 30px;line-height: 30px; }
/***********detail页面的**********/
.detail-body{background: #ccc;}
.wrap{padding:10px;-webkit-box-sizing:border-box; }
.detail-top{padding:10px;height: 58px;position: relative;background: #fff;}
.detail-box{width: 100%;margin-top:10px;background: #fff;}
#maxWidth{width: 500px; }
#detailImg{width: 100%;height: 200px;margin: 10px 0;padding: 5px 0;overflow-x: scroll;overflow-y: hidden;}
.img-info{display: inline-block;width:140px;height: 200px;background: #cccccc;margin-left:10px;}
.detail-box h3{height: 36px;line-height: 36px;margin: 0 10px;border-left:5px solid #0f6ac5; font-size: 1em;text-indent: 6px;}
/*detail footer*/
.detail-footer{height: 40px;padding: 10px;background: #fff;margin-top: 10px;}
.detail-footer-btn{display: block;width: 80%;height: 40px;line-height: 40px;margin: 0 auto;border-radius: 4px; background: #0f6ac5;
color: #fff;font-size: 1em;text-align: center;}
.app-list{ width: 100%;height: 110px; padding: 10px 0;background: #fff;}
.app-list li{ width: 25%; height: 110px; float: left;}
.detail-hot-app{display: block;width: 58px;height: 58px;margin: 0 auto;background: #333;border-radius: 5px;}
.app-list li i{display: block;height: 20px;line-height: 20px;text-align: center;font-size: 0.8em;color: #666;}
.app-list li a{display: block;width: 70%;height: 32px;line-height: 32px;margin: 0 auto;border-radius: 5px;background: #0f6ac5;text-align: center;font-size: 1em;color: #fff;}
.detail-text{width: 100%;margin-bottom: 10px;padding: 10px;-webkit-box-sizing: border-box; background: #fff;position: relative;}
.detail-text h2{ height: 30px;line-height: 30px;
list-style: none;border-left:3px solid #0f6ac5 ; font-size: 1em; text-indent:6px;}
.detail-text p{ line-height: 130%;font-size: 0.8em; }
.detail-text i{ display: block; height: 30px;line-height: 30px; border-top:1px dashed #0f6ac5;font-size: .8em; }
/*提倡书写顺序*//*
.sub-menu-test{display: block;width: 20px;height: 20px;line-height: 20px;margin:0;padding: 0;border: 1px solid red;border-radius: 5px;background: #cccccc;background-size: 50px 50px;}
*/

 

“““