<!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>