13第二章练习

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             /*问题：我不知道图片的尺寸  宽高 */
 8             .wrap{
 9                 width: 192px;
10                 /*border: 1px solid red;*/
11                 /*水平居中*/
12                 margin: 10px auto;
13             }
14             .wrap-content{
15                 /*水平居中*/
16                 width: 180px;
17                 margin: 0 auto;
18                 /*设置字体大小为0 解决下面img元素和字体之间有间隙*/
19                 font-size: 0;
20             }
21             p{
22                 background-color: #f2f2f2;
23                 /*默认情况下有margin，要把它设置成0 才会和其他元素没有距离*/
24                 margin: 0;
25                 /*单独设置字体大小(在wrap-content中文字设置为0，故这里要单独设置)*/
26                 font-size: 14px;
27                 /* 文字与图片上下高度36 */
28                 height: 36px;
29                 /* 字垂直居中 */
30                 line-height: 36px;
31                 /* 字体颜色 */
32                 color: #333333;
33             }
34             .item{
35                 /* 盒子之间有16px */
36                 margin-top:16px ;
37             }
38         </style>
39     </head>
40     <body>
41         <!--class 可以重复使用-->
42         <div class="wrap">
43             <div class="wrap-content">
44                 <!--大盒子里面的每一项-->
45                 <div class="item">
46                     <img src="img/news1.jpg"/>
47                     <p>新歌声：扎西致敬...</p>
48                 </div>
49                 
50                 <!--大盒子里面的每一项-->
51                 <div class="item">
52                     <img src="img/news2.jpg"/>
53                     <p>嘻哈：扎西致敬...</p>
54                 </div>
55                 <!--大盒子里面的每一项-->
56                 <div class="item">
57                     <img src="img/news3.jpg"/>
58                     <p>极限：扎西致敬...</p>
59                 </div>
60             </div>
61         </div>
62     </body>
63 </html>