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

搜索
博主信息
博文 11
粉絲 0
評(píng)論 0
訪問(wèn)量 5641
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
仿PHP中文網(wǎng)的“熱門推薦”
至親難忘
原創(chuàng)
442人瀏覽過(guò)
  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="course.css">
  9. </head>
  10. <body>
  11.     <div class="latest-courses"> 
  12.         <h2>熱門推薦</h2>
  13.         <div class="courses-first">
  14.             <!-- 課程 -->
  15.             <div class="course">
  16.                 <!-- 圖片 -->
  17.                 <a>
  18.                     <img src="img/01.jpeg">
  19.                 </a>
  20.                 <!-- 課程描述 -->
  21.                 <div class="miaosu">
  22.                     <!-- 標(biāo)題 -->
  23.                     <div class="title">
  24.                         <small class="tag">初級(jí)</small>
  25.                         <a>php8,我來(lái)也</a>
  26.                     </div>
  27.                 </div>
  28.                 <!-- 其他 -->
  29.                 <div class="other">
  30.                     <span>24323223次學(xué)習(xí)</span>
  31.                     <span>收藏</span>
  32.                 </div>
  33.             </div>
  35.             <div class="course">
  36.                 <!-- 圖片 -->
  37.                 <a>
  38.                     <img src="img/02.png">
  39.                 </a>
  40.                 <!-- 課程描述 -->
  41.                 <div class="miaosu">
  42.                     <!-- 標(biāo)題 -->
  43.                     <div class="title">
  44.                         <small class="tag">初級(jí)</small>
  45.                         <a>php8,我來(lái)也</a>
  46.                     </div>
  47.                 </div>
  48.                 <!-- 其他 -->
  49.                 <div class="other">
  50.                     <span>24323223次學(xué)習(xí)</span>
  51.                     <span>收藏</span>
  52.                 </div>
  53.             </div>
  55.             <div class="course">
  56.                 <!-- 圖片 -->
  57.                 <a>
  58.                     <img src="img/03.jpeg">
  59.                 </a>
  60.                 <!-- 課程描述 -->
  61.                 <div class="miaosu">
  62.                     <!-- 標(biāo)題 -->
  63.                     <div class="title">
  64.                         <small class="tag">初級(jí)</small>
  65.                         <a>php8,我來(lái)也</a>
  66.                     </div>
  67.                 </div>
  68.                 <!-- 其他 -->
  69.                 <div class="other">
  70.                     <span>24323223次學(xué)習(xí)</span>
  71.                     <span>收藏</span>
  72.                 </div>
  73.             </div>
  75.             <div class="course">
  76.                 <!-- 圖片 -->
  77.                 <a>
  78.                     <img src="img/04.jpeg">
  79.                 </a>
  80.                 <!-- 課程描述 -->
  81.                 <div class="miaosu">
  82.                     <!-- 標(biāo)題 -->
  83.                     <div class="title">
  84.                         <small class="tag">初級(jí)</small>
  85.                         <a>php8,我來(lái)也</a>
  86.                     </div>
  87.                 </div>
  88.                 <!-- 其他 -->
  89.                 <div class="other">
  90.                     <span>24323223次學(xué)習(xí)</span>
  91.                     <span>收藏</span>
  92.                 </div>
  93.             </div>
  95.             <div class="course">
  96.                 <!-- 圖片 -->
  97.                 <a>
  98.                     <img src="img/05.jpeg">
  99.                 </a>
  100.                 <!-- 課程描述 -->
  101.                 <div class="miaosu">
  102.                     <!-- 標(biāo)題 -->
  103.                     <div class="title">
  104.                         <small class="tag">初級(jí)</small>
  105.                         <a>php8,我來(lái)也</a>
  106.                     </div>
  107.                 </div>
  108.                 <!-- 其他 -->
  109.                 <div class="other">
  110.                     <span>24323223次學(xué)習(xí)</span>
  111.                     <span>收藏</span>
  112.                 </div>
  113.             </div>
  115.             <div class="course">
  116.                 <!-- 圖片 -->
  117.                 <a>
  118.                     <img src="img/06.png">
  119.                 </a>
  120.                 <!-- 課程描述 -->
  121.                 <div class="miaosu">
  122.                     <!-- 標(biāo)題 -->
  123.                     <div class="title">
  124.                         <small class="tag">初級(jí)</small>
  125.                         <a>php8,我來(lái)也</a>
  126.                     </div>
  127.                 </div>
  128.                 <!-- 其他 -->
  129.                 <div class="other">
  130.                     <span>24323223次學(xué)習(xí)</span>
  131.                     <span>收藏</span>
  132.                 </div>
  133.             </div>
  135.             <div class="course">
  136.                 <!-- 圖片 -->
  137.                 <a>
  138.                     <img src="img/07.jpeg">
  139.                 </a>
  140.                 <!-- 課程描述 -->
  141.                 <div class="miaosu">
  142.                     <!-- 標(biāo)題 -->
  143.                     <div class="title">
  144.                         <small class="tag">初級(jí)</small>
  145.                         <a>php8,我來(lái)也</a>
  146.                     </div>
  147.                 </div>
  148.                 <!-- 其他 -->
  149.                 <div class="other">
  150.                     <span>24323223次學(xué)習(xí)</span>
  151.                     <span>收藏</span>
  152.                 </div>
  153.             </div>
  155.             <div class="course">
  156.                 <!-- 圖片 -->
  157.                 <a>
  158.                     <img src="img/08.png">
  159.                 </a>
  160.                 <!-- 課程描述 -->
  161.                 <div class="miaosu">
  162.                     <!-- 標(biāo)題 -->
  163.                     <div class="title">
  164.                         <small class="tag">初級(jí)</small>
  165.                         <a>php8,我來(lái)也</a>
  166.                     </div>
  167.                 </div>
  168.                 <!-- 其他 -->
  169.                 <div class="other">
  170.                     <span>24323223次學(xué)習(xí)</span>
  171.                     <span>收藏</span>
  172.                 </div>
  173.             </div>
  175.             <div class="course">
  176.                 <!-- 圖片 -->
  177.                 <a>
  178.                     <img src="img/09.jpeg">
  179.                 </a>
  180.                 <!-- 課程描述 -->
  181.                 <div class="miaosu">
  182.                     <!-- 標(biāo)題 -->
  183.                     <div class="title">
  184.                         <small class="tag">初級(jí)</small>
  185.                         <a>php8,我來(lái)也</a>
  186.                     </div>
  187.                 </div>
  188.                 <!-- 其他 -->
  189.                 <div class="other">
  190.                     <span>24323223次學(xué)習(xí)</span>
  191.                     <span>收藏</span>
  192.                 </div>
  193.             </div>
  195.             <div class="course">
  196.                 <!-- 圖片 -->
  197.                 <a>
  198.                     <img src="img/10.jpeg">
  199.                 </a>
  200.                 <!-- 課程描述 -->
  201.                 <div class="miaosu">
  202.                     <!-- 標(biāo)題 -->
  203.                     <div class="title">
  204.                         <small class="tag">初級(jí)</small>
  205.                         <a>php8,我來(lái)也</a>
  206.                     </div>
  207.                 </div>
  208.                 <!-- 其他 -->
  209.                 <div class="other">
  210.                     <span>24323223次學(xué)習(xí)</span>
  211.                     <span>收藏</span>
  212.                 </div>
  213.             </div>
  214.         </div>
  215.     </div>
  216. </body>
  217. </html>
  219. body {
  220.     background-color: #efefef;
  221. }
  222. body a{
  223.     text-decoration: none;
  224.     color: #555;
  225.     font-size: small;
  226. }
  227. body a:hover{
  228.     color: red;
  229. }
  230. .latest-courses {
  231.     width: 1020px;
  232.     margin: 0;
  233. }
  234. .latest-courses .courses-first {
  235.     display: grid;
  236.     grid-template-columns: repeat(5,1fr);
  237.     gap: 30px 10px;
  238. }
  239. .latest-courses .courses-first .course img{
  240.     width: 100%;
  241.     border-radius: 5px 5px 0 0;
  242. }
  244. .latest-courses .courses-first .course img:hover{
  245.     transform: scale(1.1);
  246.     transition: 0.4s;
  247. }
  248. .latest-courses .courses-first .course{
  249.     background-color: #fff;
  250.     border-radius: 5px;
  251.     overflow: hidden;
  252. }
  253. .latest-courses .courses-first .course .miaosu{
  254.   padding: 15px;
  255.   display: grid;
  256.   gap: 10px;
  259. }
  260. .latest-courses .courses-first .course .miaosu .title .tag{
  261.     color: red;
  262.     background-color: bisque;
  263.     border-radius: 2px;
  264.     padding: 2px 4px;
  265.     font-size: x-small;
  266. }
  267. .latest-courses .courses-first .course .other{
  268.     color: #aaa;
  269.     font-size: small;
  270.     display: flex;
  271.     place-content:space-between;
  272. }

熱門推薦

批改老師：PHPzPHPz

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

老師批語(yǔ)：
本博文版權(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)：公益在線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é)