Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 完成php中文网首页"热门推荐"课程列表组件(Grid)
Blogger Information
Blog 12
fans 0
comment 0
visits 3503
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)
len
Original
249 people have browsed it

程序实现

  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.     <link rel="stylesheet" href="grid.css" />
  8.     <link
  9.       rel="stylesheet"
  10.       href="//at.alicdn.com/t/c/font_3966538_ci591vv17xi.css"
  11.     />
  12.     <title>热门推荐</title>
  13.   </head>
  14.   <style>
  15.     * {
  16.       margin: 0;
  17.       padding: 0;
  18.       box-sizing: border-box;
  19.     }
  20.     body {
  21.       background-color: rgb(240, 242, 245);
  22.     }
  23.     .main {
  24.       /* margin-top: 100px; */
  25.       width: 1200px;
  26.       /* outline: 1px solid; */
  27.       padding: 5px;
  28.       margin: 0 auto;
  29.     }
  30.     .header {
  31.       margin-top: 10px;
  32.       display: flex;
  33.       place-content: space-between;
  34.     }
  35.     .header .more {
  36.       background-color: rgb(236, 237, 242);
  37.       border-radius: 10px;
  38.       padding: 5px 15px;
  39.       font-size: smaller;
  40.       text-decoration: none;
  41.       color: rgb(153, 153, 153);
  42.     }
  43.     .header .more:hover {
  44.       background-color: red;
  45.       color: white;
  46.     }
  48.     img {
  49.       width: 100%;
  50.       border-radius: 5px 5px 0px 0px;
  51.     }
  52.     .courselist {
  53.       background-color: white;
  54.       overflow: hidden;
  55.       border-radius: 5px;
  56.     }
  57.     .main .row {
  58.       margin-top: 10px;
  59.       gap: 20px;
  60.     }
  61.     .main .row img:hover {
  62.       transform: scale(1.1);
  63.       transition: 0.3s;
  64.     }
  65.     .main .row .desc {
  66.       padding: 10px 10px;
  67.     }
  68.     .main .row .desc .course {
  69.       /* max-height限制最大高度，height设置容器高度 */
  70.       max-height: 50px;
  71.       overflow: hidden;
  72.       height: 60px;
  73.     }
  74.     .main .row .desc .course .level {
  75.       background-color: bisque;
  76.       color: red;
  77.       font-size: small;
  78.       padding: 3px 5px;
  79.       border-radius: 2px;
  80.     }
  81.     .main .row .desc .course .level.fresh {
  82.       background-color: #e0e8fc;
  83.       color: #298afd;
  84.     }
  85.     .main .row .desc .course .name {
  86.       text-decoration: none;
  87.       font-size: 16px;
  88.       color: black;
  89.       margin-left: 5px;
  90.     }
  91.     .main .row .desc .course .name:hover {
  92.       color: red;
  93.     }
  94.     .main .row .desc .details {
  95.       display: flex;
  96.       place-content: space-between;
  97.       margin-top: 15px;
  98.       color: lightgray;
  99.       font-size: small;
  100.     }
  101.     .main .row .desc .details .favorites {
  102.       text-decoration: none;
  103.       color: lightgray;
  104.     }
  105.     .main .row .desc .details .favorites .iconfont {
  106.       font-size: small;
  107.     }
  108.   </style>
  109.   <body>
  110.     <div class="main">
  111.       <div class="header">
  112.         <h2 class="title">热门推荐</h2>
  113.         <a href="" class="more">更多 ></a>
  114.       </div>
  115.       <div class="row">
  116.         <div class="courselist col-2">
  117.           <a href=""
  118.             ><img
  119.               src="https://img.php.cn/upload/course/000/000/068/6250203a9746a798.jpg"
  120.               alt=""
  121.           /></a>
  122.           <div class="desc">
  123.             <div class="course">
  124.               <span class="level fresh">初级</span>
  125.               <a href="" class="name">小白拯救者: PHP7基础语法快速预览</a>
  126.             </div>
  127.             <div class="details">
  128.               <span class="num">88793次学习</span>
  129.               <a href="" class="favorites"
  130.                 ><span class="iconfont icon-favorites">收藏</span></a
  131.               >
  132.             </div>
  133.           </div>
  134.         </div>
  135.         <div class="courselist col-2">
  136.           <a href=""
  137.             ><img
  138.               src="https://img.php.cn/upload/course/000/000/068/62b2ea11e0283309.png"
  139.               alt=""
  140.           /></a>
  141.           <div class="desc">
  142.             <div class="course">
  143.               <span class="level fresh">初级</span>
  144.               <a href="" class="name">php8，我来也</a>
  145.             </div>
  146.             <div class="details">
  147.               <span class="num">254947次学习</span>
  148.               <a href="" class="favorites"
  149.                 ><span class="iconfont icon-favorites">收藏</span></a
  150.               >
  151.             </div>
  152.           </div>
  153.         </div>
  154.         <div class="courselist col-2">
  155.           <a href=""
  156.             ><img
  157.               src="https://img.php.cn/upload/course/000/000/068/62501e37b43c6107.jpg"
  158.               alt=""
  159.           /></a>
  160.           <div class="desc">
  161.             <div class="course">
  162.               <span class="level">中级</span>
  163.               <a href="" class="name">在线报名系统（移动端）实战【公益直播】</a>
  164.             </div>
  165.             <div class="details">
  166.               <span class="num">69013次学习</span>
  167.               <a href="" class="favorites"
  168.                 ><span class="iconfont icon-favorites">收藏</span></a
  169.               >
  170.             </div>
  171.           </div>
  172.         </div>
  173.         <div class="courselist col-2">
  174.           <a href=""
  175.             ><img
  176.               src="https://img.php.cn/upload/course/000/000/068/6264eab6691cf422.jpg"
  177.               alt=""
  178.           /></a>
  179.           <div class="desc">
  180.             <div class="course">
  181.               <span class="level fresh">中级</span>
  182.               <a href="" class="name">vue 3.0全新实战课程(2021版)第一季</a>
  183.             </div>
  184.             <div class="details">
  185.               <span class="num">171270次学习</span>
  186.               <a href="" class="favorites"
  187.                 ><span class="iconfont icon-favorites">收藏</span></a
  188.               >
  189.             </div>
  190.           </div>
  191.         </div>
  192.         <div class="courselist col-2">
  193.           <a href=""
  194.             ><img
  195.               src="https://img.php.cn/upload/course/000/000/048/6101014ce7756479.jpg"
  196.               alt=""
  197.           /></a>
  198.           <div class="desc">
  199.             <div class="course">
  200.               <span class="level fresh">初级</span>
  201.               <a href="" class="name">Uniapp简爱读书项目开发--第一季</a>
  202.             </div>
  203.             <div class="details">
  204.               <span class="num">112833次学习</span>
  205.               <a href="" class="favorites"
  206.                 ><span class="iconfont icon-favorites">收藏</span></a
  207.               >
  208.             </div>
  209.           </div>
  210.         </div>
  211.       </div>
  212.       <div class="row" style="margin-top: 30px">
  213.         <div class="courselist col-2">
  214.           <a href=""
  215.             ><img
  216.               src="https://img.php.cn/upload/course/000/000/068/62fa13f903c00637.png"
  217.               alt=""
  218.           /></a>
  219.           <div class="desc">
  220.             <div class="course">
  221.               <span class="level fresh">初级</span>
  222.               <a href="" class="name"
  223.                 >从PHP基础到ThinkPHP6实战（2022灭绝师妹力作）</a
  224.               >
  225.             </div>
  226.             <div class="details">
  227.               <span class="num">97830次学习</span>
  228.               <a href="" class="favorites">收藏</a>
  229.             </div>
  230.           </div>
  231.         </div>
  232.         <div class="courselist col-2">
  233.           <a href=""
  234.             ><img
  235.               src="https://img.php.cn/upload/course/000/000/068/63b580b8ca752485.jpg"
  236.               alt=""
  237.           /></a>
  238.           <div class="desc">
  239.             <div class="course">
  240.               <span class="level fresh">初级</span>
  241.               <a href="" class="name">公益直播：2023，聊聊PHP创业那点事</a>
  242.             </div>
  243.             <div class="details">
  244.               <span class="num">2217次学习</span>
  245.               <a href="" class="favorites"
  246.                 ><span class="iconfont icon-favorites">收藏</span></a
  247.               >
  248.             </div>
  249.           </div>
  250.         </div>
  251.         <div class="courselist col-2">
  252.           <a href=""
  253.             ><img
  254.               src="https://img.php.cn/upload/course/000/000/068/6413e7ac3ce52126.jpg"
  255.               alt=""
  256.           /></a>
  257.           <div class="desc">
  258.             <div class="course">
  259.               <span class="level">中级</span>
  260.               <a href="" class="name">Golang深入理解GPM模型</a>
  261.             </div>
  262.             <div class="details">
  263.               <span class="num">386次学习</span>
  264.               <a href="" class="favorites"
  265.                 ><span class="iconfont icon-favorites">收藏</span></a
  266.               >
  267.             </div>
  268.           </div>
  269.         </div>
  270.         <div class="courselist col-2">
  271.           <a href=""
  272.             ><img
  273.               src="https://img.php.cn/upload/course/000/000/068/6405f30155257902.jpg"
  274.               alt=""
  275.           /></a>
  276.           <div class="desc">
  277.             <div class="course">
  278.               <span class="level fresh">初级</span>
  279.               <a href="" class="name">公益直播：PHP8，究竟有啥野心..！？</a>
  280.             </div>
  281.             <div class="details">
  282.               <span class="num">511次学习</span>
  283.               <a href="" class="favorites"
  284.                 ><span class="iconfont icon-favorites">收藏</span></a
  285.               >
  286.             </div>
  287.           </div>
  288.         </div>
  289.         <div class="courselist col-2">
  290.           <a href=""
  291.             ><img
  292.               src="https://img.php.cn/upload/course/000/000/068/63ff173c79edd672.jpg"
  293.               alt=""
  294.           /></a>
  295.           <div class="desc">
  296.             <div class="course">
  297.               <span class="level">中级</span>
  298.               <a href="" class="name">Linux运维基础课程【全程干货详解】</a>
  299.             </div>
  300.             <div class="details">
  301.               <span class="num">3575次学习</span>
  302.               <a href="" class="favorites"
  303.                 ><span class="iconfont icon-favorites">收藏</span></a
  304.               >
  305.             </div>
  306.           </div>
  307.         </div>
  308.       </div>
  309.     </div>
  310.   </body>
  311. </html>

实现效果

grid实现热门推荐

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