<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-26作业</title>
<style type="text/css">/*高:2 1*2 38 13 156 130 80 +1+2*/ /*宽:1*2 15*2 */
*{
padding: 0px;
margin: 0px;
}
body{
font-size: 15px;
font-family: "宋体";
background-color: #282828;
}
.box{
width: 302px;
height: 471px;
margin: 10px auto;
background-color: #fff;
padding: 4px;
border: solid #f6f6f6 0.05px;
}
.title{
width: 302px;
height: 36px;
background-color: #f5f5f5;
border-top: solid #52bbae 2px;
}
.start{ float: left }
.titleinfo{
margin: 9px 0;
}
.start{ font-size: 20px; font-family: "宋体"; font-weight: bold; }
.plan{ float: right; }
.plan a:link{ color: red; }
.plan a:visit{ color: orange; }
.plan a:hover{ text-decoration: none; }
.plan a:active{ text-decoration: none; color:pink; }
.body{
width: 300px;
height: 431px;
border: solid #f0f0f0 2px;
}
.alltitle{ font-size: 15px; font-family: "宋体"; font-weight: bold; }
.alltitle a:link{ color:black; text-decoration: none; }
.alltitle a:visit{ color: orange; }
.alltitle a:hover{ text-decoration: none; }
.alltitle a:active{ text-decoration: none; color:pink; }
.line{
width: 268px;
height: 11px;
margin: 11px auto 0px;
border-top: dashed #f0f0f0 2px;
}
.top{
/*15 18 0*/
width: 268px;
height: 156px;
margin: 13px 15px 0;
background-color: #fff;
}
.top li{ margin: 6.6px auto; }
.center{
width: 268px;
height: 130px;
margin: 0 auto;
background-color: #fff;
}
.center li{ margin: 6.8px auto; }
.bottom{
width: 268px;
height: 80px;
margin: 0 auto;
background-color: #fff;
}
.bottom li{ margin: 8.75px auto; }
.contentleft{ float:left; width:; }
.contentright{ float: right; width: }
.red{ color:red; }
ul>li{ list-style: none; }
</style>
</head>
<body>
<div class="box">
<div class="title">
<div class="start titleinfo"><span>近期开班</span></div>
<div class="plan titleinfo"><a href="http://www.4399.com/?haoqq123" target="_balnk">18年面授开班计划</a></div>
</div>
<div class="body">
<div class="top">
<div class="alltitle"><a href="http://www.4399.com/?haoqq123" target="_balnk">人工智能+Python高薪就业班</a></div>
<ul>
<li class="contentleft">开班时间:<span class="red">2018-04-26</span></li> <li class="contentright"><span class="red">预约报名</span></li>
<li class="contentleft">开班时间:<span class="red">2018-03-23</span></li> <li class="contentright"><span class="red">无座，名额爆满</span></li>
<li class="contentleft">开班时间:2018-01-23</li> <li class="contentright">开班盛况</li>
<li class="contentleft">开班时间:2018-12-20</li> <li class="contentright">开班盛况</li>
<li class="contentleft">开班时间:2018-11-18</li> <li class="contentright">开班盛况</li>
</ul>
</div>
<div class="line"></div>
<div class="center">
<div class="alltitle"><a href="http://www.4399.com/?haoqq123" target="_balnk">Android开发+测试-高薪就业班</a></div>
<ul>
<li class="contentleft">开班时间:<span class="red">2018-04-26</span></li> <li class="contentright"><span class="red">预约报名</span></li>
<li class="contentleft">开班时间:2018-03-23</li> <li class="contentright">开班盛况</li>
<li class="contentleft">开班时间:2018-01-23</li> <li class="contentright">开班盛况</li>
<li class="contentleft">开班时间:2018-12-20</li> <li class="contentright">开班盛况</li>
</ul>
</div>
<div class="line"></div>
<div class="bottom">
<div class="alltitle"><a href="http://www.4399.com/?haoqq123" target="_balnk">大数据软件开发-青芒工作室</a></div>
<ul>
<li class="contentleft">开班时间:<span class="red">2018-04-26</span></li> <li class="contentright"><span class="red">预约报名</span></li>
<li class="contentleft">开班时间:2018-03-23</li> <li class="contentright">开班盛况</li>
</ul>
</div>
</div>
</div>
</body>
</html>
成品：
