实例演示Grid常用的容器与项目属性和仿写PHP中文

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
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. }

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

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

【感谢龙石为本站提供数据交换平台,http://www.longshidata.com/pages/exchange.html】
更多阅读