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>