<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>0210课堂演示</title>
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,
width=device-width,initial-scale=1.0">
<!--//手机端name="viewport"屏幕设定
//maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,最大最小缩放比例为1，不允许点击缩放
//width=device-width,initial-scale=1.0 设定内容与设备的屏幕等宽等高-->
<style type="text/css">
body{margin:0;}
h4{display:inline;}
header{width:100%; height:50px; background:#AEFEEE;}
aside{width:20%; height:540px; background:#708090; float:left;}
section{width:80%; height:540px; background:#D8BFD8; float:left;overflow:auto;}
footer{width:100%; height:50px; background:#F0FFFF;clear:left;}
figure{padding:0;}
img{max-width:70%;}
ul{list-style-type: none;}
li{display:inline;}
a{text-decoration: none;}
</style>
</head>
<body>
<!--//元素：header头部/footer尾部/section主体/aside边框
//样式：width/height/background
//margin:0 设置外边距，去掉body和内容的白边即可
元素：figure/figcaption
overflow:auto 内容超出父元素容器后自动加滚动条
nav主导航利于浏览器解锁，看着方便
header/aside/hgroup
样式：width/max-width
-->
<header>
<hgroup>
<img src="4.jpg" alt="" width="20">
<h4><a href>移动端页面练习</a></h4>
</hgroup>
</header>
<aside>
<nav>
<ul>
<li><a href=""><img src="6.jpg" alt=""></a></li>
<li><a href=""><img src="6.jpg" alt=""></a></li>
<li><a href=""><img src="6.jpg" alt=""></a></li>
<li><a href=""><img src="6.jpg" alt=""></a></li>
<li><a href=""><img src="6.jpg" alt=""></a></li>
</ul>
</nav>
</aside>
<section>
<figure>
<img src="4.jpg" alt="" width="45%">
<img src="5.jpg" alt="" width="45%">
</figure>
<figcaption>食品/家电</figcaption>
<figure>
<img src="6.jpg" alt="" width="45%">
<img src="7.jpg" alt="" width="45%">
</figure>
<figcaption>汽车/家居</figcaption>
<figure>
<img arc="8.jpg" alt="" width="45%">
<img arc="4.jpg" alt="" width="45%">
</figure>
<figcaption>食品/家电</figcaption>
<figure>
<img src="5.jpg" alt="" width="45%">
<img src="6.jpg" alt="" width="45%">
</figure>
<figcaption>汽车/家居</figcaption>
<figure>
<img src="5.jpg" alt="" width="45%">
<img src="6.jpg" alt="" width="45%">
</figure>
<figcaption>汽车/家居</figcaption>
<figure>
<img src="5.jpg" alt="" width="45%">
<img src="6.jpg" alt="" width="45%">
</figure>
<figcaption>汽车/家居</figcaption>
</section>
<footer>
<nav>
<ul>
<li><a href=""><img src="6.jpg" alt="" width="45"></a></li>
<li><a href=""><img src="6.jpg" alt="" width="45"></a></li>
<li><a href=""><img src="6.jpg" alt="" width="45"></a></li>
<li><a href=""><img src="6.jpg" alt="" width="45"></a></li>
<li><a href=""><img src="6.jpg" alt="" width="45"></a></li>
</ul>
</nav>
</footer>
</body>
</html>
