1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <script type="text/javascript">
7 </script>
8 <style type="text/css">
9 *{
10 margin: 0px;
11 padding: 0px;
12 }
13 /* 统一页面中的字体 字体大小12个像素 1倍行高 宋体*/
14 body{
15 font: 12px/1 宋体;
16 }
17 .outer {
18 width: 300px;
19
20 margin: 50px auto;
21 }
22 .title{
23 border-top: 2px #019e8b solid;
24 height: 36px;
25 background-color: #f5f5f5;
26 /* 设置title的行高 */
27 line-height: 36px;
28 /* 设置padding会影响整个盒子可见框的大小
29 只指定了高度没有指定宽度 宽度默认是父元素的全部 auto，
30 会自动调整大小来适应 确保padding不会溢出title
31 */
32 padding: 0px 22px 0px 16px;
33 }
34 .title a{
35 float: right;
36 color: red;
37 }
38 .title h3{
39 font: 16px/36px 微软雅黑;
40 }
41 /* 设置内容中的超链接 */
42 .content a{
43 color: black;
44 text-decoration: none;
45 font-size: 12px;
46 }
47 ul{
48 list-style: none;
49 /* 为ul设置一个下边框 */
50 border-bottom: 1px dashed #deddd9;
51 }
52 .content .red{
53 /* 设置字体 */
54 color: red;
55 font-weight: bold;
56 }
57 .content .right{
58 float: right;
59 }
60 .content{
61 border: 1px solid #deddd9;
62 padding: 0px 28px 0px 15px;
63 }
64 .content h3{
65 margin-top: 14px;
66 margin-bottom: 16px;
67 }
68 .content li{
69 margin-bottom: 15px;
70 }
71 .content .no-border{
72 border: none;
73 }
74 .content a:hover{
75 color: aqua;
76 text-decoration: underline;
77 }
78 </style>
79
80 </head>
81 <body>
82 <div class="outer">
83 <div class="title">
84 <!-- 继承父元素的行高 -->
85 <a href="#">19年面授开班计划</a>
86 <h3>开班信息</h3>
87 </div>
88 <div class="content">
89 <h3><a href="#">JavaEE云计算全程就业班</a></h3>
90 <ul>
91 <li>
92 <a href="#">开班时间：<span class="red">2019-09-01</span></a>
93 <a class="right" href="#"><span class="red">预约报名</span></a>
94 </li>
95 <li>
96 <a href="#">开班时间：<span class="red">2019-09-15</span></a>
97 <a class="right" href="#"><span class="red">无座，名额爆满</span></a>
98 </li>
99 <li>
100 <a href="#">开班时间：<span >2019-10-01</span></a>
101 <a class="right" href="#"><span >开班盛况</span></a>
102 </li>
103 <li>
104 <a href="#">开班时间：<span >2019-10-15</span></a>
105 <a class="right" href="#"><span >开班盛况</span></a>
106 </li>
107 <li>
108 <a href="#">开班时间：<span >2019-10-18</span></a>
109 <a class="right" href="#"><span >开班盛况</span></a>
110 </li>
111 </ul>
112 <h3><a href="#">Android+人工智能+全程就业班</a></h3>
113 <ul>
114 <li>
115 <a href="#">开班时间：<span class="red">2019-09-01</span></a>
116 <a class="right" href="#"><span class="red">预约报名</span></a>
117 </li>
118 <li>
119 <a href="#">开班时间：<span >2019-09-05</span></a>
120 <a class="right" href="#"><span >开班盛况</span></a>
121 </li>
122 <li>
123 <a href="#">开班时间：<span >2019-10-01</span></a>
124 <a class="right" href="#"><span >开班盛况</span></a>
125 </li>
126 <li>
127 <a href="#">开班时间：<span >2019-10-18</span></a>
128 <a class="right" href="#"><span >开班盛况</span></a>
129 </li>
130 </ul>
131 <h3><a href="#" >前端+HTML5+全程就业班</a></h3>
132 <ul class="no-border">
133 <li>
134 <a href="#">开班时间：<span class="red">2019-09-10</span></a>
135 <a class="right" href="#"><span class="red">预约报名</span></a>
136 </li>
137 <li>
138 <a href="#">开班时间：<span >2019-10-11</span></a>
139 <a class="right" href="#"><span >开班盛况</span></a>
140 </li>
141 </ul>
142 </div>
143 </div>
144
145 </body>
146 </html>
