登录  /  注册
首页 > 博客列表 > 【布局】教你用Grid网格布局详细教程入门笔记+实战案例
博主信息
博文 128
粉丝 9
评论 5
访问量 233898
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
【布局】教你用Grid网格布局详细教程入门笔记+实战案例
　一纸荒凉* Armani
原创
2081人浏览过

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’;)

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录