仿PHP中文网的“热门推荐”

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网 
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>热门推荐</title>
  8.     <link rel="stylesheet" href="course.css">
  9. </head>
  10. <body>
  11.     <div class="latest-courses"> 
  12.         <h2>热门推荐</h2>
  13.         <div class="courses-first">
  14.             <!-- 课程 -->
  15.             <div class="course">
  16.                 <!-- 图片 -->
  17.                 <a>
  18.                     <img src="img/01.jpeg">
  19.                 </a>
  20.                 <!-- 课程描述 -->
  21.                 <div class="miaosu">
  22.                     <!-- 标题 -->
  23.                     <div class="title">
  24.                         <small class="tag">初级</small>
  25.                         <a>php8,我来也</a>
  26.                     </div>
  27.                 </div>
  28.                 <!-- 其他 -->
  29.                 <div class="other">
  30.                     <span>24323223次学习</span>
  31.                     <span>收藏</span>
  32.                 </div>
  33.             </div>
  35.             <div class="course">
  36.                 <!-- 图片 -->
  37.                 <a>
  38.                     <img src="img/02.png">
  39.                 </a>
  40.                 <!-- 课程描述 -->
  41.                 <div class="miaosu">
  42.                     <!-- 标题 -->
  43.                     <div class="title">
  44.                         <small class="tag">初级</small>
  45.                         <a>php8,我来也</a>
  46.                     </div>
  47.                 </div>
  48.                 <!-- 其他 -->
  49.                 <div class="other">
  50.                     <span>24323223次学习</span>
  51.                     <span>收藏</span>
  52.                 </div>
  53.             </div>
  55.             <div class="course">
  56.                 <!-- 图片 -->
  57.                 <a>
  58.                     <img src="img/03.jpeg">
  59.                 </a>
  60.                 <!-- 课程描述 -->
  61.                 <div class="miaosu">
  62.                     <!-- 标题 -->
  63.                     <div class="title">
  64.                         <small class="tag">初级</small>
  65.                         <a>php8,我来也</a>
  66.                     </div>
  67.                 </div>
  68.                 <!-- 其他 -->
  69.                 <div class="other">
  70.                     <span>24323223次学习</span>
  71.                     <span>收藏</span>
  72.                 </div>
  73.             </div>
  75.             <div class="course">
  76.                 <!-- 图片 -->
  77.                 <a>
  78.                     <img src="img/04.jpeg">
  79.                 </a>
  80.                 <!-- 课程描述 -->
  81.                 <div class="miaosu">
  82.                     <!-- 标题 -->
  83.                     <div class="title">
  84.                         <small class="tag">初级</small>
  85.                         <a>php8,我来也</a>
  86.                     </div>
  87.                 </div>
  88.                 <!-- 其他 -->
  89.                 <div class="other">
  90.                     <span>24323223次学习</span>
  91.                     <span>收藏</span>
  92.                 </div>
  93.             </div>
  95.             <div class="course">
  96.                 <!-- 图片 -->
  97.                 <a>
  98.                     <img src="img/05.jpeg">
  99.                 </a>
  100.                 <!-- 课程描述 -->
  101.                 <div class="miaosu">
  102.                     <!-- 标题 -->
  103.                     <div class="title">
  104.                         <small class="tag">初级</small>
  105.                         <a>php8,我来也</a>
  106.                     </div>
  107.                 </div>
  108.                 <!-- 其他 -->
  109.                 <div class="other">
  110.                     <span>24323223次学习</span>
  111.                     <span>收藏</span>
  112.                 </div>
  113.             </div>
  115.             <div class="course">
  116.                 <!-- 图片 -->
  117.                 <a>
  118.                     <img src="img/06.png">
  119.                 </a>
  120.                 <!-- 课程描述 -->
  121.                 <div class="miaosu">
  122.                     <!-- 标题 -->
  123.                     <div class="title">
  124.                         <small class="tag">初级</small>
  125.                         <a>php8,我来也</a>
  126.                     </div>
  127.                 </div>
  128.                 <!-- 其他 -->
  129.                 <div class="other">
  130.                     <span>24323223次学习</span>
  131.                     <span>收藏</span>
  132.                 </div>
  133.             </div>
  135.             <div class="course">
  136.                 <!-- 图片 -->
  137.                 <a>
  138.                     <img src="img/07.jpeg">
  139.                 </a>
  140.                 <!-- 课程描述 -->
  141.                 <div class="miaosu">
  142.                     <!-- 标题 -->
  143.                     <div class="title">
  144.                         <small class="tag">初级</small>
  145.                         <a>php8,我来也</a>
  146.                     </div>
  147.                 </div>
  148.                 <!-- 其他 -->
  149.                 <div class="other">
  150.                     <span>24323223次学习</span>
  151.                     <span>收藏</span>
  152.                 </div>
  153.             </div>
  155.             <div class="course">
  156.                 <!-- 图片 -->
  157.                 <a>
  158.                     <img src="img/08.png">
  159.                 </a>
  160.                 <!-- 课程描述 -->
  161.                 <div class="miaosu">
  162.                     <!-- 标题 -->
  163.                     <div class="title">
  164.                         <small class="tag">初级</small>
  165.                         <a>php8,我来也</a>
  166.                     </div>
  167.                 </div>
  168.                 <!-- 其他 -->
  169.                 <div class="other">
  170.                     <span>24323223次学习</span>
  171.                     <span>收藏</span>
  172.                 </div>
  173.             </div>
  175.             <div class="course">
  176.                 <!-- 图片 -->
  177.                 <a>
  178.                     <img src="img/09.jpeg">
  179.                 </a>
  180.                 <!-- 课程描述 -->
  181.                 <div class="miaosu">
  182.                     <!-- 标题 -->
  183.                     <div class="title">
  184.                         <small class="tag">初级</small>
  185.                         <a>php8,我来也</a>
  186.                     </div>
  187.                 </div>
  188.                 <!-- 其他 -->
  189.                 <div class="other">
  190.                     <span>24323223次学习</span>
  191.                     <span>收藏</span>
  192.                 </div>
  193.             </div>
  195.             <div class="course">
  196.                 <!-- 图片 -->
  197.                 <a>
  198.                     <img src="img/10.jpeg">
  199.                 </a>
  200.                 <!-- 课程描述 -->
  201.                 <div class="miaosu">
  202.                     <!-- 标题 -->
  203.                     <div class="title">
  204.                         <small class="tag">初级</small>
  205.                         <a>php8,我来也</a>
  206.                     </div>
  207.                 </div>
  208.                 <!-- 其他 -->
  209.                 <div class="other">
  210.                     <span>24323223次学习</span>
  211.                     <span>收藏</span>
  212.                 </div>
  213.             </div>
  214.         </div>
  215.     </div>
  216. </body>
  217. </html>
  219. body {
  220.     background-color: #efefef;
  221. }
  222. body a{
  223.     text-decoration: none;
  224.     color: #555;
  225.     font-size: small;
  226. }
  227. body a:hover{
  228.     color: red;
  229. }
  230. .latest-courses {
  231.     width: 1020px;
  232.     margin: 0;
  233. }
  234. .latest-courses .courses-first {
  235.     display: grid;
  236.     grid-template-columns: repeat(5,1fr);
  237.     gap: 30px 10px;
  238. }
  239. .latest-courses .courses-first .course img{
  240.     width: 100%;
  241.     border-radius: 5px 5px 0 0;
  242. }
  244. .latest-courses .courses-first .course img:hover{
  245.     transform: scale(1.1);
  246.     transition: 0.4s;
  247. }
  248. .latest-courses .courses-first .course{
  249.     background-color: #fff;
  250.     border-radius: 5px;
  251.     overflow: hidden;
  252. }
  253. .latest-courses .courses-first .course .miaosu{
  254.   padding: 15px;
  255.   display: grid;
  256.   gap: 10px;
  259. }
  260. .latest-courses .courses-first .course .miaosu .title .tag{
  261.     color: red;
  262.     background-color: bisque;
  263.     border-radius: 2px;
  264.     padding: 2px 4px;
  265.     font-size: x-small;
  266. }
  267. .latest-courses .courses-first .course .other{
  268.     color: #aaa;
  269.     font-size: small;
  270.     display: flex;
  271.     place-content:space-between;
  272. }

热门推荐

【文章原创作者：韩国高防服务器 http://www.558idc.com/krgf.html 网络转载请说明出处】
更多阅读