<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习作业</title> <style type="text/css"> #kuangjia{ width: 310px; height: 457px; background:rgb(ffffff); margin: 0 auto; border: solid skyblue 2px; } .box1{ border-top: solid skyblue; margin: 14px 21px 10px 13px; height: 25px; } .a1{ font-size: 15px; float: left; } .a2{ font-size: 12px; float: left; margin-left: 103px; } .box2{ /position: absolute;/ clear: both; width: 299px; height: 160px; /background: red;/ margin:10px 0px; padding-top: 10px; } ol{ list-style: none;} a{ text-decoration: none; font-size: 11px; margin: 15px 0px; } a:hover{ background: red; height: 300px; } a:active{ background: green; } .b1{ clear: both; margin:17px 117px 18px 21px; font-size: 12px; } .b2{ float: left; margin-left: -20px; /line-height: 17px;/ } .b3{ float: left; margin-right: 20px; /line-height: 17px;/ } .box3{ /position: absolute;/ clear: both; width: 299px; height: 130px; /background: red;/ margin:0px auto; } .c1{ margin:0px 117px 0px 20px; font-size: 12px; } .c2{ float: left; margin-left: -20px; /line-height: 17px;/ } .c3{ float: left; margin-right: 20px; /line-height: 17px;/ } .box4{ /position: absolute;/ clear: both; width: 299px; height: /99px/; /background: red;/ margin:0px auto; } .d1{ margin:0px 117px 0px 20px; font-size: 12px; } .d2{ float: left; margin-left: -20px; /line-height: 17px;/ } .d3{ float: left; margin-right: 20px; /line-height: 17px;/ } </style> </head> <body> <div id="kuangjia"> <div class="box1"> <div class="a1"> 近期开班 </div> <div class="a2"><a href="#">18年面授开办计划</a></div> </div> <div class="box2"> <div class="b1">人工智能+python3-高薪就业班</div> <ol class="b2"> <li><a href="问我">开班时间：2018-04-26</a></li> <li><a href="">开班时间：2018-03-23</a></li> <li><a href="">开班时间：2018-01-23</a></li> <li><a href="">开班时间：2017-12-20</a></li> <li><a href="">开班时间：2017-11-18</a></li> </ol> <ol class="b3"> <li><a href="">预约报名</a></li> <li><a href="">无座，名额爆满</a></li> <li><a href="">开班盛况</a></li> <li><a href="">开班盛况</a></li> <li><a href="">开班盛况</a></li> </ol> </div> <div class="box3"> <div class="c1">Android开发+测试-高薪就业班</div> <ol class="c2"> <li><a href="问我">开班时间：2018-04-26</a></li> <li><a href="">开班时间：2018-03-23</a></li> <li><a href="">开班时间：2018-01-23</a></li> <li><a href="">开班时间：2017-12-20</a></li> </ol> <ol class="c3"> <li><a href="">预约报名</a></li> <li><a href="">开班盛况</a></li> <li><a href="">开班盛况</a></li> <li><a href="">开班盛况</a></li> </ol> </div> <div class="box4"><div class="d1">大数据软件开发-青芒工作室</div> <ol class="d2"> <li><a href="问我">开班时间：2018-04-26</a></li> <li><a href="">开班时间：2018-03-23</a></li> </ol> <ol class="d3"> <li><a href="">预约报名</a></li> <li><a href="">开班盛况</a></li> </ol> </div> </div> </body> </html>
作者：试翼腾渊
链接：https://www.jianshu.com/p/5b446cc33777
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论