css+div 图片排列布局

我们来看如下图这种css div网页布局吧,分析一下是由一个大层,里面由多个li标签组成了,
 

下面就是我们的上面这段图片显示方式的div布局哦.
 
<div id="face">
 <div id="facetitle">
 <span>头像列表</span>
 <input id="faceclose" type="submit" value="" />
 </div>
 <ul id="faceul">
 <li><a href="#"><img src="images/1.bmp"></img></a></li>
 <li><a href="#"><img src="images/11.bmp"></img></a></li>
 <li><a href="#"><img src="images/2.bmp"></img></a></li>
 <li><a href="#"><img src="images/13.bmp"></img></a></li>
 <li><a href="#"><img src="images/19.bmp"></img></a></li>
 <li><a href="#"><img src="images/26.bmp"></img></a></li>
 <li><a href="#"><img src="images/31.bmp"></img></a></li>
 <li><a href="#"><img src="images/43.bmp"></img></a></li>
 <li><a href="#"><img src="images/48.bmp"></img></a></li>
 <li><a href="#"><img src="images/63.bmp"></img></a></li>
 <li><a href="#"><img src="images/68.bmp"></img></a></li>
 <li><a href="#"><img src="images/64.bmp"></img></a></li>
 <li><a href="#"><img src="images/65.bmp"></img></a></li>
 <li><a href="#"><img src="images/66.bmp"></img></a></li>
 <li><a href="#"><img src="images/71.bmp"></img></a></li>
 <li><a href="#"><img src="images/88.bmp"></img></a></li>
 <li><a href="#"><img src="images/93.bmp"></img></a></li>
 <li><a href="#"><img src="images/99.bmp"></img></a></li>
 <li><a href="#"><img src="images/112.bmp"></img></a></li>
 <li><a href="#"><img src="images/114.bmp"></img></a></li>
 
</ul>
 </div>
 
样式很简洁的就用了div ul li就完成了如此漂亮又有规则的网页图片布局哦,那我们来看看css是怎么写的吧.
 
#face{
 width:300px;
 border:1px solid #b4b4b4;
 height:280px;
 margin:0 0 0 50px;
 background:#ffffff;
 }
 #face input{
 background:url(images/faceclose.gif) no-repeat center;
 margin:0 0 0 140px;
 float:left;
 border:none;
 cursor:pointer;
 width:30px;
 height:30px;
 }
 #facetitle{
 font-weight:bold;
 height:30px;
 width:292px;
 margin:3px 0 0 3px;
 background:url(images/faceback.gif) repeat-x top left;
 }
 #facetitle span{
 float:left;
 color:#ffffff;
 display:block;
 height:30px;
 line-height:30px;
 width:100px;
 margin:0 0 0 10px;
 }
 #faceul{
 margin:0 0 0 2px;
 width:290px;
 }
 #faceul li{
 float:left;
 border:1px solid #b4b4b4;
 margin:5px 0 0 4px;
 height:52px;
 width:50px;
 }
 #faceul li a{
 
display:block;
 height:52px;
 width:50px;
 }
 
#faceul img{
 margin:5px 0 0 5px;
 border:none;
 height:40px;
 width:40px;
 }
 
上面我们定义了face然后再给它的子类进行了定义,li,a ,img ul 等