Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实例演示Grid常用的容器与项目属性和仿写PHP中文网首页:最新课程片断
Blogger Information
Blog 27
fans 0
comment 0
visits 19024
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中文网首页:最新课程片断
茂林
Original
878 people have browsed it

1. Grid布局概念：网格布局或栅格布局，是二维布局，可以在水平和垂直方向上同时布局

  1. 容器：`display:grid/inline-grid`
  2. 项目：grid容器的子元素（仅限子元素，可以嵌套）
  3. 单元格：项目载体，多个单元格可构成`网格区域`
  4. 单元格或网格区域，对用户不可见，仅用于存放grid项目

2.Grid必知属性

2.1 容器属性

  1. display: grid: 容器类型(块或行内)
  2. grid-template-row/columns: 创建显式网格
  3. grid-auto-rows/columns: 创建隐式网格
  4. grid-auto-flow: 项目排列方向
  5. gap: 行列间隙
  6. place-content: 项目在容器中的排列方式
  7. place-items: 项目在单元格中的排列方式

2.2 项目属性

  1. grid-row/column: 某项目占据的网格区域
  2. grid-area: grid-row/column语法糖
  3. place-self: 某项目在单元格中的排列方式

3 实例演示Grid属性

  1. <body>
  2.     <div class="container">
  3.       <div class="item">item</div>
  4.     </div>
  5.   </body>
  6.   <style>
  7.     .container {
  8.       width: 300px;
  9.       height: 150px;
  10.       /*转为grid网格容器  */
  11.       display: grid;
  12.       /* 使用显式网格容器分成3行3列 */
  13.       /* grid-template-rows: 50px 50px 50px; */ /* 分成三行 */
  14.       /* grid-template-columns: 100px 100px 100px; */ /* 分成三列 */
  16.       /* 对相同的且相邻的值,可以用repeat简化 */
  17.       /* grid-template-rows: repeat(3, 50px);  */ /* 分成三行 */
  18.       /* grid-template-columns: repeat(3, 100px); */ /* 分成三列 */
  20.       /* 如宽度与高度等分,可单位fr 表示 比例单位fr  */
  21.       grid-template-rows: repeat(3, 1fr); /* 分成三行 */
  22.       grid-template-columns: repeat(3, 1fr); /* 分成三列 */
  23.     }
  24.     .container > .item {
  25.       background-color: bisque;
  26.       /* 项目属性 grid-row/grid-column：项目占据的网格区域*/
  27.       /* grid-row: 1/2; */ /* grid-row:行开始编号/行结束编号 */
  28.       /* grid-column: 1/2; */ /* grid-column:列开始编号/列结束编号 */
  29.       /* 一个项目至少要占据一个单元格,一个单元格,默认是跨越1行1列,可以简写 */
  30.       /* grid-row: 2; */ /* 行开始编号 2,结束编号不写默认3 */
  31.       /* grid-column: 2;  */ /* 列开始编号 2,结束编号不写默认3 */
  33.       /* grid-row: 1/3; */ /* grid-row:行开始编号/行结束编号 */
  34.       /* grid-column: 1/3; */ /* grid-column:列开始编号/列结束编号 */
  35.       /* 当跨越多个单元格时，开成一个矩形的空间,称为“网格区域” */
  36.       /* grid-area: 2/2/4/4;  *//* grid-area:行开始/列开始/行结束/列结束 */
  37.       grid-area: 2/2 / span2/span2;/* span表示跨越的意思,span2 表示跨越2行或2列 */
  38.     }

  1. <body>
  2.     <div class="container">
  3.       <div class="item">item1</div>
  4.       <div class="item">item2</div>
  5.       <div class="item">item3</div>
  6.       <div class="item">item4</div>
  7.       <div class="item add">item5</div>
  8.       <div class="item">item6</div>
  9.       <div class="item">item7</div>
  10.       <div class="item">item8</div>
  11.       <div class="item">item9</div>
  12.     </div>
  13.     <style>
  14.       .container {
  15.         width: 450px;
  16.         height: 300px;
  17.         /* 转为grid网格容器  */
  18.         display: grid;
  19.         border: 1px solid black;
  20.         /* 创建3行3列的容器 */
  21.         grid-template-columns: repeat(3, 120px); /* 3列 */
  22.         grid-template-rows: repeat(3, 80px); /* 3行 */
  23.         /* 容器项目的排列规则,默认是行优先row */
  24.         grid-auto-flow: row;
  25.         /* grid-auto-flow: column; */
  27.         /* 2. 隐式网格 */
  28.         /* 超出显式网格数量的项目,创建在隐式网格中(自动生成) */
  29.         /* grid-auto-rows: 50px; */
  30.         grid-auto-rows: 1fr;
  31.         /* 
  32.         1.项目在容器中的排列方式 （垂直方向与水平方向） place-content: 垂直的排列方式  水平的排列方式
  33.         2.排列前提：容器中必须存在 "剩余空间"
  34.         3.对齐本质:剩余空间,在"项目"之间的分配方案
  35.         4.剩余空间:Flex(主轴,交叉轴), Grid(容器,单元格)
  36.         5.值包含:start center end(对齐方式) 
  37.          space-between space-around space-evenly(剩余空间在项目之间的分配)
  38.         */
  39.         /* 默认方式 垂直与水平都是 start */
  40.         place-content: start start;
  41.         /* 垂直与水平方向的值相同,可以简写成一个 */
  42.         place-content: start;
  43.         /* 垂直居中,水平居右 */
  44.         place-content: center end;
  45.         /* 剩余空间在所有项目之间分配 */
  46.         place-content: space-between space-around;
  47.         place-content: space-between space-between;
  48.         place-content: space-between;
  49.         place-content: space-around;
  50.         place-content: space-evenly;
  51.         /* 项目在单元格的排列方式,值与项目在容器中的一样 
  52.         place-items:垂直方向 水平方向
  53.         值包含:start center end(对齐方式) 
  54.          space-between space-around space-evenly(剩余空间在项目之间的分配)
  55.         */
  56.         /* 垂直和水平方向 都居中  */
  57.         place-items: center center;
  58.         /* 双值相同,可简写成一个值 */
  59.         place-items: center;
  60.         /* 垂直末尾对齐,水平居中 */
  61.         place-items: end center;
  62.       }
  63.       .container > .item {
  64.         background-color: bisque;
  65.         width: 100px;
  66.         height: 60px;
  67.       }
  68.       .container > .item.add {
  69.         background-color: aqua;
  70.         position: relative;
  71.         /* 某个项目的单独排列方法 */
  72.         place-self: center;
  73.         /* position: absolute;
  74.         top: 0; */
  75.       }
  76.     </style>

排列方式

  1.   <body>
  2.     <div class="container">
  3.       <div class="item">item1</div>
  4.       <div class="item">item2</div>
  5.       <div class="item">item3</div>
  6.       <div class="item">item4</div>
  7.       <div class="item">item5</div>
  8.       <div class="item">item6</div>
  9.       <div class="item">item7</div>
  10.       <div class="item">item8</div>
  11.       <div class="item">item9</div>
  12.     </div>
  13.   </body>
  14.   <style>
  15.     .container {
  16.       width: 300px;
  17.       height: 150px;
  18.       /*转为grid网格容器  */
  19.       display: grid;
  20.       border: 1px solid black;
  21.       padding: 5px;
  23.       /* 如宽度与高度等分,可单位fr 表示 比例单位fr  */
  24.       grid-template-rows: repeat(3, 1fr); /* 分成三行 */
  25.       grid-template-columns: repeat(3, 1fr); /* 分成三列 */
  27.       /* gap: 行列间隙/轨道间距 */
  28.       /* gap: 垂直方向  水平方向 */
  29.       gap: 5px 5px;
  30.       /* 双值一样,简写成1个值 */
  31.       gap: 5px;
  32.     }
  33.     .container > .item {
  34.       background-color: bisque;
  35.     }

gap属性

4 仿写PHP中文网首页:最新课程片断

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>Grid布局作业-仿首页最新课程</title>
  8.     <link rel="stylesheet" href="css/reset.css" />
  9.     <link rel="stylesheet" href="css/base.css" />
  10.     <link rel="stylesheet" href="css/font-icon.css" />
  11.   </head>
  12.   <body>
  13.     <!-- New Course 整体看成1行2列 -->
  14.     <div class="newcourse">
  15.       <div class="top">
  16.         <h2>最新课程</h2>
  17.         <a href="">更多> </a>
  18.       </div>
  19.       <!-- ul 2行 5列   -->
  20.       <div class="course">
  21.         <ul class="list">
  22.           <li class="item1">
  23.             <a href="">
  24.               <img src="/0209/img/midjourneyAI.png" alt="MidjourneyAI" />
  25.             </a>
  27.             <div class="detail">
  28.               <span>初级</span>
  29.               <a href="">Midjourney初级课程</a>
  30.             </div>
  31.             <div class="desc iconfont">
  32.               <span>1234次学习</span>
  33.               <span class="icon-shoucang"> 收藏</span>
  34.             </div>
  35.           </li>
  36.           <li class="item2">
  37.             <a href="">
  38.               <img src="/0209/img/Midjourney2.png" alt="Midjourney10分钟创作" />
  39.             </a>
  41.             <div class="detail">
  42.               <span>初级</span>
  43.               <a href="">10分钟--Midjourney创作自己的漫画</a>
  44.             </div>
  45.             <div class="desc iconfont">
  46.               <span>121次学习</span>
  47.               <span class="icon-shoucang"> 收藏</span>
  48.             </div>
  49.           </li>
  50.           <li class="item3">
  51.             <a href="">
  52.               <img
  53.                 src="/0209/img/Midjourney3.png"
  54.                 alt="Midjourney高手之路--关键词"
  55.               />
  56.             </a>
  58.             <div class="detail">
  59.               <span>初级</span>
  60.               <a href="">Midjourney关键词系列整合</a>
  61.             </div>
  62.             <div class="desc iconfont">
  63.               <span>1234次学习</span>
  64.               <span class="icon-shoucang"> 收藏</span>
  65.             </div>
  66.           </li>
  67.           <li class="item4">
  68.             <a href="">
  69.               <img src="/0209/img/AI4.png" alt="AI绘画简单上手" />
  70.             </a>
  72.             <div class="detail">
  73.               <span>初级</span>
  74.               <a href="">AI绘画教程</a>
  75.             </div>
  76.             <div class="desc iconfont">
  77.               <span>1234次学习</span>
  78.               <span class="icon-shoucang"> 收藏</span>
  79.             </div>
  80.           </li>
  81.           <li class="item5">
  82.             <a href="">
  83.               <img src="/0209/img/Midjourney5.png" alt="Midjourney入门到精通" />
  84.             </a>
  86.             <div class="detail">
  87.               <span>初级</span>
  88.               <a href="">【Midjourney】入门到精通</a>
  89.             </div>
  90.             <div class="desc iconfont">
  91.               <span>1234次学习</span>
  92.               <span class="icon-shoucang"> 收藏</span>
  93.             </div>
  94.           </li>
  95.           <li class="item6">
  96.             <a href="">
  97.               <img
  98.                 src="/0209/img/Midjourney6.png"
  99.                 alt="成为PHP架构师自制PHP框架"
  100.               />
  101.             </a>
  103.             <div class="detail">
  104.               <span>中级</span>
  105.               <a href="">成为PHP架构师-自制PHP框架</a>
  106.             </div>
  107.             <div class="desc iconfont">
  108.               <span>1234次学习</span>
  109.               <span class="icon-shoucang"> 收藏</span>
  110.             </div>
  111.           </li>
  112.           <li class="item7">
  113.             <a href="">
  114.               <img src="/0209/img/Gin7.png" alt="Gin框架实战开发课程" />
  115.             </a>
  117.             <div class="detail">
  118.               <span>初级</span>
  119.               <a href="">Go语言课程Gin框架实战</a>
  120.             </div>
  121.             <div class="desc iconfont">
  122.               <span>1234次学习</span>
  123.               <span class="icon-shoucang"> 收藏</span>
  124.             </div>
  125.           </li>
  126.           <li class="item8">
  127.             <a href="">
  128.               <img src="/0209/img/Golang8.jpg" alt="Golang深入理解GPM模型" />
  129.             </a>
  131.             <div class="detail">
  132.               <span>中级</span>
  133.               <a href="">Golang深入理解GPM模型</a>
  134.             </div>
  135.             <div class="desc iconfont">
  136.               <span>1234次学习</span>
  137.               <span class="icon-shoucang"> 收藏</span>
  138.             </div>
  139.           </li>
  140.           <li class="item9">
  141.             <a href="">
  142.               <img src="/0209/img/Golang9.jpg" alt="公益直播PHP你究竟想干啥" />
  143.             </a>
  145.             <div class="detail">
  146.               <span>初级</span>
  147.               <a href="">公益直播：PHP8，究竟有啥野心..！？</a>
  148.             </div>
  149.             <div class="desc iconfont">
  150.               <span>1234次学习</span>
  151.               <span class="icon-shoucang"> 收藏</span>
  152.             </div>
  153.           </li>
  154.           <li class="item10">
  155.             <a href="">
  156.               <img src="/0209/img/linux10.jpg" alt="Linux运维小白入行详解" />
  157.             </a>
  159.             <div class="detail">
  160.               <span>中级</span>
  161.               <a href="">Linux运维基础课程【全程干货详解】 </a>
  162.             </div>
  163.             <div class="desc iconfont">
  164.               <span>1234次学习</span>
  165.               <span class="icon-shoucang"> 收藏</span>
  166.             </div>
  167.           </li>
  168.         </ul>
  169.       </div>
  170.     </div>
  171.   </body>
  172. </html>

css代码

  1. /* body背景色 */
  2. body {
  3.   background-color: #f3f5f7;
  4. }
  5. /* 定义整个框架的大小与自动居中 */
  6. .newcourse {
  7.   width: 1200px;
  8.   margin-left: auto;
  9.   margin-right: auto;
  10.   overflow: hidden;
  11.   position: relative;
  12.   top: 20px;
  13. }
  14. /* 把top定义为弹性容器,项目两端对齐排列 */
  15. .top {
  16.   display: flex;
  17.   flex-flow: row nowrap;
  18.   place-content: space-between;
  19.   place-items: center;
  20. }
  21. /*设置"更多"样式  */
  22. .top a {
  23.   background-color: #f0f1f4;
  24.   width: 78px;
  25.   height: 32px;
  26.   text-align: center;
  27.   border-radius: 100px;
  28.   color: #999999;
  29.   text-decoration: none;
  30.   padding-top: 4px;
  31. }
  32. /* "更多" 鼠标悬停的样式*/
  33. .top a:hover {
  34.   background-color: red;
  35.   color: white;
  36. }
  38. /* list标签转为grid布局,将li放入2行5列的项目中 */
  39. .list {
  40.   height: 530px;
  41.   display: grid;
  42.   grid-template-columns: repeat(5, 224px);
  43.   grid-template-rows: repeat(2, 235px);
  44.   gap: 15px;
  45.   place-content: center space-between;
  46. }
  47. /* grid中的每个li项目转为flex布局 */
  48. .list li {
  49.   display: flex;
  50.   flex-flow: column nowrap; /* 主轴方向(垂直)和 主轴不换行 */
  51.   place-content: space-between; /* 项目在主轴上的排列方式 (两端对齐)*/
  52.   border-radius: 6px; /* 边框4个圆角 */
  53.   background-color: white; /* 背景色 */
  54. }
  55. /* flex 第1项目充满flex盒子 */
  56. li.list a {
  57.   flex: auto;
  58. }
  59. /* flex第一个项目中-图片的样式 */
  60. a img {
  61.   width: 224px;
  62.   height: 134px;
  63.   border-top-right-radius: 6px;
  64.   border-top-left-radius: 6px;
  65. }
  66. /* flex第二个项目中span标签的样式 */
  67. .detail span {
  68.   font-size: 12px;
  69.   padding: 2px 4px;
  70.   color: #298afd;
  71.   text-align: center;
  72.   background-color: #e0e8fc;
  73. }
  74. /* flex第二个项目中a标签的样式 */
  75. .detail a {
  76.   font-size: 14px;
  77.   text-decoration: none;
  78.   color: #333333;
  79. }
  80. /* flex第二个项目中a标签的悬停样式 */
  81. .detail a:hover {
  82.   color: red;
  83.   cursor: pointer;
  84. }
  85. /* flex第2个项目的样式 */
  86. .detail {
  87.   margin: 10px;
  88.   width: 204px;
  89.   height: 21px;
  90. }
  91. /* flex第3个项目的样式 */
  92. .desc {
  93.   position: relative;
  94.   margin: 10px;
  95.   width: 204px;
  96.   height: 21px;
  97.   font-size: 12px;
  98.   color: #b7b7b7;
  99. }
  100. /* flex第3个项目span1的样式 */
  101. .desc span:first-child {
  102.   position: absolute;
  103.   left: 0;
  104. }
  105. /* flex第3个项目span2的样式 */
  106. .desc span:first-child + * {
  107.   position: absolute;
  108.   right: 0;
  109.   cursor: pointer;
  110. }
  111. /* 中级课程span样式 */
  112. .item6 > .detail > span,
  113. .item8 > .detail > span,
  114. .item10 > .detail > span {
  115.   background-color: #fce7e0;
  116.   color: lightcoral;
  117. }

结果
仿写首页最新课程片断

总结：
上课老师讲的没怎么听懂，基础不扎实，反复观看上课视频，动手慢慢消化；
图片点击动态没有实现

Correcting teacher：PHPzPHPz

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