第二十节 盒子练习 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>box test</title>
 6 
 7     <style type="text/css">
 8         
 9         .box{
10             width: 380px;
11             height: 35px;
12             font-size: 20px;
13             color: #333;  /* 字体颜色 */
14             font-family: "Microsoft Yahei";  /* 字体：微软雅黑 */
15             font-weight: normal; /* 去掉加粗 */
16             line-height: 20px;  /* h3自带行高格式，将其设置为与字体等大 */
17             border-top: 1px solid #f00;
18             border-bottom: 3px solid #666;
19             padding-top: 15px;
20             padding-left: 20px;
21         }
22 
23         .box1{
24             width: 400px;
25             height: 50px;
26             font-size: 20px;
27             color: #333;  /* 字体颜色 */
28             font-family: "Microsoft Yahei";  /* 字体：微软雅黑 */
29             font-weight: normal; /* 去掉加粗 */
30             line-height: 50px;  /* 通过将行高撑大实现padding的作用 */
31             border-top: 1px solid #f00;
32             border-bottom: 3px solid #666;
33             text-indent: 20px;  /* 通过首行缩进 实现padding-left作用 */
34             
35         }
36         
37         
38     </style>
39 
40 </head>
41 <body>
42     <h3 class="box">新闻列表 </h3>
43     <h3 class="box1">新闻列表 </h3>
44 </body>
45 </html>

 

posted @ 2020-03-05 15:43  kog_maw  阅读(97)  评论(0)    收藏  举报