Community Learn Tools Library Leisure
search
English
Home > List of blog posts > PHP大牛成长之路：Grid 布局实现PHP中文网首页课程列表
Blogger Information
Blog 63
fans 8
comment 8
visits 50127
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大牛成长之路：Grid 布局实现PHP中文网首页课程列表
周Sir-BLOG
Original
748 people have browsed it

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

实战项目图如下：

使用Grid布局效果：

HTML&DOM结构：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Grid布局实战</title>
  7.     <link rel="stylesheet" href="./static/css/style.css" />
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="item">php入门精品课程</div>
  12.       <div class="item"><img src="./static/img/ad01.jpg" alt="" /></div>
  13.       <div class="item">
  14.         <img src="./static/img/1.png" alt="" />
  15.         <a href=""><i>初级</i>ThinkPHP6.0极速入门(视频教程)</a>
  16.         <span>4W+次播放</span>
  17.       </div>
  18.       <div class="item">
  19.         <img src="./static/img/2.jpg" alt="" />
  20.         <a href=""><i>初级</i>ThinkPHP6.0极速入门(视频教程)</a>
  21.         <span>4W+次播放</span>
  22.       </div>
  23.       <div class="item">
  24.         <img src="./static/img/3.jpg" alt="" />
  25.         <a href=""><i>初级</i>ThinkPHP6.0极速入门(视频教程)</a>
  26.         <span>4W+次播放</span>
  27.       </div>
  28.       <div class="item">
  29.         <img src="./static/img/4.jpg" alt="" />
  30.         <a href=""><i>初级</i>ThinkPHP6.0极速入门(视频教程)</a>
  31.         <span>4W+次播放</span>
  32.       </div>
  33.       <div class="item">
  34.         <img src="./static/img/5.jpg" alt="" />
  35.         <a href=""><i>初级</i>ThinkPHP6.0极速入门(视频教程)</a>
  36.         <span>4W+次播放</span>
  37.       </div>
  38.       <div class="item">
  39.         <img src="./static/img/6.jpeg" alt="" />
  40.         <a href=""><i>初级</i>ThinkPHP6.0极速入门(视频教程)</a>
  41.         <span>4W+次播放</span>
  42.       </div>
  43.       <div class="item">
  44.         <img src="./static/img/7.jpg" alt="" />
  45.         <a href=""><i>初级</i>ThinkPHP6.0极速入门(视频教程)</a>
  46.         <span>4W+次播放</span>
  47.       </div>
  48.       <div class="item">
  49.         <img src="./static/img/8.jpg" alt="" />
  50.         <a href=""><i>初级</i>ThinkPHP6.0极速入门(视频教程)</a>
  51.         <span>4W+次播放</span>
  52.       </div>
  53.       <div class="item">
  54.         <img src="./static/img/9.jpg" alt="" />
  55.         <a href=""><i>初级</i>ThinkPHP6.0极速入门(视频教程)</a>
  56.         <span>4W+次播放</span>
  57.       </div>
  58.       <div class="item">
  59.         <img src="./static/img/10.jpg" alt="" />
  60.         <a href=""><i>初级</i>ThinkPHP6.0极速入门(视频教程)</a>
  61.         <span>4W+次播放</span>
  62.       </div>
  63.       <div class="item">
  64.         <img src="./static/img/11.jpg" alt="" />
  65.         <a href=""><i>初级</i>ThinkPHP6.0极速入门(视频教程)</a>
  66.         <span>4W+次播放</span>
  67.       </div>
  68.       <div class="item">
  69.         <img src="./static/img/12.jpg" alt="" />
  70.         <a href=""><i>初级</i>ThinkPHP6.0极速入门(视频教程)</a>
  71.         <span>4W+次播放</span>
  72.       </div>
  73.       <div class="item">
  74.         <img src="./static/img/13.jpg" alt="" />
  75.         <a href=""><i>初级</i>ThinkPHP6.0极速入门(视频教程)</a>
  76.         <span>4W+次播放</span>
  77.       </div>
  78.     </div>
  79.   </body>
  80. </html>

CSS样式：

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. html,
  8. body {
  9.   width: 100%;
  10.   height: 100%;
  11.   overflow: hidden;
  12.   overflow-y: auto;
  13.   font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial,
  14.     sans-serif;
  15.   background: #f3f5f7;
  16. }
  18. li,
  19. dd {
  20.   list-style: none;
  21. }
  23. a {
  24.   text-decoration: none;
  25. }
  27. button,
  28. img {
  29.   border: none;
  30.   outline: none;
  31. }
  33. .container {
  34.   width: 1200px;
  35.   height: 650px;
  36.   margin: 10px auto;
  37.   background: #fff;
  38.   display: grid;
  39.   grid-template-columns: repeat(5, 20%);
  40.   grid-template-rows: 80px 190px 190px 190px;
  41. }
  43. .container i{
  44.   font-style: normal;
  45.   font-size: 12px;
  46.   color: #fff;
  47.   border-radius: 1px;
  48.   padding: 2px; 
  49.   background-color: #93999f;
  50.   margin-right: 2px;
  51. }
  53. .container .item:first-of-type {
  54.   grid-column: span 5;
  55.   line-height: 80px;
  56.   text-align: center;
  57.   font-size: 20px;
  58.   font-weight: 600;
  59.   color: #4d555d;
  60. }
  62. .container .item:nth-child(2) {
  63.   grid-row: span 2;
  64.   /* background: lightseagreen; */
  65.   margin: 0 auto;
  66. }
  67. .container .item:nth-child(2) img {
  68.   border-radius: 8px;
  69. }
  71. .container .item:nth-child(n + 3) {
  72.   margin: 0 auto;
  73.   position: relative;
  74. }
  75. .container .item:nth-child(n + 3) img {
  76.   width: 217px;
  77.   height: 124px;
  78.   border-radius: 8px;
  79.   border: none;
  80. }
  81. .container .item:nth-child(n + 3) a {
  82.   display: block;
  83.   border-radius: 8px;
  84.   padding: 15px 20px;
  85.   position: absolute;
  86.   top: 92px;
  87.   transition: top 0.3s;
  88.   height: 80px;
  89.   width: 217px;
  90.   background: #fff;
  91.   color: #555;
  92. }
  93. .container .item:nth-child(n + 3) a:hover {
  94.   color: #333;
  95.   top: 55px;
  96. }
  97. .container .item:nth-child(n + 3) span {
  98.   position: absolute;
  99.   top: 130px;
  100.   left: 0;
  101.   width: 217px;
  102.   height: 42px;
  103.   padding: 0 20px;
  104.   line-height: 42px;
  105.   background: #fff;
  106.   color: #93999f;
  107.   font-size: 12px;
  108.   border-bottom-left-radius: 8px;
  109.   border-bottom-right-radius: 8px;
  110.   box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
  111. }

总结：

1、使用Grid布局轻松实现以上效果，对比基础布局及FlexBox盒子布局好太多了；
2、Grid布局主要属性如下：

  1. /*1、父容器中定义Grid布局     */
  2.   display: grid;
  3. /*-----------------------------------*/
  5. /*2、父容器中设定行/列*/
  6. /*设定行*/
  7.   grid-template-rows: 30px 1fr 30px;
  9. /*设定列*/
  10.   grid-template-columns: 30px 1fr 30px;
  12. /*以上为3行3列布局，fr为剩余空间分为几份（相当与百分比），同样支持%为单位。*/
  13. /*如多个行或列均为相同尺寸，可以使用repeat参数，比如：  grid-template-columns: repeat(5, 25px);*/
  15. /*-----------------------------------*/
  17. /*3、网格合并*/
  19. /*方法1、指定开始和结束的网格线*/
  21. grid-column-start: 1;
  22. grid-column-end: 2;
  25. /*方法2、结束属性指定跨越几行或几列*/
  27. grid-column-start:1;
  28. grid-column-end: span 2;
  32. /*方法3、简化( grid-column: 起始列号 / 结束列号)*/
  34. grid-column: 1 / 2;
  36. /*结束参数支持指定跨越几行或几列*/
  39. /*-----------------------------------*/
  1.         /*Grid自定义名称模板布局*/
  2.         /*父容器中定义*/
  3.         grid-template-areas:
  4.           "head head head"
  5.           "left main right"
  6.           "footer footer footer";
  7.         /*项目中需命名*/
  8.         grid-area: 网格名称;
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
1 comments
老周 2020-06-29 19:05:49
示例地址：http://106.13.227.76/grid/
1 floor
Author's latest blog post