search

博客列表 >grid布局实现PHP中文网课程栏目——100%还原

grid布局实现PHP中文网课程栏目——100%还原

Dong.
Dong.原创
2020年06月30日 17:30:06716浏览

Grid 布局实现PHP中文网首页课程列表

项目示例 ：

代码演示：

  1.  <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>grid布局仿PHP中文网</title>
  7. </head>
  8. <style>
  9.     /* 初始化三部曲 */
  10.     * {
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.     }
  16.     span {
  17.         color: #666;
  18.         font-size: 14px;
  19.       }
  21.       a {
  22.         color: black;
  23.         text-decoration: none;
  24.         font-size: 14px;
  25.       }
  27.       h2 {
  28.         color: #4d555d;
  29.       margin-bottom: 30px;
  30.       text-align: center;
  31.       }
  33.     .courses-list {
  34.         width: 1200px;
  35.         height: 646px;
  36.         display: grid;
  37.         margin: auto;
  38.     }
  40.     .courses-list > .courses-title {
  41.         color: #666;
  42.         text-align: center;
  43.     }
  45.     .courses-list > .container {
  46.         display: grid;
  47.         grid-template-columns: repeat(5 , 1fr);
  48.         grid-template-rows: repeat(3 , 1fr);
  49.         gap: 20px;
  50.     }
  52.     .courses-list > .container > .course {
  53.         width: 217px;
  54.         height: 166px;
  55.         border-radius: 5%;
  56.         box-shadow: 0 0 10px #888;
  57.         /* 项目在单元格中的对齐方式 */
  58.         place-self: start center;
  59.         overflow: hidden;
  60.         position: relative;
  62.       }
  63.     .courses-list > .container >  .course.first {
  64.         grid-row: span 2;
  65.         height: 362px; 
  66.     }
  67.     /* 课程图片 */
  68.     .courses-list > .container > .course img {
  69.         width: 100%;
  70.         border-radius: 5%;
  71.       }
  72.       /* 课程描述 */
  73.       .courses-list > .container > .course .desc {
  74.         display: grid;
  75.         place-content: space-between;
  76.         min-height: 84px;
  77.         background-color: #fff;
  78.         border-radius: 5%;
  79.         padding: 10px;
  80.         /* 绝对定位 向上移动42像素*/ 
  81.         position: relative;
  82.         top: -40px;
  83.         transition: all 0.5s;
  84.       }
  86.       .courses-list > .container > .course .span {
  87.         position: absolute;
  88.         display: block;
  89.         width: 100%;
  90.         left: 0;
  91.         bottom: 0;
  92.         line-height: 50px;
  93.         height: 50px;
  94.         padding: 0 20px;
  95.         box-sizing: border-box;
  96.         background-color: #fff;
  97.         z-index: 2;
  98.       }
  100.       .courses-list > .container > .course .desc span {
  101.         font-size: smaller;
  102.         color: #555;
  103.       }
  104.       .courses-list > .container > .course .desc span {
  105.         background-color: #939999;
  106.         color: white;
  107.         padding: 3px;
  108.         border-radius: 2px;
  109.       }
  110.       .courses-list > .container > .course:hover .desc {
  111.         min-height: 130px;
  112.         cursor: pointer;
  113.         position: relative;
  114.         top: -90px;
  115.       }
  116. </style>
  117. <body>
  118.     <div class="courses-list">
  119.         <h2 class="course-title"><strong>&lt;/&gt;</strong>PHP进阶学习路径<strong>&lt;/&gt;</strong></h2>
  120.         <div class="container">
  121.             <div class="course first">
  122.                 <a href=""><img src="https://www.php.cn/static/images/index_learn_middel.jpg" alt="" /></a>
  123.             </div>
  125.             <div class="course">
  126.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6e1577037989.jpg" alt="" /></a>
  127.                 <div class="desc">
  128.                     <a href=""><span>中级</span>孤独九剑（7）_Bootstrap视频教程</a>
  129.                 </div>    
  130.                 <span class="span">6W+播放</span>
  132.             </div>
  134.             <div class="course">
  135.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24010108e3d268.jpg" alt="" /></a>
  136.                 <div class="desc">
  137.                     <a href=""><span>中级</span>最新ThinkPHP 5.1全球首发视频教程（60天成就PHP）</a>
  138.                 </div>    
  139.                 <span class="span">6W+播放</span>
  141.             </div>
  143.             <div class="course">
  144.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a372b552a2c4233.jpg" alt="" /></a>
  145.                 <div class="desc">
  146.                     <a href=""><span>中级</span>MySQLi面向对象编程急速入门</a>
  147.                 </div>    
  148.                 <span class="span">6W+播放</span>
  150.             </div>
  152.             <div class="course">
  153.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a3728258bf9f213.jpg" alt="" /></a>
  154.                 <div class="desc">
  155.                     <a href=""><span>中级</span>PDO操作急速入门</a>
  156.                 </div>    
  157.                 <span class="span">12W+播放</span>
  159.             </div>
  161.             <div class="course">
  162.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a373991d9cd9819.jpg" alt="" /></a>
  163.                 <div class="desc">
  164.                     <a href=""><span>中级</span>PHP与Ajax急速入门</a>
  165.                 </div>    
  166.                 <span class="span">10W+播放</span>
  168.             </div>
  170.             <div class="course">
  171.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt="" /></a>
  172.                 <div class="desc">
  173.                     <a href=""><span>中级</span>正则表达式急速入门</a>
  174.                 </div>    
  175.                 <span class="span">10W+播放</span>
  177.             </div>
  179.             <div class="course">
  180.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a5322a085219472.jpg" alt="" /></a>
  181.                 <div class="desc">
  182.                     <a href=""><span>中级</span>命名空间急速入门</a>
  183.                 </div>    
  184.                 <span class="span">5W+播放</span>
  186.             </div>
  188.             <div class="course">
  189.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a53090b27254106.jpg" alt="" /></a>
  190.                 <div class="desc">
  191.                     <a href=""><span>初级</span>PHP字符串操作经典入门</a>
  192.                 </div>    
  193.                 <span class="span">6W+播放</span>
  195.             </div>
  197.             <div class="course">
  198.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d22b615e56bf130.jpg" alt="" /></a>
  199.                 <div class="desc">
  200.                     <a href=""><span>中级</span>Ci框架30分钟急速入门</a>
  201.                 </div>    
  202.                 <span class="span">6W+播放</span>
  204.             </div>
  206.             <div class="course">
  207.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt="" /></a>
  208.                 <div class="desc">
  209.                     <a href=""><span>中级</span>PHP实战天龙八部微信支付实战视频</a>
  210.                 </div>    
  211.                 <span class="span">45W+播放</span>
  213.             </div>
  215.             <div class="course">
  216.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt="" /></a>
  217.                 <div class="desc">
  218.                     <a href=""><span>中级</span>PHP实战天龙八部之仿爱奇艺网站</a>
  219.                 </div>    
  220.                 <span class="span">45W+播放</span>
  222.             </div>
  224.             <div class="course">
  225.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24230536122573.jpg" alt="" /></a>
  226.                 <div class="desc">
  227.                     <a href=""><span>中级</span>大型公益实战天龙八部之开发Mini版MVC框架仿糗</a>
  228.                 </div>    
  229.                 <span class="span">6W+播放</span>
  231.             </div>
  233.             <div class="course">
  234.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2402695ce37351.jpg" alt="" /></a>
  235.                 <div class="desc">
  236.                     <a href=""><span>中级</span>PHP全栈开发之小博客大智慧</a>
  237.                 </div>    
  238.                 <span class="span">6W+播放</span>
  240.             </div>
  243.         </div>
  244.     </div>
  245. </body>
  246. </html>

还原效果：

总结

  • 利用grid与flex的嵌套，解决了以前很难解决的位置对齐和定位问题；
  • 此案例利用绝对定位来实现上下滑动效果；
  • 感受到了gird布局的强大与简便性
  • 对于前面学习的属性没有掌握透，很多属性都快忘了
上一条：grld仿 (PHP中文网php入门精品课程 )板块下一条：grid布局仿照php中文网的一个模块
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多