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

搜索
博主信息
博文 9
粉絲 0
評論 0
訪問量 5988
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
仿php中文網(wǎng)熱門推薦列表
靠近你深擁你
原創(chuàng)
502人瀏覽過

  • 效果圖

  • 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>Document</title>
    8.   <link
    9.     rel="stylesheet"
    10.     href="http://at.alicdn.com/t/c/font_3972950_hp3q6sxc5fb.css"
    11.   />
    12.   <link rel="stylesheet" href="demo.css" />
    13. </head>
    14. <body>
    15.   <div class="course">
    16.     <span class="title">熱門推薦</span>
    17.     <div class="course-list">
    18.       <div class="course-list-item">
    19.         <img
    20.           src="https://img.php.cn/upload/course/000/000/068/6250203a9746a798.jpg"
    21.           alt=""
    22.         />
    23.         <dl>
    24.           <dt>
    25.             <i class="chuji">初級</i>
    26.             <a href="#" ,title="小白拯救者:  PHP7基礎(chǔ)語法快速預(yù)覽"
    27.               >小白拯救者: PHP7基礎(chǔ)語法快速預(yù)覽</a
    28.             >
    29.           </dt>
    30.           <dd>
    31.             <p>88876次學(xué)習(xí)</p>
    32.             <span><i class="iconfont icon-shoucang"></i>收藏</span>
    33.           </dd>
    34.         </dl>
    35.       </div>
    36.       <div class="course-list-item">
    37.         <img
    38.           src="https://img.php.cn/upload/course/000/000/068/62b2ea11e0283309.png"
    39.           alt=""
    40.         />
    41.         <dl>
    42.           <dt>
    43.             <i class="chuji">初級</i>
    44.             <a href="" title="php8，我來也">php8，我來也</a>
    45.           </dt>
    46.           <dd>
    47.             <p>88876次學(xué)習(xí)</p>
    48.             <span><i class="iconfont icon-shoucang"></i>收藏</span>
    49.           </dd>
    50.         </dl>
    51.       </div>
    52.       <div class="course-list-item">
    53.         <img
    54.           src="https://img.php.cn/upload/course/000/000/068/62501e37b43c6107.jpg"
    55.           alt=""
    56.         />
    57.         <dl>
    58.           <dt>
    59.             <i class="zhongji">中級</i>
    60.             <a href="" title="在線報名系統(tǒng)（移動端）實戰(zhàn)【公益直播】"
    61.               >在線報名系統(tǒng)（移動端）實戰(zhàn)【公益直播】</a
    62.             >
    63.           </dt>
    64.           <dd>
    65.             <p>88876次學(xué)習(xí)</p>
    66.             <span><i class="iconfont icon-shoucang"></i>收藏</span>
    67.           </dd>
    68.         </dl>
    69.       </div>
    70.       <div class="course-list-item">
    71.         <img
    72.           src="https://img.php.cn/upload/course/000/000/068/6264eab6691cf422.jpg"
    73.           alt=""
    74.         />
    75.         <dl>
    76.           <dt>
    77.             <i class="zhongji">中級</i>
    78.             <a href="" title="vue 3.0全新實戰(zhàn)課程(2021版)第一季"
    79.               >vue 3.0全新實戰(zhàn)課程(2021版)第一季</a
    80.             >
    81.           </dt>
    82.           <dd>
    83.             <p>88876次學(xué)習(xí)</p>
    84.             <span><i class="iconfont icon-shoucang"></i>收藏</span>
    85.           </dd>
    86.         </dl>
    87.       </div>
    88.       <div class="course-list-item">
    89.         <img
    90.           src="https://img.php.cn/upload/course/000/000/048/6101014ce7756479.jpg"
    91.           alt=""
    92.         />
    93.         <dl>
    94.           <dt>
    95.             <i class="zhongji">中級</i>
    96.             <a href="" title="Uniapp簡愛讀書項目開發(fā)--第一季"
    97.               >Uniapp簡愛讀書項目開發(fā)--第一季</a
    98.             >
    99.           </dt>
    100.           <dd>
    101.             <p>88876次學(xué)習(xí)</p>
    102.             <span><i class="iconfont icon-shoucang"></i>收藏</span>
    103.           </dd>
    104.         </dl>
    105.       </div>
    106.       <div class="course-list-item">
    107.         <img
    108.           src="https://img.php.cn/upload/course/000/000/068/62fa13f903c00637.png"
    109.           alt=""
    110.         />
    111.         <dl>
    112.           <dt>
    113.             <i class="chuji">初級</i>
    114.             <a href="" title="從PHP基礎(chǔ)到ThinkPHP6實戰(zhàn)（2022滅絕師妹力作）"
    115.               >從PHP基礎(chǔ)到ThinkPHP6實戰(zhàn)（2022滅絕師妹力作）</a
    116.             >
    117.           </dt>
    118.           <dd>
    119.             <p>88876次學(xué)習(xí)</p>
    120.             <span><i class="iconfont icon-shoucang"></i>收藏</span>
    121.           </dd>
    122.         </dl>
    123.       </div>
    124.       <div class="course-list-item">
    125.         <img
    126.           src="https://img.php.cn/upload/course/000/000/068/63b580b8ca752485.jpg"
    127.           alt=""
    128.         />
    129.         <dl>
    130.           <dt>
    131.             <i class="chuji">初級</i>
    132.             <a href="" title="公益直播：2023，聊聊PHP創(chuàng)業(yè)那點事"
    133.               >公益直播：2023，聊聊PHP創(chuàng)業(yè)那點事</a
    134.             >
    135.           </dt>
    136.           <dd>
    137.             <p>88876次學(xué)習(xí)</p>
    138.             <span><i class="iconfont icon-shoucang"></i>收藏</span>
    139.           </dd>
    140.         </dl>
    141.       </div>
    142.       <div class="course-list-item">
    143.         <img
    144.           src="https://img.php.cn/upload/course/000/000/068/641962a8cd46e548.png"
    145.           alt=""
    146.         />
    147.         <dl>
    148.           <dt>
    149.             <i class="chuji">初級</i>
    150.             <a href="" title="Go語言課程Gin框架實戰(zhàn)">Go語言課程Gin框架實戰(zhàn)</a>
    151.           </dt>
    152.           <dd>
    153.             <p>88876次學(xué)習(xí)</p>
    154.             <span><i class="iconfont icon-shoucang"></i>收藏</span>
    155.           </dd>
    156.         </dl>
    157.       </div>
    158.       <div class="course-list-item">
    159.         <img
    160.           src="https://img.php.cn/upload/course/000/000/068/6413e7ac3ce52126.jpg"
    161.           alt=""
    162.         />
    163.         <dl>
    164.           <dt>
    165.             <i class="zhongji">中級</i>
    166.             <a href="" title="Golang深入理解GPM模型">Golang深入理解GPM模型</a>
    167.           </dt>
    168.           <dd>
    169.             <p>88876次學(xué)習(xí)</p>
    170.             <span><i class="iconfont icon-shoucang"></i>收藏</span>
    171.           </dd>
    172.         </dl>
    173.       </div>
    174.       <div class="course-list-item">
    175.         <img
    176.           src="https://img.php.cn/upload/course/000/000/068/6405f30155257902.jpg"
    177.           alt=""
    178.         />
    179.         <dl>
    180.           <dt>
    181.             <i class="chuji">初級</i>
    182.             <a href="" title="公益直播：PHP8，究竟有啥野心..?。?
    183.               >公益直播：PHP8，究竟有啥野心..！？</a
    184.             >
    185.           </dt>
    186.           <dd>
    187.             <p>88876次學(xué)習(xí)</p>
    188.             <span><i class="iconfont icon-shoucang"></i>收藏</span>
    189.           </dd>
    190.         </dl>
    191.       </div>
    192.     </div>
    193.   </div>
    194. </body>
    195. </html>

  • CSS實現(xiàn)

    1. a {
    2. text-decoration: none;
    3. }
    4. body {
    5. background-color: #f3f5f7;
    6. }
    7. .course {
    8. max-width: 1200px;
    9. margin: 0 auto;
    10. padding: 0 15px;
    11. }
    12. .course > .title {
    13. display: block;
    14. font-weight: bolder;
    15. font-size: 22px;
    16. margin-top: 20px;
    17. }
    18. .course > .course-list {
    19. display: grid;
    20. grid-template-columns: repeat(5, 1fr);
    21. margin-top: 20px;
    22. gap: 20px;
    23. }
    24. .course-list-item {
    25. width: 224px;
    26. height: 235px;
    27. background-color: white;
    28. border-radius: 6px;
    29. }
    30. .course-list-item > img {
    31. width: 224px;
    32. height: 130px;
    33. border-radius: 6px 6px 0 0;
    34. }
    35. .course-list-item > dl {
    36. padding: 0 18px;
    37. position: relative;
    38. }
    39. .course-list-item > dl > dt {
    40. margin-top: 18px;
    41. overflow: hidden;
    42. height: 45px;
    43. text-overflow: ellipsis;
    44. display: -webkit-box;
    45. -webkit-line-clamp: 2;
    46. -webkit-box-orient: vertical;
    47. display: -moz-box;
    48. -moz-line-clamp: 2;
    49. -moz-box-orient: vertical;
    50. word-wrap: break-word;
    51. word-break: break-all;
    52. white-space: normal;
    53. }
    54. .course-list-item > dl > dd {
    55. margin-top: 15px;
    56. display: grid;
    57. grid-template-columns: repeat(2, 1fr);
    58. place-content: center space-between;
    59. font-size: 12px;
    60. color: #b7b7b7;
    61. }
    62. .course-list-item > dl > dt > .chuji,
    63. .course-list-item > dl > dt > .zhongji {
    64. display: inline-block;
    65. font-size: 12px;
    66. width: 28px;
    67. height: 16px;
    68. line-height: 16px;
    69. text-align: center;
    70. font-style: normal;
    71. border-radius: 2px;
    72. padding: 2px 4px;
    73. margin-right: 5px;
    74. }
    75. .course-list-item > dl > dt > .chuji {
    76. color: #298afd;
    77. background-color: #e0e8fc;
    78. }
    79. .course-list-item > dl > dt > .zhongji {
    80. color: #fd4029;
    81. background-color: #fce7e0;
    82. }
    83. .course-list-item > dl > dt > a {
    84. color: #333;
    85. }
批改老師：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é)