预期目标
开班信息.png
实现结果
02.png
字体不知道用的哪个所以没有改，细节上应该没有太大问题，但肯定做不到精确到1个像素
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开班信息</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
padding-left: 19px;
font-size: 12px;
}
a{
color: red;
font-size: 12px;
text-decoration:none;
}
a:hover{
color: blueviolet;
}
a.num{
font-size: 8px;
}
.l{
width: 300px;
height: 471px;
margin: 20px auto;
}
.s{
height: 2px;
background: #019e8b;
}
.l1{
height: 36px;
background: #f5f5f5;
font-size: 16px;
padding-top: 12px;
padding-left: 16px;
}
.l2{
background:white;
border: #deddd9 1px solid;
width: 298px;
height: 433px;
}
.a1{
float: right;
padding-top: 2px;
padding-right: 22px;
text-decoration: underline;
}
.l21{
font-weight: bold;
}
#l21{
padding-top: 16px;
}
li{
padding-top: 8px;
}
.num{
font-size: 8px;
font-weight: bold;
}
.check{
float: right;
font-weight: bold;
margin-right: 28px;
}
.num1{
font-size: 8px;
}
.check1{
float: right;
margin-right: 28px;
}
.l3{
BORDER-TOP: #deddd9 1px dashed;
OVERFLOW: hidden;
HEIGHT: 1px;
width: 250px;
margin: 16px auto 8px auto
}
</style>
</head>
<body>
<div class="l">
<div class="s"></div>
<div class="l1">近期开班<a href="#" class="a1">18年面授开班计划</a></div>
<div class="l2">
<ul>
<li class="l21" id="l21">人工智能+python-高薪就业班</li>
<li class="l22">开班时间：<a href="#" class="num">2018-04-26</a><a href="#" class="check">预约报名</a></li>
<li class="l23">开班时间：<a href="#" class="num">2018-03-23</a><a href="#" class="check">无座，名额爆满</a></li>
<li class="l24">开班时间：<span class="num1">2018-01-23</span><span class="check1">开班盛况</span></li>
<li class="l25">开班时间：<span class="num1">2017-12-20</span><span class="check1">开班盛况</span></li>
<li class="l26">开班时间：<span class="num1">2017-11-18</span><span class="check1">开班盛况</span></li>
</ul>
<DIV class="l3"></DIV>
<ul>
<li class="l21">Androin开发+测试-高薪就业班</li>
<li class="l32">开班时间：<a href="#" class="num">2018-04-26</a><a href="#" class="check">预约报名</a></li>
<li class="l24">开班时间：<span class="num1">2018-03-23</span><span class="check1">开班盛况</span></li>
<li class="l25">开班时间：<span class="num1">2018-01-23</span><span class="check1">开班盛况</span></li>
<li class="l26">开班时间：<span class="num1">2017-12-20</span><span class="check1">开班盛况</span></li>
</ul>
<DIV class="l3"></DIV>
<ul>
<li class="l21">大数据软件开发-青芒工作室</li>
<li class="l22">开班时间：<a href="#" class="num">2018-04-26</a><a href="#" class="check">预约报名</a></li>
<li class="l25">开班时间：<span class="num1">2018-01-23</span><span class="check1">开班盛况</span></li>
</ul>
</div>
</div>
</body>
</html>
网友评论