开班信息设计 

  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>

 

 

posted @ 2019-07-19 12:13  zuiaimiusi  阅读(138)  评论(0)    收藏  举报