<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<title></title>
<script>
(function(){
var html = document.documentElement;
var hWidth = html.getBoundingClientRect().width;
/*console(hWidth);*/
html.style.fontSize = hWidth/16 +"px";
})()
</script>
<link rel="stylesheet" href="../css/bootstrap.css"/>
<link rel="stylesheet" href="../css/index.css"/>
</head>
<body>
<header id="header">
<a id="task" href="javascript:;"><span class="glyphicon glyphicon-tasks"></span></a>
<h1><span class="glyphicon glyphicon-lock"></span>miaov</h1>
<a id="refresh" href="javascript:;"><span class="glyphicon glyphicon-repeat"></span></a>
</header>
<nav id="nav">
<a class="active" href="javascript:;">综合<span class="glyphicon glyphicon-chevron-down"></span></a>
<a href="javascript:;">销量</a>
<a href="javascript:;">价格
<span id="spanBox">
<span class="glyphicon glyphicon-chevron-up"></span>
<span class="glyphicon glyphicon-chevron-down active"></span>
</span>
</a>
<a href="javascript:;">筛选<span class="glyphicon glyphicon-filter"></span></a>
</nav>
<section id="wrap">
<ul id="list">
<li>
<a href="javascript:;">
<img src="../img/img.png" />
<span id="spanWrap">
<span class="sTitle">苹果(apple)iphone 6(A1586) 16AB 金色 移动联通电信4G手机</span>
<span class="sPrice">#房贷首付v</span>
<span class="sComment">哈批评</span>
</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="../img/img.png" />
<span id="spanWrap">
<span class="sTitle">苹果(apple)iphone 6(A1586) 16AB 金色 移动联通电信4G手机</span>
<span class="sPrice">#房贷首付v</span>
<span class="sComment">哈批评</span>
</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="../img/img.png" />
<span id="spanWrap">
<span class="sTitle">苹果(apple)iphone 6(A1586) 16AB 金色 移动联通电信4G手机</span>
<span class="sPrice">#房贷首付v</span>
<span class="sComment">哈批评</span>
</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="../img/img.png" />
<span id="spanWrap">
<span class="sTitle">苹果(apple)iphone 6(A1586) 16AB 金色 移动联通电信4G手机</span>
<span class="sPrice">#房贷首付v</span>
<span class="sComment">哈批评</span>
</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="../img/img.png" />
<span id="spanWrap">
<span class="sTitle">苹果(apple)iphone 6(A1586) 16AB 金色 移动联通电信4G手机</span>
<span class="sPrice">#房贷首付v</span>
<span class="sComment">哈批评</span>
</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="../img/img.png" />
<span id="spanWrap">
<span class="sTitle">苹果(apple)iphone 6(A1586) 16AB 金色 移动联通电信4G手机</span>
<span class="sPrice">#房贷首付v</span>
<span class="sComment">哈批评</span>
</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="../img/img.png" />
<span id="spanWrap">
<span class="sTitle">苹果(apple)iphone 6(A1586) 16AB 金色 移动联通电信4G手机</span>
<span class="sPrice">#房贷首付v</span>
<span class="sComment">哈批评</span>
</span>
</a>
</li>
</ul>
</section>
</body>
</html>
---------------------------------index.css-----------------------------------------
a,
input,
button {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input,
button {
-webkit-appearance: none;
border-radius: 0;
}
body {
margin: 0;
-webkit-user-select: none;
}
body * {
-webkit-user-select: none;
font-family: helvetica;
}
body {
-webkit-text-size-adjust: 100%;
}
h1 {
margin: 0;
}
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: top;
}
html,
body {
widows: 100%;
height: 100%;
overflow: hidden;
}
#header {
height: 2.06rem;
background-color: #ef3239;
width: 16rem;
position: absolute;
top: 0;
left: 0;
border-bottom: 1px solid #a82d31;
box-sizing: border-box;
}
#header a {
width: 2.56rem;
height: 1.76rem;
position: absolute;
top: 0;
text-align: center;
line-height: 1.76rem;
}
#header #task {
left: 0;
}
#header #task span {
font-size: 0.74rem;
}
#header #refresh {
right: 0;
}
#header #refresh span {
font-size: 0.72rem;
}
#header span {
color: #ffffff;
}
#header h1 {
text-align: center;
font-size: 0.78rem;
color: #FFFFFF;
line-height: 1.76rem;
}
#header h1 span {
font-size: 0.52rem;
margin-right: 0.2rem;
}
.active {
color: #f23838 !important;
}
#nav {
height: 2.1rem;
width: 16rem;
position: absolute;
top: 2.06rem;
left: 0;
background-color: #fdfdfd;
border-top: 1px solid #b0b0b0;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
#nav a {
float: left;
width: 25%;
height: 2.06rem;
text-align: center;
line-height: 2.06rem;
font-size: 0.7rem;
color: #848689;
}
#nav #spanBox {
width: 0.74rem;
display: inline-block;
vertical-align: middle;
}
#nav #spanBox span {
float: left;
font-size: 0.56rem;
}
#nav #spanBox .glyphicon-chevron-down {
left: -0.02rem;
top: -0.12rem;
}
#nav #spanBox .glyphicon-filter {
font-size: 0.74rem;
top: 0.6rem;
}
#list li {
height: 5.62rem;
border-bottom: 1px solid #e0e0e0;
box-sizing: border-box;
}
#list a {
padding: 0.46rem;
height: 4.7rem;
float: left;
}
#list img {
width: 4.7rem;
height: 4.7rem;
float: left;
}
#list #spanWrap {
float: right;
width: 8.64rem;
}
#list .sTitle {
font-size: 0.56rem;
line-height: 0.88rem;
color: #333;
margin-top: 0.1rem;
display: block;
}
#list .sPrice {
display: block;
font-size: 0.76rem;
line-height: 1.28rem;
margin-top: 0.62rem;
color: #F23838 ;
}
#list .sComment {
font-size: 0.56rem;
line-height: 47 50rem;
display: block;
}
#wrap {
position: absolute;
top: 4.16rem;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}