<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合实例-移动端页面开发</title>
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
<style type="text/css">
body{margin: 0}
header{ 100%;height: 50px;background:#FFCCCC}
h4{display:inline;}
aside{ 20%;height: 540px;background:#CCCCCC;float: left;}
section{ 80%;height: 540px;background:#f0f0f0;float: left;overflow: auto;}
footer{ 100%;height: 50px;background:#FFCCCC;clear: left;}
img{max- 70%}
ul{list-style-type: none;}
li{display: inline;}
a{text-decoration: none;}
</style>
</head>
<body>
<header>
<hgroup>
<img src="imges/ss.png" alt="">
<h4>移动端页面</h4>
</hgroup>
</header>
<aside>
<nav>
<ul>
<li><a href=""><img src="imges/zhi.png" alt=""></a></li>
<li><a href=""><img src="imges/ka.png" alt=""></a></li>
<li><a href=""><img src="imges/tuan.png" alt=""></a></li>
<li><a href=""><img src="imges/ding.png" alt=""></a></li>
<li><a href=""><img src="imges/vip.png" alt=""></a></li>
<li><a href=""><img src="imges/sc.png" alt=""></a></li>
</ul>
</nav>
</aside>
<section>
<figure><img src="sp/sp1.png" alt="" width="50%"><img src="sp/sp2.png" alt="" width="50%"></figure>
<figcaption>食品/家电</figcaption>
<figure><img src="sp/sp3.png" alt="" width="50%"><img src="sp/sp4.png" alt="" width="50%"></figure>
<figcaption>家电/家居</figcaption>
<figure><img src="sp/sp5.png" alt="" width="50%"><img src="sp/sp6.png" alt="" width="50%"></figure>
<figcaption>数码/珠宝</figcaption>
<figure><img src="sp/sp1.png" alt="" width="50%"><img src="sp/sp2.png" alt="" width="50%"></figure>
<figcaption>食品/家电</figcaption>
<figure><img src="sp/sp3.png" alt="" width="50%"><img src="sp/sp4.png" alt="" width="50%"></figure>
<figcaption>家电/家居</figcaption>
<figure><img src="sp/sp5.png" alt="" width="50%"><img src="sp/sp6.png" alt="" width="50%"></figure>
<figcaption>数码/珠宝</figcaption>
</section>
<footer>
<nav>
<ul>
<li><a href=""><img src="imges/zy.png" alt="" width="45"></a></li>
<li><a href=""><img src="imges/qb.png" alt="" width="45"></a></li>
<li><a href=""><img src="imges/gw.png" alt="" width="45"></a></li>
<li><a href=""><img src="imges/dl.png" alt="" width="45"></a></li>
</ul>
</nav>
</footer>
</body>
</html>
html5-移动端布局模板
天道酬勤，厚积薄发。
君子之行，静以修身，俭以养德。
非淡泊无以明志，非宁静无以致远。
如有恒，何须三更起，半夜眠；最怕莫，三天打鱼两天晒网，竹篮打水一场空。