Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿php中文网热门推荐列表
Blogger Information
Blog 9
fans 0
comment 0
visits 3953
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿php中文网热门推荐列表
靠近你深拥你
Original
320 people have browsed it

  • 效果图

  • 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="//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基础语法快速预览"
    27.               >小白拯救者: PHP7基础语法快速预览</a
    28.             >
    29.           </dt>
    30.           <dd>
    31.             <p>88876次学习</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次学习</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="在线报名系统（移动端）实战【公益直播】"
    61.               >在线报名系统（移动端）实战【公益直播】</a
    62.             >
    63.           </dt>
    64.           <dd>
    65.             <p>88876次学习</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全新实战课程(2021版)第一季"
    79.               >vue 3.0全新实战课程(2021版)第一季</a
    80.             >
    81.           </dt>
    82.           <dd>
    83.             <p>88876次学习</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简爱读书项目开发--第一季"
    97.               >Uniapp简爱读书项目开发--第一季</a
    98.             >
    99.           </dt>
    100.           <dd>
    101.             <p>88876次学习</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基础到ThinkPHP6实战（2022灭绝师妹力作）"
    115.               >从PHP基础到ThinkPHP6实战（2022灭绝师妹力作）</a
    116.             >
    117.           </dt>
    118.           <dd>
    119.             <p>88876次学习</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创业那点事"
    133.               >公益直播：2023，聊聊PHP创业那点事</a
    134.             >
    135.           </dt>
    136.           <dd>
    137.             <p>88876次学习</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框架实战">Go语言课程Gin框架实战</a>
    151.           </dt>
    152.           <dd>
    153.             <p>88876次学习</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次学习</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次学习</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实现

    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. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：很好，总体效果不错，继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post