<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航条</title> <style type="text/css"> /*清除默认样式*/ * { margin: 0; padding: 0; } body { font: 12px/1宋体; } .outer { width: 300px; height: 553px; background-color: #bfa; margin: 50px auto; } /* 设置title的边框 */ .title { /*设置上边框*/ border-top: 2px #019e8b solid; /*设置盒子的高度*/ height: 36px; /*设置背景样式*/ background-color: #f5f5f5; /*设置title的行高*/ line-height: 36px; /*设置title的内边距*/ padding: 0px 22px 0px 16px; } /*设置title中的超链接*/ .title a { float: right; /*设置字体颜色*/ color: red; } /*设置h3*/ .title h3 { font: 16px/36px 微软雅黑; } /*设置内容*/ .content { font-size: 14px; border: 1px solid #deddd9; /*设置内边距*/ padding: 0px 28px 0px 20px; } /*设置内容中的超链接*/ .content a { color: black; /*去除超链接的下划线*/ text-decoration: none; /*设置字体大小*/ font-size: 12px; } /*为超链接添加一个hover伪类*/ .content a:hover { color: red; /*为超链接添加下划线*/ text-decoration: underline; } .content h3 { margin-top: 14px; margin-bottom: 16px; } /*设置内容中的红色字体*/ .content .red { color: red; font-weight: bold; } /*设置内容中的li*/ .content li { margin-bottom: 13px; } /*设置右侧的a的样式*/ .content .right { /*设置向右浮动*/ float: right; } /*设置u1的样式*/ .content ul { /*去除项目符号*/ list-style: none; /*为u1设置一个下边框*/ border-bottom: 1px dashed#deddd9; } /*取消最后一个ul的边框*/ .content .no-border { border: none; } </style> </head> <body> <!--创建一个外层div,容纳整个内容--> <div class="outer"> <!--开班信息的头部--> <div class="title"> <a href="#">16年面授开班计划</a> <h3>近期开班</h3> </div> <!--开班信息的主要内容--> <div class="content"> <h3><a href="#"></a>JavaEE+云计算-全程就业班</h3> <ul> <li> <a href="#">开班时间: <span class="red">2016-04-27</span></a> <a class="right" href="#"><span class="red">预约报名</span></a> </li> <li> <a href="#">开班时间: <span class="red">2016-04-07</span></a> <a class="right" href="#"><span class="red">无座，名额爆满</span></a> </li> <li> <a href="#">开班时间: <span>2016-03-15</span></a> <a class="right" href="#"><span>开班盛况</span></a> </li> <li> <a href="#">开班时间: <span>2016-02-25</span></a> <a class="right" href="#"><span>开班盛况</span></a> </li> <li> <a href="#">开班时间: <span class="red">2016-12-26</span></a> <a class="right" href="#"><span>开班盛况</span></a> </li> </ul> <h3><a href="#"></a>Android+人工智能-全程就业班</h3> <ul> <li> <a href="#">开班时间: <span class="red">2016-04-10</span></a> <a class="right" href="#"><span class="red">预约报名</span></a> </li> <li> <a href="#">开班时间: <span>2016-03-17</span></a> <a class="right" href="#"><span>开班盛况</span></a> </li> <li> <a href="#">开班时间: <span>2016-02-20</span></a> <a class="right" href="#"><span>开班盛况</span></a> </li> <li> <a href="#">开班时间: <span>2016-12-23</span></a> <a class="right" href="#"><span>开班盛况</span></a> </li> </ul> <h3><a href="#"></a>前端+HTML5-全程就业班</h3> <ul class="no-border"> <li> <a href="#">开班时间: <span class="red">2016-05-10</span></a> <a class="right" href="#"><span class="red">预约报名</span></a> </li> <li> <a href="#">开班时间: <span>2016-03-16</span></a> <a class="right" href="#"><span>开班盛况</span></a> </li> </ul> </div> </div> </body> </html>