<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>p1</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: 0px;}
h4{display: inline;}
header{ 100%;height: 50px;background: #AEFEEE;}
aside{ 20%;height: 540px;background: #708090;float: left;}
section{ 80%;height: 540px;background: #D88FD8;float: left;overflow: auto;}
footer{ 100%;height: 50px;background: green;clear: left;}
figure{padding: 0px;}
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>
</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>
<li><a href=""><img src="imges/vip.png" alt="" width="45"></a></li>
<li><a href=""><img src="imges/vip.png" alt="" width="45"></a></li>
</ul>
</nav>
</footer>
</body>
</html>