开班信息CSS实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; /*h3,p等样式默认会有一些不同的默认内外边距,把他们去掉以便更好的布局*/ } body{ font-size: 12px; } .outer{ border: 1px solid grey; width: 300px; margin: 50px auto; padding-bottom: 5px; } .title{ border-top: 1px solid blue; height: 20px; background-color: lavender; padding: 10px 20px; } .title a{ float: right; } .content{ padding: 0 15px; } .content ul{ list-style: none; border-bottom: 1px dashed blue; } .content h3{ margin: 15px 0 10px 0 ; } .content li{ margin: 5px; } .content a{ text-decoration: none; } .content a:hover{ text-decoration: underline; } .content .red{ color: red; } .content .right{ float: right; } </style> </head> <body> <div class="outer"> <div class="title"> <a href="#">16年面授开班计划</a> <h3>近期开班</h3> <!-- h3是块元素,为了避免h3在前面,把a标签给挡住--> </div> <div class="content"> <h3>Java云计算就业班</h3> <ul> <li><a href="#">开班时间:<span class="red">2017-03-03</span></a> <a class="right " href=""><span class="red">预约报名</span></a> </li> <li><a href="#">开班时间:<span class="red">2017-03-03</span></a> <a class="right " href=""><span class="red">预约报名</span></a> </li> <li><a href="#">开班时间:<span class="red">2017-03-03</span></a> <a class="right " href=""><span class="red">预约报名</span></a> </li> <li><a href="#">开班时间:<span >2017-03-03</span></a> <a class="right " href=""><span >预约报名</span></a> </li> <li><a href="#">开班时间:<span>2017-03-03</span></a> <a class="right " href=""><span >预约报名</span></a> </li> </ul> <h3>Java云计算就业班</h3> <ul> <li><a href="#">开班时间:<span class="red">2017-03-03</span></a> <a class="right " href=""><span class="red">预约报名</span></a> </li> <li><a href="#">开班时间:<span class="red">2017-03-03</span></a> <a class="right " href=""><span class="red">预约报名</span></a> </li> <li><a href="#">开班时间:<span class="red">2017-03-03</span></a> <a class="right " href=""><span class="red">预约报名</span></a> </li> <li><a href="#">开班时间:<span >2017-03-03</span></a> <a class="right " href=""><span >预约报名</span></a> </li> <li><a href="#">开班时间:<span>2017-03-03</span></a> <a class="right " href=""><span >预约报名</span></a> </li> </ul> </div> </div> </body> </html>