<!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-高薪就业班</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开发+测试-高薪就业班</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="#">大数据软件开发-青芒工作室</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
