码农code之路最终实现的效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #eeeeee;
}
/* 文本列表的实现 */
.newlist{
background-color: white;
border: 1px #999999 solid;
margin: 50px auto;
width: 330px;
padding: 0;
list-style: none;
}
.newlist>li{
/* border: 1px olivedrab solid; */
background: url("img/图标.png") no-repeat 5px;
background-size: 14px;
padding-left: 20px;
line-height: 36px;
text-align: justify;
text-align-last: justify;
}
.newlist a{
color: black;
text-decoration: none;
}
.newlist mark{
background-color: transparent;
border: 1px #dddddd solid;
color:gray;
font-size: 12px;
padding-right: 2px 4px;
margin-right: 3px;
}
.newlist a, .newlist mark{
display: inline-block;
}
/* 图片列表的实现 */
.imglist{
list-style: none;
width: 79vw;
border: 1px gray solid;
margin: 50px auto;
padding: 0;
font-size: 0;
text-align-last: justify;
}
.imglist > li{
box-sizing: border-box;
border: 1px red solid;
width: 24%;
display: inline-block;
}
.imglist >li img{
width: 100%;
}
.imglist dl{
font-size: initial;
margin: 0;
background:yellow;
text-align: left;
text-align-last: left;
}
.imglist dt{
color: gray;
font-weight: bold;
padding:10px 0;
}
.imglist dd{
line-height: 32px;
margin-left: 0;
padding: 0 3px;
}
</style>
</head>
<body>
<div>
<ul class="newlist">
<li >
<a href="">如何做一位合格的码农</a>
<mark>热点</mark>
</li>
<li>
<a href="">有没有不加班的码农</a>
<mark>热点</mark>
</li>
<li>
<a href="">作为一个码农多学技术</a>
<mark>热点</mark>
</li>
</ul>
</div>
<hr>
<div>
<ul class="imglist">
<li>
<a href=""><img src="img/href1.jpg" alt=""></a>
<dl>
<dt>课程亮点</dt>
<dd>tensorflow 人工智能课程</dd>
<dd>tensorflow 人工智能课程</dd>
<dd>tensorflow 人工智能课程</dd>
</dl>
</li>
<li>
<a href=""><img src="img/href2.jpg" alt=""></a>
<dl>
<dt>课程亮点</dt>
<dd>tensorflow 人工智能课程</dd>
<dd>tensorflow 人工智能课程</dd>
<dd>tensorflow 人工智能课程</dd>
</dl>
</li>
<li>
<a href=""><img src="img/href3.png" alt=""></a>
<dl>
<dt>课程亮点</dt>
<dd>tensorflow 人工智能课程</dd>
<dd>tensorflow 人工智能课程</dd>
<dd>tensorflow 人工智能课程</dd>
</dl>
</li>
<li>
<a href=""><img src="img/href4.jpg" alt=""></a>
<dl>
<dt>课程亮点</dt>
<dd>tensorflow 人工智能课程</dd>
<dd>tensorflow 人工智能课程</dd>
<dd>tensorflow 人工智能课程</dd>
</dl>
</li>
</ul>
</div>
</body>
</html>
