PHP自学之路-----DIV+CSS(第三天）

盒子的经典案例：
实现下面的布局：

分析思路

   

     

   

具体实现：

 

 
  
  
 

 
  
  

    
    

	 

 祈福雅安
	 

 祈福雅安
	 

 祈福雅安
	 

 祈福雅安
	 

 祈福雅安
	 

 祈福雅安
	 

 祈福雅安
	 

 祈福雅安
	 

 祈福雅安
	 

 祈福雅安

    
  
 

.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;
    
}