唱战歌之前我们需要准备一下
<!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: 300px;
/*height: 471px;*/
background-color: pink;
margin:50px auto;
}
.title{
border-top:2px #019e8b solid;
background-color: #f5f5f5;
height: 36px;
line-height: 36px;
}
.title a{
float: right;
font-size: 11px;
margin:0 22px;
color: red;
}
.title h3{
margin:0 16px;
font-size: 16PX;
}
.content h3{
font-size: 12px;
margin: 16px 0;
}
.content{
border: 1px #deddd9 solid;
}
.content span{
color: red;
}
.nav1{
list-style: none;
width: 250px;
border-bottom:1px #deddd9 solid;
border-bottom-style: dashed;
margin-left: 20px;
}
.nav1 .li1{
float: right;
/*清除浮动*/
clear: both;
/*margin-right: 29px;*/
}
/*.nav1 .li2{
margin-left: 20px
}*/
.nav1 li{
margin-bottom: 15px;
font-size: 12px;
}
.content .nav1:last-child{
border: none;
}
.content a{
text-decoration: none;
color: black;
}
.content a:hover{
color:blue;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="outer">
<div class="title">
<a href="#">18年面授开班计划</a>
<h3>近期开班</h3>
</div>
<div class="content">
<ul class="nav1">
<h3 class="li2"><a href="#">人工智能+python-高薪就业班</a></h3>
<li class="li1"><a href="#"><span>预约报名</span></a></li>
<li class="li1"><a href="#"><span>无座，名额爆满</span></a></li>
<li class="li1"><a href="#">开班盛况</a></li>
<li class="li1"><a href="#">开班盛况</a></li>
<li class="li1"><a href="#">开班盛况</a></li>
<li class="li2"><a href="#">开班时间:<span>2018-04-26</span></a></li>
<li class="li2"><a href="#">开班时间:<span>2018-03-23</span></a></li>
<li class="li2"><a href="#">开班时间:2018-01-23</a></li>
<li class="li2"><a href="#">开班时间:2017-12-20</a></li>
<li class="li2"><a href="#">开班时间:2017-11-18</a></li>
</ul>
<ul class="nav1">
<h3 class="li2"><a href="#">Android研发+测试-高薪就业办</a></h3>
<li class="li1"><a href="#"><span>预约报名</span></a></li>
<li class="li1"><a href="#">开班盛况</a></li>
<li class="li1"><a href="#">开班盛况</a></li>
<li class="li1"><a href="#">开班盛况</a></li>
<li class="li2"><a href="#">开班时间:<span>2018-04-26</span></a></li>
<li class="li2"><a href="#">开班时间:2018-03-23</a></li>
<li class="li2"><a href="#">开班时间:2018-01-23</a></li>
<li class="li2"><a href="#">开班时间:2017-12-20</a></li>
</ul>
<ul class="nav1">
<h3 class="li2"><a href="#">大数据软件开发-青芒工作室</a></h3>
<li class="li1"><a href="#"><span>预约报名</span></a></li>
<li class="li1"><a href="#">开班盛况</a></li>
<li class="li2"><a href="#">开班时间:<span>2018-04-26</span></a></li>
<li class="li2"><a href="#">开班时间:2018-01-23</a></li>
</ul>
</div>
</div>
</body>
</html>
嗨起来
image.png
