Community Learn Tools Library Leisure
search
English
Home > List of blog posts > php中文网首页"热门推荐"课程列表组件(Grid)
Blogger Information
Blog 12
fans 0
comment 0
visits 5380
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
php中文网首页"热门推荐"课程列表组件(Grid)
汉邦
Original
351 people have browsed it

html代码如下：

  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="01.css">
  9.     <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3964449_hddmgnomyz.css">
  10. </head>
  11. <body>
  12.     <div class="latest-courses">
  13.         <div class="lates"><h2>热门推荐</h2>
  14.         <a href="">更多</a>
  15.         </div>
  16.         <div class="courses-list">
  17.             <div class="course">
  18.                 <a href="">
  19.                     <img src="11.jpg" alt="" />
  20.                 </a> 
  21.                 <div class="desc">
  22.                     <div class="title">
  23.                         <small class="tag1">初级</small>
  24.                         <a href="">小白拯救者: PHP7基础语法快速预览</a>
  25.                     </div>
  26.                     <div class="other">
  27.                         <span>88789次学习</span>
  28.                         <span class="iconfont icon-shoucang">收藏</span>
  29.                     </div>
  30.                 </div>
  31.             </div> 
  32.             <div class="course">
  33.                 <a href="">
  34.                     <img src="12.png" alt="" />
  35.                 </a> 
  36.                 <div class="desc">
  37.                     <div class="title">
  38.                         <small class="tag1">初级</small>
  39.                         <a href="">php8，我来也</a>
  40.                     </div>
  41.                     <div class="other">
  42.                         <span>254922次学习</span>
  43.                         <span class="iconfont icon-shoucang">收藏</span>
  44.                     </div>
  45.                 </div>
  46.             </div>
  47.             <div class="course">
  48.                 <a href="">
  49.                     <img src="13.jpg" alt="" />
  50.                 </a> 
  51.                 <div class="desc">
  52.                     <div class="title">
  53.                         <small class="tag">中级</small>
  54.                         <a href="">在线报名系统（移动端）实战【公益直播】</a>
  55.                     </div>
  56.                     <div class="other">
  57.                         <span>69378次学习</span>
  58.                         <span class="iconfont icon-shoucang">收藏</span>
  59.                     </div>
  60.                 </div>
  61.             </div>
  62.             <div class="course">
  63.                 <a href="">
  64.                     <img src="14.jpg" alt="" />
  65.                 </a> 
  66.                 <div class="desc">
  67.                     <div class="title">
  68.                         <small class="tag">中级</small>
  69.                         <a href="">vue 3.0全新实战课程(2021版)第一季</a>
  70.                     </div>
  71.                     <div class="other">
  72.                         <span>54378次学习</span>
  73.                         <span class="iconfont icon-shoucang">收藏</span>
  74.                     </div>
  75.                 </div>
  76.             </div>
  77.             <div class="course">
  78.                 <a href="">
  79.                     <img src="15.jpg" alt="" />
  80.                 </a> 
  81.                 <div class="desc">
  82.                     <div class="title">
  83.                         <small class="tag">中级</small>
  84.                         <a href="">Uniapp简爱读书项目开发--第一季</a>
  85.                     </div>
  86.                     <div class="other">
  87.                         <span>11378次学习</span>
  88.                         <span class="iconfont icon-shoucang">收藏</span>
  89.                     </div>
  90.                 </div>
  91.             </div>
  92.             <div class="course">
  93.                 <a href="">
  94.                     <img src="16.png" alt="" />
  95.                 </a> 
  96.                 <div class="desc">
  97.                     <div class="title">
  98.                         <small class="tag1">初级</small>
  99.                         <a href="">从PHP基础到ThinkPHP6实战（2022灭绝师妹力作）</a>
  100.                     </div>
  101.                     <div class="other">
  102.                         <span>11378次学习</span>
  103.                         <span class="iconfont icon-shoucang">收藏</span>
  104.                     </div>
  105.                 </div>
  106.             </div>
  107.             <div class="course">
  108.                 <a href="">
  109.                     <img src="17.jpg" alt="" />
  110.                 </a> 
  111.                 <div class="desc">
  112.                     <div class="title">
  113.                         <small class="tag1">初级</small>
  114.                         <a href="">公益直播：2023，聊聊PHP创业那点事</a>
  115.                     </div>
  116.                     <div class="other">
  117.                         <span>22378次学习</span>
  118.                         <span class="iconfont icon-shoucang">收藏</span>
  119.                     </div>
  120.                 </div>
  121.             </div>
  122.             <div class="course">
  123.                 <a href="">
  124.                     <img src="18.jpg" alt="" />
  125.                 </a> 
  126.                 <div class="desc">
  127.                     <div class="title">
  128.                         <small class="tag">中级</small>
  129.                         <a href="">Golang深入理解GPM模型</a>
  130.                     </div>
  131.                     <div class="other">
  132.                         <span>378次学习</span>
  133.                         <span class="iconfont icon-shoucang">收藏</span>
  134.                     </div>
  135.                 </div>
  136.             </div>
  137.             <div class="course">
  138.                 <a href="">
  139.                     <img src="19.jpg" alt="" />
  140.                 </a> 
  141.                 <div class="desc">
  142.                     <div class="title">
  143.                         <small class="tag1">初级</small>
  144.                         <a href="">公益直播：PHP8，究竟有啥野心..！？</a>
  145.                     </div>
  146.                     <div class="other">
  147.                         <span>510次学习</span>
  148.                         <span class="iconfont icon-shoucang">收藏</span>
  149.                     </div>
  150.                 </div>
  151.             </div>
  152.             <div class="course">
  153.                 <a href="">
  154.                     <img src="20.jpg" alt="" />
  155.                 </a> 
  156.                 <div class="desc">
  157.                     <div class="title">
  158.                         <small class="tag">中级</small>
  159.                         <a href="">Linux运维基础课程【全程干货详解】</a>
  160.                     </div>
  161.                     <div class="other">
  162.                         <span>3578次学习</span>
  163.                         <span class="iconfont icon-shoucang">收藏</span>
  164.                     </div>
  165.                 </div>
  166.             </div>
  167.         </div>
  168.     </div>
  169. </body>
  170. </html>

CSS代码如下：

  1. body {
  2.     background-color: #efefef;
  3. }
  4. body a {
  5.     text-decoration: none;
  6.     color: rgb(20, 20, 20);
  7.     font-size: 14px;
  8. }
  9. body a:hover {
  10.     color: red;
  11. }
  12. .latest-courses {
  13.     width: 1020px;
  14.     margin: 0 auto;
  15. }
  16. .latest-courses .lates {
  17.     display: flex;
  18.     place-content: space-between;
  19. }
  20. .latest-courses .courses-list {
  21.     display: grid;
  22.     grid-template-columns: repeat(5,1fr);
  23.     gap: 20px 10px;
  24. }
  25. .latest-courses .courses-list img {
  26.     width: 100%;
  27.     border-radius: 5px 5px 0 0;
  28. }
  29. .latest-courses .courses-list img:hover {
  30.     transform: scale(1.1);
  31.     transition: 0.3s;
  32. }
  33. .latest-courses .courses-list .course {
  34.     background-color: #fff;
  35.     border-radius: 5px;
  36.     overflow: hidden;
  37. }
  38. .latest-courses .courses-list .course .desc {
  39.     padding: 15px;
  40.     display: grid;
  41.     gap: 10px;
  42. }
  43. .latest-courses .courses-list .course .desc .tag {
  44.     color: red;
  45.     background-color: bisque;
  46.     border-radius: 2px;
  47.     padding: 2px 4px;
  48.     font-size: x-small;
  49. }
  50. .latest-courses .courses-list .course .desc .tag1 {
  51.     color: blue;
  52.     background-color: rgb(217, 228, 243);
  53.     border-radius:2px ;
  54.     padding: 2px 4px;
  55.     font-size: x-small;
  56. }
  57. .latest-courses .courses-list .course .desc .other {
  58.     color: #aaa;
  59.     font-size: small;
  60.     display: flex;
  61.     place-content: space-between;
  62. }

浏览器效果图：

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：总体没什么大问题，完成的不错
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post