search

博客列表 >php中文网首页"热门推荐"课程列表组件(Grid)

php中文网首页"热门推荐"课程列表组件(Grid)

汉邦
汉邦原创
2023年03月21日 13:13:06350浏览

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>热门推荐</title>
  8.     <link rel="stylesheet" href="01.css">
  9.     <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3964449_hddmgnomyz.css">
  10. </head>
  11. <body>
  12.     <div class="latest-courses">
  13.         <div class="lates"><h2>热门推荐</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">初级</small>
  24.                         <a href="">小白拯救者: PHP7基础语法快速预览</a>
  25.                     </div>
  26.                     <div class="other">
  27.                         <span>88789次学习</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">初级</small>
  39.                         <a href="">php8，我来也</a>
  40.                     </div>
  41.                     <div class="other">
  42.                         <span>254922次学习</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">中级</small>
  54.                         <a href="">在线报名系统（移动端）实战【公益直播】</a>
  55.                     </div>
  56.                     <div class="other">
  57.                         <span>69378次学习</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">中级</small>
  69.                         <a href="">vue 3.0全新实战课程(2021版)第一季</a>
  70.                     </div>
  71.                     <div class="other">
  72.                         <span>54378次学习</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">中级</small>
  84.                         <a href="">Uniapp简爱读书项目开发--第一季</a>
  85.                     </div>
  86.                     <div class="other">
  87.                         <span>11378次学习</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">初级</small>
  99.                         <a href="">从PHP基础到ThinkPHP6实战（2022灭绝师妹力作）</a>
  100.                     </div>
  101.                     <div class="other">
  102.                         <span>11378次学习</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">初级</small>
  114.                         <a href="">公益直播：2023，聊聊PHP创业那点事</a>
  115.                     </div>
  116.                     <div class="other">
  117.                         <span>22378次学习</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">中级</small>
  129.                         <a href="">Golang深入理解GPM模型</a>
  130.                     </div>
  131.                     <div class="other">
  132.                         <span>378次学习</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">初级</small>
  144.                         <a href="">公益直播：PHP8，究竟有啥野心..！？</a>
  145.                     </div>
  146.                     <div class="other">
  147.                         <span>510次学习</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">中级</small>
  159.                         <a href="">Linux运维基础课程【全程干货详解】</a>
  160.                     </div>
  161.                     <div class="other">
  162.                         <span>3578次学习</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. }

浏览器效果图：

上一条：实例演示课堂中学到的Grid的属性下一条：运用flex写一个简单登录页面
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多