search

博客列表 >仿php中文网热门推荐列表

仿php中文网热门推荐列表

靠近你深拥你
靠近你深拥你原创
2023年04月02日 20:49:38319浏览

  • 效果图

  • 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. }
上一条：Vue3路由守卫、setup的写法及组件使用，初识axios下一条：Flex 项目属性演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多