盒子模型的效果：
调整faceul的宽，可以调整每一排摆放的数目，调整div1的margin值，可以改变整体的位置，这是很有用的布局模式
===========================================================
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="demo1.css"/>
</head>
<body>
<div class="div1"> <!--起到控制总体位置的作用-->
<ul class="faceul"> <!--可以控制显示内容的多少-->
<li><img src="1.jpg"/></li>
<li><img src="1.jpg"/></li>
<li><img src="1.jpg"/></li>
<li><img src="1.jpg"/></li>
<li><img src="1.jpg"/></li>
<li><img src="1.jpg"/></li>
<li><img src="1.jpg"/></li>
<li><img src="1.jpg"/></li>
<li><img src="1.jpg"/></li>
<li><img src="1.jpg"/></li>
<li><img src="1.jpg"/></li>
<li><img src="1.jpg"/></li>
</ul>
</div>
</body>
</html>
================================================
CSS代码：
*{
margin:0px;
padding:0px;
}
.div1{
500px;
height:300px;
border:1px solid gray;
}
.faceul{
420px;
height:250px;
border:1px solid red;
}
.faceul li{
list-style-type:none;
float:left;
70px;
height:50px;
border:1px solid red;
margin-left:5px;
margin-top:5px;
}
.faceul img{
60px;
height:40px;
margin-left:5px;
margin-top:5px;
}