DIV+CSS(第三天） · 走進PHP的繽紛世界

### 盒子的經典案例：實現下面的布局： ![](https://box.kancloud.cn/2016-06-03_5750fd5012840.jpg) ### 分析思路 ~~~ <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 class="div1">  <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; } ~~~