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>
