Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 【布局】教你用Grid网格布局详细教程入门笔记+实战案例
Blogger Information
Blog 128
fans 9
comment 5
visits 241263
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网格布局详细教程入门笔记+实战案例
　一纸荒凉* Armani
Original
2215 people have browsed it

Grid 网格布局介绍

CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。

像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。

img

上图这样的布局，就是 Grid 布局的拿手好戏。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

MDN 网格布局 参考网址

常用属性

序号 属性 描述
1 grid-template-columns 定义网格轨道中的列宽
2 grid-template-rows 定义网格轨道中的行高
3 gap 网格轨道间距
4 grid-auto-flow 项目在容器中的排列方向
5 grid-auto-rows 隐式网格单元的行高
6 grid-auto-columns 隐式网格单元的列宽
7 grid-area 定义网格区域
8 place-items 所有项目在网络单元中的对齐方式
9 place-self 某个项目在网络单元(含网格区域)中的对齐方式
10 place-content 项目在网格容器中的对齐方式

常用术语

序号 术语 描述
1 网格容器 dispaly:grid属性定义的元素
2 网格项目 网格容器的直接子元素
3 网格区域 由一个或多个单元格组成的矩形区域
4 网格轨道 有行轨道与列轨道之分
5 轨道间距 分为行轨间隙和列轨间隙

  1. 圣怀布局：
    grid实现，二边固定，中间自适应，主体优先渲染
  2. 网格容器：
    由若干个矩形网格单元构成
  3. 网格项目：
    网格容器的子元素，必须放在网格单元中
  4. 网格单元：
    有”单元格”和”网格区域”二种表现形式
  5. 网格轨道：
    由多个网格单元组成，根据排列方向有”行轨”和”列轨”之分
  6. 轨道间距：
    容器中轨道之间的间距，有”行轨间距”和”列轨间距”
  7. fr:
    网格的伸缩因子
  8. repeat：
    文本重写的函数（以空格分隔）
  9. minmax：
    最小到最大区间的函数

grid快速实现”圣怀布局 代码

  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.     <style>
  9.         /* 圣怀布局：grid实现，二边固定，中间自适应，主体优先渲染 */
  10.         body * {
  11.             border: 1px solid #000;
  12.         }
  13.         body {
  14.             display: grid;
  15.             grid-template-columns: 15em minmax(50vw,auto) 15em;
  16.             grid-template-rows: 3em minmax(80vh,auto) 3em;
  17.             gap: 0.5em;
  18.         }
  19.         header,footer {
  20.             grid-area: span 1 / span 3;
  21.         }
  22.         main {
  23.             grid-area: 2 /2;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <!-- 圣怀布局要求主体区优先显示，根据浏览器渲染顺序，主体应该写到前面去。 -->
  29.     <header>header</header>
  30.     <!-- 主体main应该优先渲染 -->
  31.     <main>main</main>
  32.     <aside class="left">left</aside>
  33.     <aside class="right">right</aside>
  34.     <footer>footer</footer>
  35. </body>
  36. </html>

容器属性

grid-template-columns 属性 grid-template-rows 属性

容器指定了网格布局以后，接着就要划分行和列。
grid-template-columns属性定义每一列的列宽
grid-template-rows属性定义每一行的行高。

指定三行三列的网格，列宽和行高都是100px

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>grid网格布局</title>
  8.     <style>
  9.         .container {
  10.             display: grid;
  11.             grid-template-columns: 100px 100px 100px;
  12.             grid-template-rows: 100px 100px 100px;
  14.             /* 除了使用绝对单位，也可以使用百分比 */
  15.          /* grid-template-columns: 33.33% 33.33% 33.33%;
  16.             grid-template-rows: 33.33% 33.33% 33.33%; */
  18.         }
  20.         .container .item {
  21.             font-size: 60px;
  22.             text-align: center;
  23.             background-color: pink;
  24.         }
  26.         .container .item:nth-child(even) {
  27.             background-color: green;
  28.         }
  29.     </style>
  30. </head>
  32. <body>
  33.     <div class="container">
  34.         <div class="item">1</div>
  35.         <div class="item">2</div>
  36.         <div class="item">3</div>
  37.         <div class="item">4</div>
  38.         <div class="item">5</div>
  39.         <div class="item">6</div>
  40.         <div class="item">7</div>
  41.         <div class="item">8</div>
  42.         <div class="item">9</div>
  43.     </div>
  44. </body>
  46. </html>

gap设置网格轨道间隙

  1.  .container {
  2.             display: grid;
  3.             grid-template-columns: 100px 100px 100px;
  4.             grid-template-rows: 100px 100px 100px;
  5.             /* gap: 水平间隙（行） 垂直间隙（列） */
  6.             gap: 10px 20px;
  7.         }

grid-auto-flow 排列方向

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是”先行后列”，即先填满第一行，再开始放入第二行

  1. .container {
  2.             display: grid;
  3.             grid-template-columns: repeat(3, 150px);
  4.             grid-template-rows: repeat(3, 150px);
  5.             gap: 1px;
  6.             /* 项目在容器中的排列方向 */
  7.             grid-auto-flow: column
  8.         }

这个顺序由grid-auto-flow属性决定，默认值是row，即”先行后列”。也可以将它设成column，变成”先列后行”

grid-auto-columns 属性， grid-auto-rows 属性

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。
grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。

  1. .container {
  2.  display: grid;
  3.  grid-template-columns: 100px 100px 100px;
  4.  grid-template-rows: 100px 100px 100px;
  5.  grid-auto-rows: 50px; 
  6. }

指定新增的行高统一为50px（原始的行高为100px）

grid-template-areas 定义区域

网格布局允许指定”区域”（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

  1. .container {
  2.  display: grid;
  3.  grid-template-columns: 100px 100px 100px;
  4.  grid-template-rows: 100px 100px 100px;
  5.  grid-template-areas: 'a b c'  'd e f'  'g h i';
  6. }


先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。

多个单元格合并成一个区域的写法如下。将9个单元格分成a、b、c三个区域

  1. grid-template-areas: 'a a a'
  2.           'b b b'
  3.           'c c c';

下面是一个布局实例圣杯布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>圣杯布局</title>
  8.     <style>
  9.         body * {
  10.             border: 1px solid #000;
  11.         }
  13.         body {
  14.             display: grid;
  15.             grid-template-columns: 15em minmax(50vw, auto) 15em;
  16.             grid-template-rows: 3em minmax(80vh, auto) 3em;
  17.             place-content: center;
  18.             gap: 0.5em;
  19.             grid-template-areas: "header header header" 
  20.                                  "left main right" 
  21.                                  "footer footer footer";
  22.         }
  24.         /* header,
  25.         footer {
  26.             grid-area: span 1 / span 3;
  27.         }
  29.         main {
  30.             grid-area: 2 /2;
  31.         } */
  33.         /* 等同于 */
  35.         header {
  36.             grid-area: header;
  37.         }
  38.         footer {
  39.             grid-area: footer;
  40.         }
  42.         main {
  43.              grid-area: main;
  44.         }
  45.         aside.left{
  46.             grid-area: left;
  47.         }
  48.         aside.right{
  49.             grid-area: right;
  50.         }
  51.     </style>
  52. </head>
  54. <body>
  55.     <header>header</header>
  56.     <main>main</main>
  57.     <aside class="left">left</aside>
  58.     <aside class="right">right</aside>
  59.     <footer>footer</footer>
  60. </body>
  62. </html>


顶部是页眉区域header，底部是页脚区域footer，中间部分则为left、main和right。

如果某些区域不需要利用，则使用”点”（.）表示

  1.  grid-template-areas: 'a . c'
  2.            'd . f'
  3.            'g . i';

中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域。

place-items属性

设置单元格内容的水平位置（左中右）垂直位置（上中下）

  1. .container {
  2.  /* 如果省略第二个值，则浏览器认为与第一个值相等 */
  3.  /* 垂直对齐方式    水平对齐方式 */
  4.  place-items: start end;
  5. }
  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。
  • stretch：拉伸，占满单元格的整个宽度（默认值）。

    注意：项目默认是拉伸的，如果设置了大小，并小于单元空间的话
    在单元格中就会存在剩余空间可以被分配，这时对齐就有意义了。

  1. .container {
  2.     display: grid;
  3.     grid-template-columns: repeat(3, 150px);
  4.     grid-template-rows: repeat(2, 150px);
  5.     gap: 1px;
  6.     grid-auto-flow: row;
  7.     grid-auto-rows: 200px;
  8.     /* 单元格内容对齐方式 */
  9.     place-items: end center;
  10. }
  11. .item{
  12.     font-size: 30px;
  13.     text-align: center;
  14.     background-color: pink;
  15.     width: 60px;
  16.     height: 60px;
  17. }

place-content 属性

整个内容区域在容器里面的水平位置（左中右），垂直位置（上中下）

  1.     place-content: space-around space-evenly;
  • start - 对齐容器的起始边框。
  • end - 对齐容器的结束边框。
  • center - 容器内部居中。
  • stretch - 项目大小没有指定时，拉伸占据整个网格容器。
  • space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
  • space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
  • space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
  1. .container {
  2.     width: 600px;
  3.     height: 600px;
  4.     display: grid;
  5.     grid-template-columns: repeat(3, 150px);
  6.     grid-template-rows: repeat(2, 150px);
  7.     gap: 1px;
  8.     grid-auto-flow: row;
  9.     grid-auto-rows: 200px;
  10.      /* 单元格内容对齐方式 */
  11.     place-items: end center;
  12.     /* 整个内容区域在容器里面对齐方式 */
  13.     place-content: center center;
  14. }

项目属性

grid-area 属性

grid-area属性指定项目放在哪一个区域
项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
四个值分别是：

  • grid-row-start属性：上边框所在的水平网格线
  • grid-column-start属性：左边框所在的垂直网格线
  • grid-row-end属性：下边框所在的水平网格线
  • grid-column-end属性：右边框所在的垂直网格线
  1. .item-1 {
  2.  grid-area: e;
  3.  /* 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号 */
  4.  grid-area: 1 / 1 / 3 / 3;
  5.  /* 结束行列编号可以省略，默认跨越1行1列 */
  6.  grid-area: 1 / 1;
  7. /* 例如跨越两行三列 */
  8.  grid-area: 1 / 1 / 3 / 4;
  9.  /* 还可以使用`span`关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格 */
  10.  /* 通常不关心结束位置，我们只想要知道跨越几行几列 */
  11.  grid-area: 1 / 1 / span 2 / span 3;
  12. }

place-self属性

  1. place-self: center center;
  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。
  • stretch：拉伸，占满单元格的整个宽度（默认值）。
    跟place-items属性的用法完全一致，但只作用于单个项目
    1. .container .item:nth-child(5){
    2.   place-self: center;
    3. }

repeat()函数

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下。

  1. .container {
  2.     display: grid;
  3.     grid-template-columns: repeat(3, 33.33%);
  4.     grid-template-rows: repeat(3, 33.33%);
  5. }

repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
repeat()重复某种模式也是可以的。

  1. grid-template-columns: repeat(2, 100px 20px 80px);

定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。

fr 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为”片段”）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

  1. .container {
  2.             display: grid;
  3.             grid-template-columns: 1fr 2fr;
  4.         }

  1. .container {
  2.             display: grid;
  3.             grid-template-columns:  repeat(3,1fr);
  4.             grid-template-rows:  repeat(3,1fr);
  5.         }

fr可以与绝对长度的单位结合使用，这时会非常方便。

  1. .container {
  2.             display: grid;
  3.             grid-template-columns: 150px 1fr 2fr;
  4.             grid-template-rows: repeat(3, 1fr);
  5.             gap: 1px;
  6.         }

表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。

  1. .container {
  2.         /* 转为网格容器进行布局 */
  3.         display: grid;
  5.         border: 1px solid #000;
  6.         padding: 0.5em;
  8.         /* 1. 设置轨道的列宽 */
  9.         /* grid-template-columns: auto auto auto; */
  11.         /* 要求,第二列是第一列和第三的宽度的2倍,这个功能用auto是无法实现 */
  12.         /* grid-template-columns: 1fr 3fr 1fr; */
  14.         /* grid-template-columns: 25% 50% 25%; */
  15.         /* grid-template-columns: 20% 60% 20%; */
  16.         grid-template-columns: 8em 1fr 2fr 100px;
  17.         /* 先计算出固定的值: 8*16 + 100 = ? */
  18.         /* 总宽度 - 已知的固定宽度(8*16 + 100) = 100% */
  19.         /* 第2列,分到1/3, 第3列分到2/3 */
  21.         /* 2. 设置田轨道的行高 */
  22.         grid-template-rows: 5em 5em;
  24.         /* 3. 设置轨道间的间隙 */
  25.         gap: 0.5em;
  26.       }

auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

  1. .container {
  2.     display: grid;
  3.     grid-template-columns: repeat(*auto-fill*, 100px);
  4. }

表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。

minmax()函数

产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

minmax(100px, 1fr)表示中间的列宽不小于100px，不大于1fr。

auto 关键字

auto关键字表示由浏览器自己决定长度。

  1. grid-template-columns: 100px auto 100px;

第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

  1. grid-template-columns: auto auto auto;

三列平均分配占满浏览器

  1. .container {
  2.         /* 转为网格容器进行布局 */
  3.         display: grid;
  5.         border: 1px solid #000;
  6.         padding: 0.5em;
  8.         /* 1. 设置轨道的列宽 */
  9.         /* grid-template-columns: 10em 10em 10em; */
  11.         /* 1. repeat() */
  12.         /* grid-template-columns: repeat(3, 10em); */
  13.         /* 第二个参数支持多个值 */
  14.         /* grid-template-columns: repeat(3, 10em 2em);
  15.         grid-template-columns: 10em 2em 10em 2em 10em 2em; */
  16.         /* grid-template-columns: repeat(3, 1fr); */
  18.         /* 2. minmax() */
  19.         /* grid-template-columns: 1fr 2fr 1fr; */
  20.         /* 第二个设置一个最小值 */
  21.         grid-template-columns: 1fr minmax(20em, 2fr) 1fr;
  23.         /* 2. 设置田轨道的行高 */
  24.         grid-template-rows: 5em 5em;
  26.         /* 3. 设置轨道间的间隙 */
  27.         gap: 0.5em;
  28.       }

网格容器/网格项目/网格单元/网格轨道/轨道间距

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>网格容器/网格项目/网格单元/网格轨道/轨道间距</title>
  9.     <style>
  10.         /* 1.网格容器：由若干个矩形网格单元构成
  11.         2.网格项目：网格容器的子元素，必须放在网格单元中
  12.         3.网格单元：有"单元格"和"网格区域"二种表现形式
  13.         4.网格轨道：由多个网格单元组成，根据排列方向有"行轨"和"列轨"之分
  14.         5.轨道间距：容器中轨道之间的间距，有"行轨间距"和"列轨间距" */
  15.         /* 网格容器 */
  17.         .container {
  18.             border: 1px solid #000;
  19.             padding: 0.5em;
  20.             /* flex中子元素默认为行内(inline)元素，grid中子元素默认为块(block)元素 */
  21.             display: grid;
  22.             /* 1.设置轨道的列宽 */
  23.             /* 设置一个3列2行的布局空间 */
  24.             grid-template-columns: auto;
  25.             grid-template-columns: 10em 10em 10em;
  26.             /* 2.设置轨道的行高 */
  27.             grid-template-rows: auto;
  28.             grid-template-rows: 5em 5em;
  29.             /* 3.设置轨道的间距 */
  30.             /* gap: 水平 垂直 */
  31.             gap: 0.5em 1em;
  32.             gap: 0.5em 0.5em;
  33.             /* gap: 0.5em 0.5em;可简写gap: 0.5em; */
  34.             gap: 0.5em;
  35.         }
  36.         /* 网格项目：网格容器中的"子元素"（不能是孙元素），与flex是一样的 */
  38.         .container>.item {
  39.             /* 默认生成一列N行的容器（N就是项目的数量） */
  40.             background-color: pink;
  41.             border: 1px solid #000;
  42.             padding: 0.5em;
  43.         }
  44.     </style>
  45. </head>
  47. <body>
  48.     <div class="container">
  49.         <span class="item">item1</span>
  50.         <span class="item">item2</span>
  51.         <span class="item">item3</span>
  52.         <span class="item">item4</span>
  53.         <span class="item">item5</span>
  54.         <span class="item">item6</span>
  55.     </div>
  56. </body>
  58. </html>

模拟bootstrap中的12列栅格布局组件

  1.         /* 初始化 */
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.             box-sizing: border-box;
  6.         }
  7.         body {
  8.             width: 100vw;
  9.             height: 100vh;
  10.             display: grid;
  11.             place-content: center;
  12.         }
  13.         .container {
  14.             min-width: 80vw;
  15.             display:  grid;
  16.             gap: 0.5em;
  17.         }
  18.         .container > .row {
  19.             display: grid;
  20.             grid-template-columns: repeat(12,1fr);
  21.             min-height: 3em;
  22.             gap: 0.5em;
  23.         }
  24.         .container > .row >.item{
  25.             background: lightcyan;
  26.             padding: 1em;
  27.             text-align: center;
  28.             /* background-color: lightcyan; */
  29.             border: 1px solid;
  30.             /* border-radius: 5px; */
  31.         }
  32.         .col-12 {
  33.             grid-area: auto / span 12;
  34.         }
  35.         .col-11 {
  36.             grid-area: auto / span 11;
  37.         }
  38.         .col-10 {
  39.             grid-area: auto / span 10;
  40.         }
  41.         .col-9 {
  42.             grid-area: auto / span 9;
  43.         }
  44.         .col-8 {
  45.             grid-area: auto / span 8;
  46.         }
  47.         .col-7 {
  48.             grid-area: auto / span 7;
  49.         }
  50.         .col-6 {
  51.             grid-area: auto / span 6;
  52.         }
  53.         .col-5 {
  54.             grid-area: auto / span 5;
  55.         }
  56.         .col-4 {
  57.             grid-area: auto / span 4;
  58.         }
  59.         .col-3 {
  60.             grid-area: auto / span 3;
  61.         }
  62.         .col-2 {
  63.             grid-area: auto / span 2;
  64.         }
  65.         .col-1 {
  66.             grid-area: auto / span 1;
  67.         }
  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>模拟bootstrap/layui的12列栅格布局组件</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.     <div class="container">
  12.         <!-- 一等份 -->
  13.         <!-- 栅格布局分为二步：
  14.         1.先创建一个行
  15.         2.在行中进行列的划分 -->
  16.         <div class="row">
  17.             <span class="item col-12">12列</span>
  18.         </div>
  19.         <!-- 二等分 -->
  20.         <div class="row">
  21.             <span class="item col-6">6列</span>
  22.             <span class="item col-6">6列</span>
  23.         </div>
  24.         <!-- 三等分 -->
  25.         <div class="row">
  26.             <span class="item col-4">4列</span>
  27.             <span class="item col-4">4列</span>
  28.             <span class="item col-4">4列</span>
  29.         </div>
  30.         <!-- 四等分 -->
  31.         <div class="row">
  32.             <span class="item col-3">3列</span>
  33.             <span class="item col-3">3列</span>
  34.             <span class="item col-3">3列</span>
  35.             <span class="item col-3">3列</span>
  36.         </div>
  37.         <!-- 十二等分 -->
  38.         <div class="row">
  39.             <span class="item col-1">1列</span>
  40.             <span class="item col-1">1列</span>
  41.             <span class="item col-1">1列</span>
  42.             <span class="item col-1">1列</span>
  43.             <span class="item col-1">1列</span>
  44.             <span class="item col-1">1列</span>
  45.             <span class="item col-1">1列</span>
  46.             <span class="item col-1">1列</span>
  47.             <span class="item col-1">1列</span>
  48.             <span class="item col-1">1列</span>
  49.             <span class="item col-1">1列</span>
  50.             <span class="item col-1">1列</span>
  51.         </div>
  52.         <!-- 左中右三列，左右相同，中间不同 -->
  53.         <div class="row">
  54.             <span class="item col-3">3列</span>
  55.             <span class="item col-6">6列</span>
  56.             <span class="item col-3">3列</span>
  57.         </div>
  58.     </div>
  59. </body>
  60. </html>

使用封装好的grid布局组件来写一个圣杯布局 代码

  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="grid.css">
  9.     <style>
  10.         .row:nth-of-type(2){
  11.             height: 80vh;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <!-- 通用三列布局 -->
  17.     <div class="container">
  18.         <!-- 页眉 -->
  19.         <div class="row">
  20.             <div class="item col-12 header">header</div>
  21.         </div>
  22.         <!-- 主体 -->
  23.         <div class="row">
  24.             <div class="item col-2 header">left</div>
  25.             <div class="item col-8 header">main</div>
  26.             <div class="item col-2 header">right</div>
  27.         </div>
  28.         <!-- 页脚 -->
  29.         <div class="row">
  30.             <div class="item col-12 header">footer</div>
  31.         </div>
  32.     </div>
  33. </body>
  34. </html>

仿写php中文网首页

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>grid仿php.cn首页</title>
  9.     <link rel="stylesheet" href="css/php.css">
  10. </head>
  12. <body>
  13.     <!-- 页眉 -->
  14.     <header>
  15.         <div class="logo">
  16.             <a href="http://" target="_blank" title="php中文网"></a>
  17.         </div>
  18.         <ul class="top-navs">
  19.             <li>
  20.                 <a href="#" class="item">首页</a>
  21.             </li>
  22.             <li>
  23.                 <a href="#" class="item">视频教程</a>
  24.             </li>
  25.             <li>
  26.                 <a href="#" class="item">入门教程</a>
  27.             </li>
  28.             <li>
  29.                 <a href="#" class="item">社区问答</a>
  30.             </li>
  31.             <li>
  32.                 <a href="#" class="item">技术文章</a>
  33.                 <span></span>
  34.             </li>
  35.             <li>
  36.                 <a href="#" class="item">编程词典</a>
  37.                 <span></span>
  38.             </li>
  39.             <li>
  40.                 <a href="#" class="item">资源下载</a>
  41.                 <span></span>
  42.             </li>
  43.             <li>
  44.                 <a href="#" class="item">工具下载</a>
  45.                 <span></span>
  46.             </li>
  47.             <li>
  48.                 <a href="#" class="item">PHP培训</a>
  49.                 <span>新</span>
  50.             </li>
  52.         </ul>
  53.         <div class="user-card-box">
  54.             <img src="https://img.php.cn/upload/avatar/000/524/683/603603465c46e400.jpg" height="40" width="40">
  55.         </div>
  56.     </header>
  59.     <!-- 主体顶部区 -->
  60.     <div class="main-top">
  61.         <!-- 侧边菜单 -->
  62.         <ul class="menus">
  63.             <li class="item">
  64.                 <h5>php开发</h5>
  65.                 <h5>></h5>
  66.             </li>
  67.             <li class="item">
  68.                 <h5>前端开发</h5>
  69.                 <h5>></h5>
  70.             </li>
  71.             <li class="item">
  72.                 <h5>服务端开发</h5>
  73.                 <h5>></h5>
  74.             </li>
  75.             <li class="item">
  76.                 <h5>移动开发</h5>
  77.                 <h5>></h5>
  78.             </li>
  79.             <li class="item">
  80.                 <h5>数据库</h5>
  81.                 <h5>></h5>
  82.             </li>
  83.             <li class="item">
  84.                 <h5>服务器运维&下载</h5>
  85.                 <h5>></h5>
  86.             </li>
  87.             <li class="item">
  88.                 <h5>在线工具箱</h5>
  89.                 <h5>></h5>
  90.             </li>
  91.             <li class="item">
  92.                 <h5>常用类库</h5>
  93.                 <h5>></h5>
  94.             </li>
  95.         </ul>
  96.         <!-- 顶部菜单 -->
  97.         <ul class="navs">
  98.             <li>
  99.                 <div>
  100.                     <a href="">PHP头条</a>
  101.                     <h6>新</h6>
  102.                 </div>
  103.             </li>
  104.             <li>
  105.                 <div>
  106.                     <a href="">独孤九贱</a>
  107.                     <h6></h6>
  108.                 </div>
  109.             </li>
  110.             <li>
  111.                 <div>
  112.                     <a href="">学习路线</a>
  113.                     <h6>新</h6>
  114.                 </div>
  115.             </li>
  116.             <li>
  117.                 <div>
  118.                     <a href="">在线工具</a>
  119.                     <h6></h6>
  120.                 </div>
  121.             </li>
  122.             <li>
  123.                 <div>
  124.                     <a href="">趣味课堂</a>
  125.                     <h6>新</h6>
  126.                 </div>
  127.             </li>
  128.             <li>
  129.                 <div>
  130.                     <a href="">社区问答</a>
  131.                     <h6></h6>
  132.                 </div>
  133.             </li>
  134.             <li>
  135.                 <div>
  136.                     <a href="">课程直播</a>
  137.                     <h6></h6>
  138.                 </div>
  139.             </li>
  140.             <li>
  141.                 <input type="text" placeholder="输入关键字搜索">
  143.             </li>
  144.         </ul>
  145.         <!-- 轮播图 -->
  146.         <div class="slider">
  147.             <img src="https://img.php.cn/upload/article/000/000/001/6034a327aef30703.png" alt="">
  148.         </div>
  149.         <!-- 底部的课程推荐 -->
  150.         <ul class="course">
  151.             <li>
  152.                 <a href=""><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""></a>
  153.             </li>
  154.             <li>
  155.                 <a href=""><img src="https://www.php.cn/static/images/index_php_item2_.png?1" alt=""></a>
  156.             </li>
  157.             <li>
  158.                 <a href=""><img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt=""></a>
  159.             </li>
  160.             <li>
  161.                 <a href=""><img src="https://www.php.cn/static/images/index_php_new4.jpg?1" alt=""></a>
  162.             </li>
  163.         </ul>
  164.     </div>
  167.     <!-- 广告区 -->
  168.     <div class="index_ad_top">
  169.         <a href="">
  170.             <img src="https://img.php.cn/upload/article/000/000/001/6034a36c9c07c118.png" alt="">
  171.         </a>
  172.     </div>
  173.     <!-- 头条 -->
  174.     <div class="headline">
  175.         <div class="article">
  176.             <div class="panel-title">头条</div>
  177.             <ul>
  178.                 <li>
  179.                     <a href="">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a>
  180.                 </li>
  181.                 <li>
  182.                     <a href="">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a>
  183.                 </li>
  184.                 <li>
  185.                     <a href="">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a>
  186.                 </li>
  187.                 <li>
  188.                     <a href="">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a>
  189.                 </li>
  190.                 <li>
  191.                     <a href="">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a>
  192.                 </li>
  193.                 <li>
  194.                     <a href="">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a>
  195.                 </li>
  196.                 <li>
  197.                     <a href="">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a>
  198.                 </li>
  199.                 <li>
  200.                     <a href="">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a>
  201.                 </li>
  202.                 <li>
  203.                     <a href="">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a>
  204.                 </li>
  205.                 <li>
  206.                     <a href="">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a>
  207.                 </li>
  208.                 <li>
  209.                     <a href="">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a>
  210.                 </li>
  211.             </ul>
  212.         </div>
  213.         <div class="course">
  214.             <div class="panel-title">最新课程</div>
  215.             <ul>
  216.                 <li>
  217.                     <a href="">
  218.                         <img src="https://img.php.cn/upload/course/000/000/013/6049da2b3898c385.jpg" alt="">
  219.                         <div class="php-course-intro">
  220.                             <h3><i>初级</i>php8，我来也</h3>
  221.                         </div>
  222.                     </a>
  223.                 </li>
  224.                 <li>
  225.                     <a href="">
  226.                         <img src="https://img.php.cn/upload/course/000/000/013/6049da2b3898c385.jpg" alt="">
  227.                         <div class="php-course-intro">
  228.                             <h3><i>初级</i>php8，我来也</h3>
  229.                         </div>
  230.                     </a>
  231.                 </li>
  232.                 <li>
  233.                     <a href="">
  234.                         <img src="https://img.php.cn/upload/course/000/000/013/6049da2b3898c385.jpg" alt="">
  235.                         <div class="php-course-intro">
  236.                             <h3><i>初级</i>php8，我来也</h3>
  237.                         </div>
  238.                     </a>
  239.                 </li>
  240.                 <li>
  241.                     <a href="">
  242.                         <img src="https://img.php.cn/upload/course/000/000/013/6049da2b3898c385.jpg" alt="">
  243.                         <div class="php-course-intro">
  244.                             <h3><i>初级</i>php8，我来也</h3>
  245.                         </div>
  246.                     </a>
  247.                 </li>
  248.                 <li>
  249.                     <a href="">
  250.                         <img src="https://img.php.cn/upload/course/000/000/013/6049da2b3898c385.jpg" alt="">
  251.                         <div class="php-course-intro">
  252.                             <h3><i>初级</i>php8，我来也</h3>
  253.                         </div>
  254.                     </a>
  255.                 </li>
  256.                 <li>
  257.                     <a href="">
  258.                         <img src="https://img.php.cn/upload/course/000/000/013/6049da2b3898c385.jpg" alt="">
  259.                         <div class="php-course-intro">
  260.                             <h3><i>初级</i>php8，我来也</h3>
  261.                         </div>
  262.                     </a>
  263.                 </li>
  265.             </ul>
  266.         </div>
  267.         <div class="manual">
  268.             <div class="panel-title">常用手册</div>
  269.             <ul>
  270.                 <li>
  271.                     <img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg" alt="">
  272.                     <p>php手册Linux手册ThinkPHP6.0CI手册大全</p>
  273.                 </li>
  274.                 <li>
  275.                     <img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg" alt="">
  276.                     <p>php手册Linux手册ThinkPHP6.0CI手册大全</p>
  277.                 </li>
  278.                 <li>
  279.                     <img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg" alt="">
  280.                     <p>php手册Linux手册ThinkPHP6.0CI手册大全</p>
  281.                 </li>
  282.                 <li>
  283.                     <img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg" alt="">
  284.                     <p>php手册Linux手册ThinkPHP6.0CI手册大全</p>
  285.                 </li>
  286.                 <li>
  287.                     <img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg" alt="">
  288.                     <p>php手册Linux手册ThinkPHP6.0CI手册大全</p>
  289.                 </li>
  290.                 <li>
  291.                     <img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg" alt="">
  292.                     <p>php手册Linux手册ThinkPHP6.0CI手册大全</p>
  293.                 </li>
  294.             </ul>
  295.         </div>
  296.     </div>
  298.     <!-- 课程列表区 -->
  299.     <div class="main-courses">
  300.         <div class="title">
  301.             <div>
  302.                 <\>
  303.             </div>
  304.             <h2>php入门精品课程</h2>
  305.             <div>
  306.                 <\>
  307.             </div>
  308.         </div>
  309.         <ul class="course-list">
  310.             <li>
  311.                 <a href="">
  312.                     <img src="https://www.php.cn/static/images/index_learn_first.jpg" alt="">
  313.                 </a>
  314.             </li>
  315.             <li>
  316.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a>
  317.                 <div class="php-course-intro">
  318.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  319.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  320.                 </div>
  321.                 <div class="php-course-bottom">
  322.                     <span>1W+次播放</span>
  323.                 </div>
  324.             </li>
  325.             <li>
  326.                 <a href=""><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt=""></a>
  327.                 <div class="php-course-intro">
  328.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  329.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  330.                 </div>
  331.                 <div class="php-course-bottom">
  332.                     <span>1W+次播放</span>
  333.                 </div>
  334.             </li>
  335.             <li>
  336.                 <a href=""><img src="https://img.php.cn/upload/course/000/126/153/5ab346fc62ce4221.jpg" alt=""></a>
  337.                 <div class="php-course-intro">
  338.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  339.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  340.                 </div>
  341.                 <div class="php-course-bottom">
  342.                     <span>1W+次播放</span>
  343.                 </div>
  344.             </li>
  345.             <li>
  346.                 <a href=""><img src="https://img.php.cn/upload/course/000/126/153/5acc118f11d6b969.jpg" alt=""></a>
  347.                 <div class="php-course-intro">
  348.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  349.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  350.                 </div>
  351.                 <div class="php-course-bottom">
  352.                     <span>1W+次播放</span>
  353.                 </div>
  354.             </li>
  355.             <li>
  356.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6e0d2b744633.jpg" alt=""></a>
  357.                 <div class="php-course-intro">
  358.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  359.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  360.                 </div>
  361.                 <div class="php-course-bottom">
  362.                     <span>1W+次播放</span>
  363.                 </div>
  364.             </li>
  365.             <li>
  366.                 <a href=""><img src="https://img.php.cn/upload/course/000/001/120/5a9fb97057b15707.jpeg" alt=""></a>
  367.                 <div class="php-course-intro">
  368.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  369.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  370.                 </div>
  371.                 <div class="php-course-bottom">
  372.                     <span>1W+次播放</span>
  373.                 </div>
  374.             </li>
  375.             <li>
  376.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24019911a24370.jpg" alt=""></a>
  377.                 <div class="php-course-intro">
  378.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  379.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  380.                 </div>
  381.                 <div class="php-course-bottom">
  382.                     <span>1W+次播放</span>
  383.                 </div>
  384.             </li>
  385.             <li>
  386.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg" alt=""></a>
  387.                 <div class="php-course-intro">
  388.                     <h3><i>高级</i>编程学习方法分享直播公益课</h3>
  389.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  390.                 </div>
  391.                 <div class="php-course-bottom">
  392.                     <span>1W+次播放</span>
  393.                 </div>
  394.             </li>
  395.             <li>
  396.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5cecd27a4348b582.jpg" alt=""></a>
  397.                 <div class="php-course-intro">
  398.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  399.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  400.                 </div>
  401.                 <div class="php-course-bottom">
  402.                     <span>1W+次播放</span>
  403.                 </div>
  404.             </li>
  405.             <li>
  406.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt=""></a>
  407.                 <div class="php-course-intro">
  408.                     <h3><i>中级</i>编程学习方法分享直播公益课</h3>
  409.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  410.                 </div>
  411.                 <div class="php-course-bottom">
  412.                     <span>1W+次播放</span>
  413.                 </div>
  414.             </li>
  415.             <li>
  416.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a13c87351613730.jpg" alt=""></a>
  417.                 <div class="php-course-intro">
  418.                     <h3><i>中级</i>编程学习方法分享直播公益课</h3>
  419.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  420.                 </div>
  421.                 <div class="php-course-bottom">
  422.                     <span>1W+次播放</span>
  423.                 </div>
  424.             </li>
  425.             <li>
  426.                 <a href=""><img src="https://img.php.cn/upload/course/000/171/829/5b19ef2990649817.jpg" alt=""></a>
  427.                 <div class="php-course-intro">
  428.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  429.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  430.                 </div>
  431.                 <div class="php-course-bottom">
  432.                     <span>1W+次播放</span>
  433.                 </div>
  434.             </li>
  435.             <li>
  436.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d240300be85b731.jpg" alt=""></a>
  437.                 <div class="php-course-intro">
  438.                     <h3><i>高级</i>编程学习方法分享直播公益课</h3>
  439.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  440.                 </div>
  441.                 <div class="php-course-bottom">
  442.                     <span>1W+次播放</span>
  443.                 </div>
  444.             </li>
  445.         </ul>
  446.     </div>
  447.     <!-- 课程列表区 -->
  448.     <div class="main-courses">
  449.         <div class="title">
  450.             <div>
  451.                 <\>
  452.             </div>
  453.             <h2>php入门精品课程</h2>
  454.             <div>
  455.                 <\>
  456.             </div>
  457.         </div>
  458.         <ul class="course-list">
  459.             <li>
  460.                 <a href="">
  461.                     <img src="https://www.php.cn/static/images/index_learn_first.jpg" alt="">
  462.                 </a>
  463.             </li>
  464.             <li>
  465.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a>
  466.                 <div class="php-course-intro">
  467.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  468.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  469.                 </div>
  470.                 <div class="php-course-bottom">
  471.                     <span>1W+次播放</span>
  472.                 </div>
  473.             </li>
  474.             <li>
  475.                 <a href=""><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt=""></a>
  476.                 <div class="php-course-intro">
  477.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  478.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  479.                 </div>
  480.                 <div class="php-course-bottom">
  481.                     <span>1W+次播放</span>
  482.                 </div>
  483.             </li>
  484.             <li>
  485.                 <a href=""><img src="https://img.php.cn/upload/course/000/126/153/5ab346fc62ce4221.jpg" alt=""></a>
  486.                 <div class="php-course-intro">
  487.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  488.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  489.                 </div>
  490.                 <div class="php-course-bottom">
  491.                     <span>1W+次播放</span>
  492.                 </div>
  493.             </li>
  494.             <li>
  495.                 <a href=""><img src="https://img.php.cn/upload/course/000/126/153/5acc118f11d6b969.jpg" alt=""></a>
  496.                 <div class="php-course-intro">
  497.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  498.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  499.                 </div>
  500.                 <div class="php-course-bottom">
  501.                     <span>1W+次播放</span>
  502.                 </div>
  503.             </li>
  504.             <li>
  505.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6e0d2b744633.jpg" alt=""></a>
  506.                 <div class="php-course-intro">
  507.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  508.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  509.                 </div>
  510.                 <div class="php-course-bottom">
  511.                     <span>1W+次播放</span>
  512.                 </div>
  513.             </li>
  514.             <li>
  515.                 <a href=""><img src="https://img.php.cn/upload/course/000/001/120/5a9fb97057b15707.jpeg" alt=""></a>
  516.                 <div class="php-course-intro">
  517.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  518.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  519.                 </div>
  520.                 <div class="php-course-bottom">
  521.                     <span>1W+次播放</span>
  522.                 </div>
  523.             </li>
  524.             <li>
  525.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24019911a24370.jpg" alt=""></a>
  526.                 <div class="php-course-intro">
  527.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  528.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  529.                 </div>
  530.                 <div class="php-course-bottom">
  531.                     <span>1W+次播放</span>
  532.                 </div>
  533.             </li>
  534.             <li>
  535.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg" alt=""></a>
  536.                 <div class="php-course-intro">
  537.                     <h3><i>高级</i>编程学习方法分享直播公益课</h3>
  538.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  539.                 </div>
  540.                 <div class="php-course-bottom">
  541.                     <span>1W+次播放</span>
  542.                 </div>
  543.             </li>
  544.             <li>
  545.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5cecd27a4348b582.jpg" alt=""></a>
  546.                 <div class="php-course-intro">
  547.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  548.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  549.                 </div>
  550.                 <div class="php-course-bottom">
  551.                     <span>1W+次播放</span>
  552.                 </div>
  553.             </li>
  554.             <li>
  555.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt=""></a>
  556.                 <div class="php-course-intro">
  557.                     <h3><i>中级</i>编程学习方法分享直播公益课</h3>
  558.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  559.                 </div>
  560.                 <div class="php-course-bottom">
  561.                     <span>1W+次播放</span>
  562.                 </div>
  563.             </li>
  564.             <li>
  565.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a13c87351613730.jpg" alt=""></a>
  566.                 <div class="php-course-intro">
  567.                     <h3><i>中级</i>编程学习方法分享直播公益课</h3>
  568.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  569.                 </div>
  570.                 <div class="php-course-bottom">
  571.                     <span>1W+次播放</span>
  572.                 </div>
  573.             </li>
  574.             <li>
  575.                 <a href=""><img src="https://img.php.cn/upload/course/000/171/829/5b19ef2990649817.jpg" alt=""></a>
  576.                 <div class="php-course-intro">
  577.                     <h3><i>初级</i>编程学习方法分享直播公益课</h3>
  578.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  579.                 </div>
  580.                 <div class="php-course-bottom">
  581.                     <span>1W+次播放</span>
  582.                 </div>
  583.             </li>
  584.             <li>
  585.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d240300be85b731.jpg" alt=""></a>
  586.                 <div class="php-course-intro">
  587.                     <h3><i>高级</i>编程学习方法分享直播公益课</h3>
  588.                     <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
  589.                 </div>
  590.                 <div class="php-course-bottom">
  591.                     <span>1W+次播放</span>
  592.                 </div>
  593.             </li>
  594.         </ul>
  595.     </div>
  596.     <!-- 页脚 -->
  597.     <footer>
  598.         <div class="left">
  599.             <ul class="bottom-navs">
  600.                 <li><a href="">网站首页</a></li>
  601.                 <li><a href="">PHP视频</a></li>
  602.                 <li><a href="">PHP代码</a></li>
  603.                 <li><a href="">PHP手册</a></li>
  604.                 <li><a href="">词条</a></li>
  605.                 <li><a href="">手记</a></li>
  606.                 <li><a href="">编程词典</a></li>
  607.                 <li><a href="">php培训</a></li>
  608.             </ul>
  609.             <div>
  610.                 php中文网：公益在线php培训，帮助PHP学习者快速成长！
  611.             </div>
  612.             <div>
  613.                 Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏州跃动光标网络科技有限公司 |
  614.             </div>
  615.         </div>
  616.         <div class="right">
  617.             <img src="" alt="">
  618.             <img src="" alt="">
  619.         </div>
  620.     </footer>
  621. </body>
  623. </html>
  1. /* 初始化 */
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  9. li {
  10.     list-style: none;
  11. }
  13. a {
  14.     color: #444;
  15.     text-decoration: none;
  16. }
  18. body {
  19.     background-color: #f3f5f7;
  20. }
  23. /* -------------------- */
  26. /* 页眉 */
  28. header {
  29.     min-width: 1200px;
  30.     height: 60px;
  31.     color: #999;
  32.     background-color: black;
  33.     margin-bottom: 30px;
  34.     display: flex;
  35.     align-items: center;
  36. }
  38. header .logo a {
  39.     display: inline-block;
  40.     height: 60px;
  41.     width: 140px;
  42.     background: url(https://www.php.cn/static/images/logo.png) no-repeat center center;
  43.     background-size: 100%;
  44. }
  46. header .top-navs {
  47.     margin-left: 30px;
  48.     text-align: center;
  49.     line-height: 60px;
  50.     height: 60px;
  51.     display: flex;
  52. }
  54. header .top-navs li {
  55.     margin-right: 10px;
  56.     height: 60px;
  57.     cursor: pointer;
  58. }
  60. header .top-navs li a {
  61.     display: inline-block;
  62.     padding: 0 20px;
  63.     width: 100%;
  64.     height: 100%;
  65.     font-size: 14px;
  66.     color: rgba(255, 255, 255, .7);
  67. }
  69. header>ul.top-navs>li a:hover {
  70.     color: rgb(255, 255, 255);
  71.     border-bottom: 5px solid lightgreen;
  72. }
  74. header>ul.top-navs>li a:hover+span {}
  76. header>ul.top-navs>li:first-of-type {
  77.     background-color: #444;
  78. }
  80. header>ul.top-navs>li {
  81.     position: relative;
  82. }
  84. header>ul.top-navs>li:nth-last-of-type(3) span,
  85. header>ul.top-navs>li:nth-last-of-type(4) span,
  86. header>ul.top-navs>li:nth-last-of-type(5) span {
  87.     width: 0;
  88.     height: 0;
  89.     border-style: solid dashed dashed;
  90.     border-color: #fff transparent transparent;
  91.     border-top-color: rgb(255, 255, 255);
  92.     overflow: hidden;
  93.     cursor: pointer;
  94.     transition: all .2s;
  95.     -webkit-transition: all .2s;
  96.     position: absolute;
  97.     top: 50%;
  98.     right: 3px;
  99.     margin-top: -3px;
  100.     border-width: 6px;
  101.     border-top-color: rgba(255, 255, 255, .7);
  102. }
  104. header>ul.top-navs>li:nth-last-of-type(2) span {
  105.     position: absolute;
  106.     background-color: red;
  107.     width: 8px;
  108.     height: 8px;
  109.     border-radius: 50%;
  110.     top: 24px;
  111.     right: 6px;
  112. }
  114. header>ul.top-navs>li:last-of-type span {
  115.     position: absolute;
  116.     background-color: red;
  117.     width: 20px;
  118.     height: 20px;
  119.     top: 3px;
  120.     left: 70px;
  121.     line-height: 20px;
  122.     font-size: 12px;
  123.     color: #fff;
  124.     border-radius: 4px;
  125. }
  127. header .user-card-box {
  128.     margin-right: 20px;
  129.     margin-left: auto;
  130. }
  132. header .user-card-box img {
  133.     border-radius: 50%;
  134.     vertical-align: middle;
  135. }
  138. /* 页脚 */
  140. footer {
  141.     display: grid;
  142.     grid-auto-flow: column;
  143.     grid-template-columns: 1000px 200px;
  144.     height: 160px;
  145.     color: #666;
  146.     background-color: #444;
  147.     place-items: center start;
  148.     place-content: center;
  149. }
  151. footer>div.left {
  152.     min-width: 1200px;
  153.     height: 160px;
  154.     display: grid;
  155.     place-items: center start;
  156.     margin: 0 auto;
  157. }
  159. footer .left>ul.bottom-navs {
  160.     display: grid;
  161.     grid-auto-flow: column;
  162.     gap: 10px;
  163.     margin-left: 10px;
  164. }
  166. footer .left>ul.bottom-navs>li>a {
  167.     color: white;
  168. }
  171. /* 主体顶部区 */
  173. .main-top {
  174.     height: 540px;
  175.     width: 1200px;
  176.     margin-bottom: 30px;
  177.     display: grid;
  178.     grid-template-columns: 200px 1fr;
  179.     grid-template-rows: 60px 1fr 120px;
  180.     margin: auto;
  181.     background: #fff;
  182.     box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  183. }
  186. /* 左侧导航区 */
  188. .main-top>.menus {
  189.     grid-area: span 3;
  190.     background-color: #444;
  191.     color: #ccc;
  192.     border-radius: 10px 0 0 10px;
  193.     padding: 10px 0 10px 0;
  194.     display: grid;
  195.     grid-template-columns: 1fr;
  196.     place-items: center space-between;
  197. }
  199. .main-top>.menus>li.item {
  200.     display: grid;
  201.     grid-auto-flow: column;
  202.     grid-template-columns: 1fr 20px;
  203.     padding: 0 0px 0 20px;
  204.     place-items: center start;
  205. }
  207. .main-top>.menus>li.item:hover {
  208.     background-color: #666;
  209.     cursor: pointer;
  210. }
  213. /* 顶部的导航区 */
  215. .main-top>ul.navs {
  216.     display: grid;
  217.     grid-template-columns: repeat(8, 103px) 1fr;
  218.     place-items: center;
  219.     border-radius: 0 10px 0 0;
  220. }
  222. .main-top>ul.navs>li>div {
  223.     font-size: 14px;
  224.     display: grid;
  225.     grid-auto-flow: column;
  226.     place-items: center center;
  227. }
  229. .main-top>ul.navs>li>div>h6 {
  230.     width: 20px;
  231.     color: white;
  232.     text-align: center;
  233.     margin-left: 2px;
  234.     border-radius: 3px;
  235.     padding: 3px;
  236. }
  238. .main-top>ul.navs>li:nth-of-type(1)>div>h6 {
  239.     background-color: orangered;
  240. }
  242. .main-top>ul.navs>li:nth-of-type(3)>div>h6 {
  243.     background-color: #444;
  244. }
  246. .main-top>ul.navs>li:nth-of-type(5)>div>h6 {
  247.     background-color: orange;
  248. }
  250. .main-top>ul.navs>li:last-of-type {
  251.     background-color: #eee;
  252.     height: 36px;
  253.     width: 250px;
  254.     /* 搜索 */
  255.     place-self: center start;
  256.     padding: 0px 10px 0 10px;
  257. }
  259. .main-top>ul.navs>li:last-of-type>input {
  260.     height: 36px;
  261.     border: none;
  262.     outline: none;
  263.     background-color: #eee;
  264. }
  267. /* 轮播图 */
  269. .main-top .slider {
  270.     background-color: #ccc;
  271. }
  274. /* 底部的课程推荐 */
  276. .main-top>ul.course>li>a>img {
  277.     background-color: violet;
  278.     cursor: pointer;
  279.     border-radius: 10px;
  280. }
  282. .main-top>ul.course {
  283.     grid-template-columns: repeat(4, 1fr);
  284.     gap: 10px;
  285.     padding: 10px;
  286.     display: grid;
  287.     border-radius: 0 0 10px 0;
  288. }
  291. /* -------------------- */
  294. /* 广告 */
  296. .index_ad_top {
  297.     width: 1200px;
  298.     margin: 20px auto;
  299.     text-align: center;
  300. }
  303. /* 头条 */
  305. .headline {
  306.     margin: 0 auto;
  307.     width: 1200px;
  308.     height: 416px;
  309.     /* border: 1px solid red; */
  310.     display: grid;
  311.     grid-template-columns: 300px 620px 260px;
  312.     gap: 10px;
  313. }
  315. .headline>div {
  316.     background-color: #fff;
  317.     border-radius: 10px;
  318. }
  320. .headline .panel-title {
  321.     height: 35px;
  322.     line-height: 35px;
  323.     font-weight: 550;
  324.     margin: 0 15px 10px;
  325.     border-bottom: 1px dotted #e9e9e9;
  326.     color: #343535;
  327.     font-size: 14px;
  328. }
  330. .headline .article ul {
  331.     padding: 0 10px;
  332. }
  334. .headline .article ul li {
  335.     white-space: nowrap;
  336.     overflow: hidden;
  337.     text-overflow: ellipsis;
  338.     margin-bottom: 10px;
  339.     font-size: 14px;
  340. }
  342. .headline .course ul {
  343.     padding: 20px;
  344.     display: grid;
  345.     grid-template-columns: repeat(3, 170px);
  346.     grid-template-rows: repeat(2, 140px);
  347.     place-items: center;
  348.     place-content: center;
  349.     gap: 20px;
  350. }
  352. .headline .course ul li {
  353.     width: 172px;
  354.     height: 140px;
  355.     float: left;
  356.     margin: 10px 10px 20px 10px;
  357.     box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  358.     position: relative;
  359.     border-radius: 8px;
  360.     box-sizing: border-box;
  361.     overflow: hidden;
  362.     position: relative;
  363. }
  365. .headline .course ul .php-course-intro {
  366.     padding: 5px;
  367.     border-radius: 8px;
  368.     box-sizing: border-box;
  369.     position: absolute;
  370.     transition: top .5s;
  371.     top: 70px;
  372.     height: 144px;
  373.     width: 100%;
  374.     background: #fff;
  375. }
  377. .headline .course ul .php-course-intro h3 {
  378.     padding-left: 10px;
  379.     font-size: 14px;
  380.     max-height: 40px;
  381.     overflow: hidden;
  382.     line-height: 21px;
  383. }
  385. .headline .course img {
  386.     width: 170px;
  387.     height: 90px;
  388.     margin-bottom: 10px;
  389.     border-radius: 8px;
  390. }
  392. .headline .course ul li:hover .php-course-intro {
  393.     top: 45px;
  394. }
  396. .headline .manual ul {
  397.     padding: 20px;
  398. }
  400. .headline .manual ul li {
  401.     display: grid;
  402.     grid-template-columns: 30% 70%;
  403.     margin-bottom: 10px;
  404. }
  406. .headline .manual ul li p {
  407.     font-size: 14px;
  408. }
  410. .headline .manual ul img {
  411.     width: 40px;
  412.     margin-right: 10px;
  413. }
  416. /* -------------------- */
  419. /* 主体课程 */
  421. .main-courses {
  422.     width: 1200px;
  423.     height: 646px;
  424.     padding: 15px;
  425.     background-color: #fff;
  426.     margin: 30px auto;
  427.     display: grid;
  428.     grid-template-rows: 50px 1fr;
  429.     gap: 20px;
  430.     border-radius: 10px;
  431.     box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  432. }
  435. /* 标题 */
  437. .main-courses .title {
  438.     color: #444;
  439.     display: grid;
  440.     grid-auto-flow: column;
  441.     grid-template-columns: 1fr 200px 1fr;
  442.     place-items: center center;
  443.     margin-bottom: 30px;
  444.     font-weight: bolder;
  445. }
  447. .main-courses .title>div:first-of-type {
  448.     color: blue;
  449.     place-self: center end;
  450. }
  452. .main-courses .title>div:last-of-type {
  453.     color: blue;
  454.     place-self: center start;
  455. }
  457. .main-courses .course-list {
  458.     display: grid;
  459.     grid-template-columns: repeat(5, 217px);
  460.     grid-template-rows: repeat(3, 172px);
  461.     gap: 20px;
  462. }
  464. .main-courses .course-list>li>a>img {
  465.     width: 100%;
  466.     border-radius: 10px;
  467. }
  469. .main-courses .course-list>li:first-of-type {
  470.     grid-area: span 2;
  471. }
  473. .main-courses .course-list>li {
  474.     overflow: hidden;
  475.     position: relative;
  476.     border-radius: 8px;
  477.     box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  478. }
  480. .main-courses .course-list>li .php-course-intro {
  481.     border-radius: 8px;
  482.     box-sizing: border-box;
  483.     position: absolute;
  484.     padding: 0 20px;
  485.     transition: top .5s;
  486.     top: 90px;
  487.     height: 144px;
  488.     width: 100%;
  489.     background: #fff;
  490. }
  492. .main-courses .course-list>li:hover .php-course-intro {
  493.     top: 10px;
  494.     cursor: pointer;
  495. }
  497. .php-course-intro h3 {
  498.     margin: 0;
  499.     padding: 16px 0 6px;
  500.     font-size: 14px;
  501.     max-height: 40px;
  502.     overflow: hidden;
  503.     color: #07111b;
  504.     line-height: 21px;
  505. }
  507. .php-course-intro h3 i {
  508.     margin-top: 2px;
  509.     margin-right: 4px;
  510.     padding: 2px;
  511.     font-style: normal;
  512.     font-size: 12px;
  513.     color: #fff;
  514.     line-height: 12px;
  515.     border-radius: 1px;
  516.     background-color: #93999f;
  517. }
  519. .php-course-intro p {
  520.     color: #93999f;
  521.     font-size: 12px;
  522.     height: 40px;
  523.     overflow: hidden;
  524.     line-height: 20px;
  525. }
  527. .php-course-bottom {
  528.     position: absolute;
  529.     padding: 0 20px;
  530.     bottom: 0;
  531.     box-sizing: border-box;
  532.     width: 100%;
  533.     height: 42px;
  534.     background-color: #fff;
  535.     color: #93999f;
  536.     font-size: 12px;
  537.     line-height: 36px;
  538. }

效果图：



预览地址：http://easys.ltd/php/

总结

轨道排列方式：”行优先” 和 “列优先”
grid-auto-flow: row;
grid-auto-flow: column;

隐式轨道： 新项目显示的轨道
隐式轨道的行高：grid-auto-rows
隐式轨道的列宽：grid-auto-columns

grid-area: 设置任何一个项目所在的网格单元的区域
格式” grid-area:行起始编号 / 列起始编号 / 行结束编号 / 列结束编;”

place-items: 所有项目在网格单元中的对齐方式
格式”place-items: center center; “

place-self: 某一个项目在网格单元中的对齐方式
格式”place-self: center center; “

place-content: 项目在网格容器中的对齐方式（垂直方向 水平方向）
格式”place-content: 垂直方向 水平方向”
将所有项目做为一个整体在容器中对齐：place-content: center center;
将所有项目打散成独立个体在容器中设置对齐方式：place-content: space-around space-evenly;

命名式的网格区域：
使用grid-area关联(header { grid-area: header; }) 再使用grid-template-areas来分配( grid-template-areas: ‘header header header’ ‘. main .’ ‘footer footer footer’;)

Correcting teacher：天蓬老师天蓬老师

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