第四十六节 图片列表布局 

 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>

 

posted @ 2020-03-05 23:33  kog_maw  阅读(219)  评论(0)    收藏  举报