1.先看看经典案例效果图，导出思路：
分析：思路
基本结构
<div>
<ul>
<li><img src=""/> </li>
…………
</ul>
</div>
2.案例演示：
（1）box2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子模型加强</title>
<link rel="stylesheet" type="text/css" href="box2.css" />
</head> <body>
<div class="div1">
<!--ul在布局中可以控制显示内容的多少-->
<ul class="faceul"> <li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
</ul> </div>
</body>
</html>
（2）box2.css
@charset "utf-8";
/* CSS Document */ .div1 {
width:500px;
height:600px;
border:1px solid gray;
} .faceul{
width:400px;
height:550px;
border:1px solid red;
padding:5px;
margin:10px;
} .faceul li {
list-style-type:none;
float:left;/*左浮动*/
width:55px;
height:55px;
border:1px solid red;
margin-right:5px;
margin-top:5px;
} .faceul li img {
width:50px;
height:50px;
margin-left:5px;
margin-top:5px;
}
效果图：
这时候我们再次回顾当初盒子模型图，印象就更深了：