1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 /*先清除浏览器的默认样式*/ 9 margin: 0; 10 padding: 0; 11 } 12 /*统一页面字体*/ 13 body{ 14 font: 12px/1 "宋体"; 15 } 16 .outer{ 17 width: 300px; 18 /*height: 473px;*/ 19 background-color: white; 20 margin: 50px auto; 21 } 22 .title{ 23 height: 36px; 24 background-color: #f5f5f5; 25 /*上边框*/ 26 border-top: 2px solid #019e8d; 27 /*设置行高，这样字体可以居中*/ 28 line-height: 36px; 29 /*设置内边距，让文字向内居中*/ 30 padding: 0px 22px 0px 16px; 31 } 32 .title a{ 33 float: right; 34 color: red; 35 } 36 .title h3{ 37 font: "微软雅黑" 16px/32px; 38 } 39 .content{ 40 /*边框*/ 41 border: solid 2px #deddd9; 42 /*设置内边距*/ 43 padding: 0px 28px 0 20px; 44 } 45 .content ul{ 46 /*去除项目符号*/ 47 list-style: none; 48 /*设置下边框*/ 49 border-bottom: 1px dashed #deddd9; 50 } 51 .content a{ 52 /*去除下划线*/ 53 text-decoration: none; 54 color: black; 55 font-size: 12px; 56 } 57 .content .red{ 58 color: red; 59 font-weight: bold; 60 } 61 .content .right{ 62 float: right; 63 } 64 .content h3{ 65 margin-top: 14px; 66 margin-bottom: 16px; 67 } 68 .content li{ 69 margin-bottom: 15px; 70 } 71 /*取消最后一个列表的边框*/ 72 .content .noborder{ 73 border-bottom: none; 74 } 75 </style> 76 </head> 77 <body> 78 <div class="outer"> 79 <div class="title"> 80 <a href="#">19年面授开班计划</a> 81 <h3>近期开班</h3> 82 </div> 83 <div class="content"> 84 <ul> 85 <h3>JavaEE+云计算-全程就业班</h3> 86 <li><a href="#" class="right"><span class="red">预约报名</span></a></li> 87 <li><a href="#">开班时间：<span class="red">2019-04-27</span></a></li> 88 89 <li><a href="#" class="right"><span class="red">无座，名额爆满</span></a></li> 90 <li><a href="#">开班时间：<span class="red">2019-04-07</span></a></li> 91 92 <li><a href="#" class="right"><span class="">开班盛况</span></a></li> 93 <li><a href="#">开班时间：<span class="">2019-03-15</span></a></li> 94 95 <li><a href="#" class="right"><span class="">开班盛况</span></a></li> 96 <li><a href="#">开班时间：<span class="">2019-02-25</span></a></li> 97 98 <li><a href="#" class="right"><span class="">开班盛况</span></a></li> 99 <li><a href="#">开班时间：<span class="">2019-12-26</span></a></li> 100 </ul> 101 102 <ul> 103 <h3>Android+人工智能-全程就业班</h3> 104 <li><a href="#" class="right"><span class="red">预约报名</span></a></li> 105 <li><a href="#">开班时间：<span class="red">2019-04-10</span></a></li> 106 107 <li><a href="#" class="right"><span class="">开班盛况</span></a></li> 108 <li><a href="#">开班时间：<span class="">2019-03-17</span></a></li> 109 110 <li><a href="#" class="right"><span class="">开班盛况</span></a></li> 111 <li><a href="#">开班时间：<span class="">2019-02-20</span></a></li> 112 113 <li><a href="#" class="right"><span class="">开班盛况</span></a></li> 114 <li><a href="#">开班时间：<span class="">2019-12-23</span></a></li> 115 </ul> 116 117 <ul class="noborder"> 118 <h3>前端+HTML5-全程就业班</h3> 119 <li><a href="#" class="right"><span class="red">预约报名</span></a></li> 120 <li><a href="#">开班时间：<span class="red">2019-04-10</span></a></li> 121 122 <li><a href="#" class="right"><span class="">开班盛况</span></a></li> 123 <li><a href="#">开班时间：<span class="">2019-03-17</span></a></li> 124 125 </ul> 126 </div> 127 </div> 128 </body> 129 </html>
效果图
