html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="kbxx.css">
</head>
<body>
<div class="da">
<div class="dat">
<span class="datl">近期开班</span>
<span class="datr">18年面授开班计划</span>
</div>
<div class="dab">
<div class="dab1">
<h3>人工智能+python-高薪就业班</h3>
<span class="dab1l">开班时间：<span>2018-04-26</span></span>
<span class="dab1r"><span>预约报名</span></span>
<span class="dab1l"></span>
<span class="dab1r"></span>
<span class="dab1l"></span>
<span class="dab1r"></span>
<span class="dab1l"></span>
<span class="dab1r"></span>
<span class="dab1l"></span>
<span class="dab1r"></span>
</div>
<div class="dab2"></div>
<div class="dab3"></div>
</div>
</div>
</body>
</html>
css：
.da{
width:310px;
height:480px;
margin:50px auto;
}
.dat{
width:270px;
height:20px;
padding:10px 20px;
background-color:#f5f5f5;
}
.datl{
font-size:15px;
float:left;
line-height:20px;
}
.datr{
font-size:10px;
float:right;
line-height:20px;
color:red;
text-decoration:underline;
}
.dab{
width:250px;
height:400px;
padding:15px 30px 15px 20px;
margin:0 auto;
border:1px solid #DEDDD9;
}
.dab1{
width:250px;
height:160px;
}
.dab1 h3{
font-size:12px;
margin-bottom:10px;
}
.dab1l{
display:inline-block;
width:120px;
height:10px;
float:left;
margin-bottom:20px;
font-size:10px;
}
.dab1r{
display:inline-block;
width:50px;
height:10px;
float:right;
margin-bottom:20px;
font-size:10px;
}
.dab1l span,.dab1r span{
color:red;
}
.dab2{
width:250px;
height:150px;
border-top:1px dashed #E1E0DD;
}
.dab3{
width:250px;
height:90px;
border-top:1px dashed #E1E0DD;
}
