Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid布局实现PHP中文网课程栏目——100%还原
Blogger Information
Blog 40
fans 0
comment 1
visits 39780
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
grid布局实现PHP中文网课程栏目——100%还原
Dong.
Original
715 people have browsed it

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布局的强大与简便性
  • 对于前面学习的属性没有掌握透，很多属性都快忘了
Correcting teacher：GuanhuiGuanhui

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