<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>開班信息</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px/1 "宋體";
}
.outer{
width: 400px;
height: 500px;
background-color: #fff;
margin:50px auto;
padding: 5px;
/*overflow: hidden;*/
}
.title{
border-top:2px #f5f5f5 solid;
background-color: #f5f5f5;
height: 36px;
line-height: 36px;
}
.title a{
float: right;
margin-left:22px;
}
.title h3{
margin:0 16px ;
/*float: left;*/
}
.title .a1{
color: red;
margin: auto 12px;
}
.content{
border:1px solid white;
}
.clearfix:after{
content:"";
display: block;
clear: both;
}
/* .content{
zoom:1;
}*/
.content a{
float: left;
text-decoration: none;
color:black;
margin: 5px 12px;
}
.content .ul1{
width: 300px;
list-style: none;
border-bottom:1px dashed #deddd9;
float: left;
margin: 0px 50px;
}
.content .ul2{
width: 300px;
list-style: none;
border-bottom:1px dashed #deddd9;
float: left;
margin: 0px 50px;
}
.content .ul3{
width: 300px;
list-style: none;
border-bottom:1px dashed #deddd9;
float: left;
margin: 0px 50px;
}
.content .a2{
float: left;
}
.content .a3{
float: right;
}
</style>
</head>
<body>
<div class="outer">
<div class="title">
<a class="a1" href="#">18年面授開班計劃</a>
<h3>近期開班</h3>
</div>
<div class="content clearfix">
<ul class="ul1">
<li><a href="#">人工智能+pytho-高薪就業(yè)班</a></li>
<li><a class="a2" href="#">開班時間:<span style="color: red;">2018-04-26</span></a></li>
<li><a class="a3" href="#"><span style="color: red;">預約報名</span></a></li>
<li><a class="a2" href="#">開班時間:<span style="color: red;">2018-03-23</span></a></li>
<li><a class="a3" href="#"><span style="color: red;">無座,名額爆滿</span></a></li>
<li><a class="a2" href="#">開班時間:2018-01-23</a></li>
<li><a class="a3" href="#">開班盛況</a></li>
<li><a class="a2" href="#">開始時間:2017-12-20</a></li>
<li><a class="a3" href="#">開班盛況</a></li>
<li><a class="a2" href="#">開始時間:2017-11-18</a></li>
<li><a class="a3 clear" href="#">開班盛況</a></li>
</ul>
<ul class="ul2">
<li><a href="#">android開發(fā)+測試-高薪就業(yè)班</a></li>
<li><a class="a2" href="#">開班時間:<span style="color: red;">2018-04-26</span></a></li>
<li><a class="a3" href="#"><span style="color: red;">預約報名</span></a></li>
<li><a class="a2" href="#">開班時間:2018-03-23</a></li>
<li><a class="a3" href="#">開班盛況</a></li>
<li><a class="a2" href="#">開班時間:2018-01-23</a></li>
<li><a class="a3" href="#">開班盛況</a></li>
<li><a class="a2" href="#">開始時間:2017-12-20</a></li>
<li><a class="a3" href="#">開班盛況</a></li>
</ul>
<ul class="ul3">
<li><a href="#">大數(shù)據(jù)軟件開發(fā)-青芒工作室</a></li>
<li><a class="a2" href="#">開班時間:<span style="color: red;">2018-04-26</span></a></li>
<li><a class="a3" href="#"><span style="color: red;">預約報名</span></a></li>
<li><a class="a2" href="#">開班時間:2018-01-23</a></li>
<li><a class="a3" href="#">開班盛況</a></li>
</ul>
</div>
</div>
</body>
</html>
代碼效果
圖片.png
