1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图片展示</title> 6 <style type="text/css"> 7 8 .pic_list_con{ 9 width: 958px; 10 border: 1px solid #666; 11 margin: 50px auto 0; 12 } 13 14 .pic_list_title{ 15 width: 918px; 16 height: 50px; 17 border-bottom: 1px solid #666; 18 margin: 0 auto; /* 让这个div相对父级div水平居中*/ 19 /* background-color: gold;*/ 20 } 21 22 .pic_list_title h3{ 23 float: left; /* 解决top塌陷的问题同时将其转换成行内块，让其自动撑开父级*/ 24 font: normal 18px/50px 'Microsoft Yahei'; 25 margin: 0; 26 padding: 0 10px; 27 border-bottom: 2px solid red; 28 } 29 30 .pic_list_wrap{ 31 width: 918px; 32 margin: 20px auto 13px ; 33 overflow: hidden; 34 } 35 36 .pic_list{ 37 list-style: none; 38 padding: 0; 39 width: 950px; 40 /*background-color: gold;*/ 41 margin: 0; 42 overflow: hidden; 43 } 44 45 46 .pic_list li{ 47 width: 160px; 48 height: 68px; 49 float: left; 50 margin: 0 29px 25px 0; 51 } 52 53 </style> 54 </head> 55 <body> 56 <div class="pic_list_con"> 57 58 <div class="pic_list_title"> 59 <h3>图片展示</h3> 60 </div> 61 62 <div class="pic_list_wrap"> 63 <!-- ul.pic_list>(li>a>img)*10 --> 64 <ul class="pic_list"> 65 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li> 66 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li> 67 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li> 68 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li> 69 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li> 70 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li> 71 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li> 72 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li> 73 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li> 74 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li> 75 </ul> 76 </div> 77 </div> 78 </body> 79 </html>
第四十六节 图片列表布局
猜你喜欢
转载自www.cnblogs.com/kogmaw/p/12423866.html
今日推荐
周排行