<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
ul{
}
li{
list-style: none;
height: 320px;
width: 250px;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
}
p{
font-size: 12px;
color: #66667f;
line-height: 25px;
}
p:first-of-type{
line-height: 32px;
font-size: 14px;
color: #666;
}
p:nth-of-type(2) span{
font-weight: 600;
color: #ff5584;
}
p:last-of-type span:nth-of-type(2n+1){
font-weight: 600;
color: #ff5584;
}
img:first-child{
width: 250px;
height: 188px;
}
</style>
<body>
<ul>
<li>
<img src="./images/pic1.jpg" alt="">
<p>动画便利店X果壳网《西门子洗碗机...</p>
<p><span>原创作品</span>-影视-Motion Graphic</p>
<p>2小时前上传</p>
<p><span>1284</span> <span>人气</span>/<span>11</span><span> 评论/</span> <span>47</span> 推荐</p>
<img src="./images/play.png" alt="">
</li>
<li>
<img src="./images/pic2.gif" alt="">
<p>动画便利店X视知《到底工资怎么发...</p>
<p><span>原创作品</span>-影视-Motion Graphic</p>
<p>3小时前上传</p>
<p><span>1569 </span> 人气/<span>50</span> 评论/ <span>125</span> 推荐</p>
<img src="./images/play.png" alt="">
</li>
</ul>
</body>
</html>
