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

搜索
博主信息
博文 12
粉絲 0
評(píng)論 0
訪(fǎng)問(wèn)量 8050
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
php中文網(wǎng)首頁(yè)"熱門(mén)推薦"課程列表組件(Grid)
漢邦
原創(chuàng)
530人瀏覽過(guò)

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>熱門(mén)推薦</title>
  8.     <link rel="stylesheet" href="01.css">
  9.     <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3964449_hddmgnomyz.css">
  10. </head>
  11. <body>
  12.     <div class="latest-courses">
  13.         <div class="lates"><h2>熱門(mén)推薦</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">初級(jí)</small>
  24.                         <a href="">小白拯救者: PHP7基礎(chǔ)語(yǔ)法快速預(yù)覽</a>
  25.                     </div>
  26.                     <div class="other">
  27.                         <span>88789次學(xué)習(xí)</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">初級(jí)</small>
  39.                         <a href="">php8，我來(lái)也</a>
  40.                     </div>
  41.                     <div class="other">
  42.                         <span>254922次學(xué)習(xí)</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">中級(jí)</small>
  54.                         <a href="">在線(xiàn)報(bào)名系統(tǒng)（移動(dòng)端）實(shí)戰(zhàn)【公益直播】</a>
  55.                     </div>
  56.                     <div class="other">
  57.                         <span>69378次學(xué)習(xí)</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">中級(jí)</small>
  69.                         <a href="">vue 3.0全新實(shí)戰(zhàn)課程(2021版)第一季</a>
  70.                     </div>
  71.                     <div class="other">
  72.                         <span>54378次學(xué)習(xí)</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">中級(jí)</small>
  84.                         <a href="">Uniapp簡(jiǎn)愛(ài)讀書(shū)項(xiàng)目開(kāi)發(fā)--第一季</a>
  85.                     </div>
  86.                     <div class="other">
  87.                         <span>11378次學(xué)習(xí)</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">初級(jí)</small>
  99.                         <a href="">從PHP基礎(chǔ)到ThinkPHP6實(shí)戰(zhàn)（2022滅絕師妹力作）</a>
  100.                     </div>
  101.                     <div class="other">
  102.                         <span>11378次學(xué)習(xí)</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">初級(jí)</small>
  114.                         <a href="">公益直播：2023，聊聊PHP創(chuàng)業(yè)那點(diǎn)事</a>
  115.                     </div>
  116.                     <div class="other">
  117.                         <span>22378次學(xué)習(xí)</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">中級(jí)</small>
  129.                         <a href="">Golang深入理解GPM模型</a>
  130.                     </div>
  131.                     <div class="other">
  132.                         <span>378次學(xué)習(xí)</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">初級(jí)</small>
  144.                         <a href="">公益直播：PHP8，究竟有啥野心..?。?/span></a>
  145.                     </div>
  146.                     <div class="other">
  147.                         <span>510次學(xué)習(xí)</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">中級(jí)</small>
  159.                         <a href="">Linux運(yùn)維基礎(chǔ)課程【全程干貨詳解】</a>
  160.                     </div>
  161.                     <div class="other">
  162.                         <span>3578次學(xué)習(xí)</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. }

瀏覽器效果圖：

批改老師：PHPzPHPz

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

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

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

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