盒子的经典案例：
实现下面的布局：
分析思路
<div>
<ul>
<li><img /></li>
</ul>
<div>
具体实现：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 盒子案例2 </title>
<link rel="stylesheet" style="text/css" href="box2.css" />
</head>
<body>
<!--div 在布局中起到一个控制整个内容显示的位置-->
<div class="div1">
<!--ul在布局中的作用是可以控制显示内容多少-->
<ul class="faceul">
<li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li>
<li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li>
<li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li>
<li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li>
<li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li>
<li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li>
<li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li>
<li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li>
<li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li>
<li><img src="3.jpg" /><br/> <a href="">祈福雅安</a></li>
</ul>
</div>
</body>
</html>
.div1{
width:500px;
height:400px;
border:1px solid gray;
font-size:12px;
}
.faceul{
width:410px;
height:300px;
border:1px solid red;
margin-left:5px;
padding-left:5px;
}
.faceul li{
list-style-type:none;
width:70px;
height:80px;
border:1px solid red;
margin-right:10px;
margin-top:5px;
float:left;/*左浮动*/
}
.faceul li img{
width:50px;
height:50px;
margin-left:10px;
margin-top:5px;
margin-bottom:5px;
}
.faceul li a{
margin-left:10px;
}