简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >完成php中文网首页"热门推荐"课程列表组件(Grid)

完成php中文网首页"热门推荐"课程列表组件(Grid)

len
len原创
2023年03月21日 15:46:36247浏览

程序实现

  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实现热门推荐

上一条：grid实战作业下一条：用Grid布局完成php中文网首页"热门推荐"课程列表
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多