亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 12
粉絲 0
評論 0
訪問量 6496
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
完成php中文網(wǎng)首頁"熱門推薦"課程列表組件(Grid)
len
原創(chuàng)
426人瀏覽過

程序?qū)崿F(xiàn)

  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="http://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設(shè)置容器高度 */
  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基礎(chǔ)語法快速預(yù)覽</a>
  126.             </div>
  127.             <div class="details">
  128.               <span class="num">88793次學(xué)習(xí)</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次學(xué)習(xí)</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">在線報名系統(tǒng)（移動端）實戰(zhàn)【公益直播】</a>
  164.             </div>
  165.             <div class="details">
  166.               <span class="num">69013次學(xué)習(xí)</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全新實戰(zhàn)課程(2021版)第一季</a>
  183.             </div>
  184.             <div class="details">
  185.               <span class="num">171270次學(xué)習(xí)</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簡愛讀書項目開發(fā)--第一季</a>
  202.             </div>
  203.             <div class="details">
  204.               <span class="num">112833次學(xué)習(xí)</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基礎(chǔ)到ThinkPHP6實戰(zhàn)（2022滅絕師妹力作）</a
  224.               >
  225.             </div>
  226.             <div class="details">
  227.               <span class="num">97830次學(xué)習(xí)</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創(chuàng)業(yè)那點事</a>
  242.             </div>
  243.             <div class="details">
  244.               <span class="num">2217次學(xué)習(xí)</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次學(xué)習(xí)</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次學(xué)習(xí)</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運維基礎(chǔ)課程【全程干貨詳解】</a>
  299.             </div>
  300.             <div class="details">
  301.               <span class="num">3575次學(xué)習(xí)</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>

實現(xiàn)效果

grid實現(xiàn)熱門推薦

批改老師：PHPzPHPz

批改狀態(tài)：合格

老師批語：完成的很好，沒什么問題，繼續(xù)加油
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)