<!DOCTYPE html><html lang="zh-CN"><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>热门推荐</title> <link rel="stylesheet" href="course.css"></head><body> <div class="latest-courses"> <h2>热门推荐</h2> <div class="courses-first"> <!-- 课程 --> <div class="course"> <!-- 图片 --> <a> <img src="img/01.jpeg"> </a> <!-- 课程描述 --> <div class="miaosu"> <!-- 标题 --> <div class="title"> <small class="tag">初级</small> <a>php8,我来也</a> </div> </div> <!-- 其他 --> <div class="other"> <span>24323223次学习</span> <span>收藏</span> </div> </div> <div class="course"> <!-- 图片 --> <a> <img src="img/02.png"> </a> <!-- 课程描述 --> <div class="miaosu"> <!-- 标题 --> <div class="title"> <small class="tag">初级</small> <a>php8,我来也</a> </div> </div> <!-- 其他 --> <div class="other"> <span>24323223次学习</span> <span>收藏</span> </div> </div> <div class="course"> <!-- 图片 --> <a> <img src="img/03.jpeg"> </a> <!-- 课程描述 --> <div class="miaosu"> <!-- 标题 --> <div class="title"> <small class="tag">初级</small> <a>php8,我来也</a> </div> </div> <!-- 其他 --> <div class="other"> <span>24323223次学习</span> <span>收藏</span> </div> </div> <div class="course"> <!-- 图片 --> <a> <img src="img/04.jpeg"> </a> <!-- 课程描述 --> <div class="miaosu"> <!-- 标题 --> <div class="title"> <small class="tag">初级</small> <a>php8,我来也</a> </div> </div> <!-- 其他 --> <div class="other"> <span>24323223次学习</span> <span>收藏</span> </div> </div> <div class="course"> <!-- 图片 --> <a> <img src="img/05.jpeg"> </a> <!-- 课程描述 --> <div class="miaosu"> <!-- 标题 --> <div class="title"> <small class="tag">初级</small> <a>php8,我来也</a> </div> </div> <!-- 其他 --> <div class="other"> <span>24323223次学习</span> <span>收藏</span> </div> </div> <div class="course"> <!-- 图片 --> <a> <img src="img/06.png"> </a> <!-- 课程描述 --> <div class="miaosu"> <!-- 标题 --> <div class="title"> <small class="tag">初级</small> <a>php8,我来也</a> </div> </div> <!-- 其他 --> <div class="other"> <span>24323223次学习</span> <span>收藏</span> </div> </div> <div class="course"> <!-- 图片 --> <a> <img src="img/07.jpeg"> </a> <!-- 课程描述 --> <div class="miaosu"> <!-- 标题 --> <div class="title"> <small class="tag">初级</small> <a>php8,我来也</a> </div> </div> <!-- 其他 --> <div class="other"> <span>24323223次学习</span> <span>收藏</span> </div> </div> <div class="course"> <!-- 图片 --> <a> <img src="img/08.png"> </a> <!-- 课程描述 --> <div class="miaosu"> <!-- 标题 --> <div class="title"> <small class="tag">初级</small> <a>php8,我来也</a> </div> </div> <!-- 其他 --> <div class="other"> <span>24323223次学习</span> <span>收藏</span> </div> </div> <div class="course"> <!-- 图片 --> <a> <img src="img/09.jpeg"> </a> <!-- 课程描述 --> <div class="miaosu"> <!-- 标题 --> <div class="title"> <small class="tag">初级</small> <a>php8,我来也</a> </div> </div> <!-- 其他 --> <div class="other"> <span>24323223次学习</span> <span>收藏</span> </div> </div> <div class="course"> <!-- 图片 --> <a> <img src="img/10.jpeg"> </a> <!-- 课程描述 --> <div class="miaosu"> <!-- 标题 --> <div class="title"> <small class="tag">初级</small> <a>php8,我来也</a> </div> </div> <!-- 其他 --> <div class="other"> <span>24323223次学习</span> <span>收藏</span> </div> </div> </div> </div></body></html>body { background-color: #efefef;}body a{ text-decoration: none; color: #555; font-size: small;}body a:hover{ color: red;}.latest-courses { width: 1020px; margin: 0;}.latest-courses .courses-first { display: grid; grid-template-columns: repeat(5,1fr); gap: 30px 10px;}.latest-courses .courses-first .course img{ width: 100%; border-radius: 5px 5px 0 0;}.latest-courses .courses-first .course img:hover{ transform: scale(1.1); transition: 0.4s;}.latest-courses .courses-first .course{ background-color: #fff; border-radius: 5px; overflow: hidden;}.latest-courses .courses-first .course .miaosu{ padding: 15px; display: grid; gap: 10px;}.latest-courses .courses-first .course .miaosu .title .tag{ color: red; background-color: bisque; border-radius: 2px; padding: 2px 4px; font-size: x-small;}.latest-courses .courses-first .course .other{ color: #aaa; font-size: small; display: flex; place-content:space-between;}
