search

博客列表 >PHP大牛成长之路：Grid 布局实现PHP中文网首页课程列表

PHP大牛成长之路：Grid 布局实现PHP中文网首页课程列表

周Sir-BLOG
周Sir-BLOG原创
2020年06月29日 19:01:43746浏览

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: 网格名称;
上一条：PHP大牛成长之路：Flex布局仿PHP中文网下一条：仿html.cn-PC页面-web前端第11章6.24
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
老周2020-06-29 19:05:491楼
示例地址：http://106.13.227.76/grid/

相关文章

查看更多