總結：
1）html有很多默認樣式，然而實際應用中並不需要，因此要在制作樣式之前清除掉默認樣式。
2）注意清除margin-top塌陷
3）使用float：left后要使用clear：both清除其影響
4）注意要兼容IE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片列表布局</title> <style type="text/css"> body,ul,h3{ /*清除默認格式中的margin 和 padding*/ margin:0; padding:0; } ul{ /*清除ul默認格式中的.*/ list-style: none; } /*清除margin-top塌陷*/ .clearfix:before,.clearfix:after{ content:""; display:table; } /*清除浮動*/ .clearfix:after{ clear:both; } /*兼容IE*/ .clearfix{ zoom:1; } .pic_list_con{ width:958px; border:1px solid #ddd; /*多出來的ul要剪掉*/ overflow:hidden; } .pic_list_con h3{ width:918px; height:50px; border-bottom: 1px solid #ddd; /*是h3居中，不是h3中的文字居中哦！*/ margin:0 auto; } .pic_list_con h3 span{ /*內聯元素轉為內聯塊元素，支持全部樣式*/ display:inline-block; height:50px; border-bottom: 2px solid red; font: 18px/50px 'Microsoft YaHei UI'; padding:0 15px; } .pic_list_con ul{ width: 950px; margin:20px 0 13px 20px; } .pic_list_con ul li{ width:160px; height:68px; /*多個div在一個頁面上，默認情況是：一行一個div，但是只要在div的css中使用 float：left，可以使一行有多個div，這樣可以把網頁划分成很多塊， 但是使用該屬性會影響后面的元素，所有如果后面的div不想再被影響， 可以使用clear:both； 可以理解為清除float:left和float:right的影響，返回到默認狀態。*/ float:left; margin:0 29px 25px 0; } </style> </head> <body> <div class="pic_list_con"> <h3><span>圖片展示</span></h3> <ul class="clearfix"> <li><a href=""><img src="images/0031.jpg" alt="商品圖片"></a></li> <li><a href=""><img src="images/0031.jpg" alt="商品圖片"></a></li> <li><a href=""><img src="images/0031.jpg" alt="商品圖片"></a></li> <li><a href=""><img src="images/0031.jpg" alt="商品圖片"></a></li> <li><a href=""><img src="images/0031.jpg" alt="商品圖片"></a></li> <li><a href=""><img src="images/0031.jpg" alt="商品圖片"></a></li> <li><a href=""><img src="images/0031.jpg" alt="商品圖片"></a></li> <li><a href=""><img src="images/0031.jpg" alt="商品圖片"></a></li> <li><a href=""><img src="images/0031.jpg" alt="商品圖片"></a></li> <li><a href=""><img src="images/0031.jpg" alt="商品圖片"></a></li> </ul> </div> </body> </html>
效果圖：
