项目四任务二 制作“传统建筑”页面

大美中国制作“传统建筑”页面CONTENTS目录网格布局第一部分网格容器及其属性第二部分网格项及其属性第三部分网格线的定义和使用第四部分网格布局第一部分网格布局网格布局是一种强大的二维布局系统，它允许开发者通过行和列的组合来创建复杂的页面布局。在网格布局中，容器被划分为多个网格轨道，包括行轨道和列轨道。这些轨道通过网格线来分隔，网格线可以是水平的也可以是垂直的。网格项可以被放置在这些轨道形成的单元格中，并且可以跨越多个单元格。网格布局的概念1.应用场景响应式网页布局复杂页面布局仪表盘布局电商产品展示页面网格容器及其属性第二部分网格布局网格布局是CSS3引入的一种强大的布局系统，它允许开发者通过行和列的组合来创建复杂的页面布局。在网格布局中，有两个核心概念：网格容器（gridcontainer）和网格项（griditem）。网格布局网格容器是应用了display:grid;（块级网格容器）或display:inline-grid;（行内网格容器）样式的元素。它是网格布局的基础，定义了网格布局的范围，并且可以包含多个网格项。网格容器内部的元素（网格项）会按照网格布局的规则进行排列。网格布局1 <divclass="container"style="display:grid;">2

<divclass="item">Item1</div>3

<divclass="item">Item2</div>4

<divclass="item">Item3</div>5 </div>以上代码创建了一个容器网格布局网格布局提供了一套丰富的属性，可以创建复杂的网页布局。这些属性可以分为两大类：容器属性和项属性。容器属性用于定义网格的结构和布局，而项属性则用于控制网格项的位置和对齐。布局的容器属性是构建网格结构的基础，它们用来定义网格的尺寸、间隙、对齐方式以及自动布局的行为。网格布局属性属性值描述displaygrid将元素设置为块级网格容器。inline-grid将元素设置为行内网格容器。grid-template-columns固定宽度：具体的像素值、百分比等单位。重复函数：使用repeat()函数重复创建多个相同的列轨道。定义网格的列轨道。grid-template-rows定义网格的行轨道。grid-template-areas字符串数组这个属性用于给网格项指定一个区域名称。表4-2-1容器属性网格布局属性属性值描述grid-column-gap固定宽度：具体的像素值、百分比等单位。设置网格列之间的间隔。grid-row-gap设置网格行之间的间隔。justify-itemsstart、end、center控制网格项在列轨道中的水平对齐方式。align-items控制网格项在行轨道中的垂直对齐方式。grid-auto-columns具体的像素值定义自动创建的列轨道的大小。grid-auto-rows定义自动创建的行轨道的大小。网格项及其属性第三部分网格项及其属性网格项是网格布局的基本单元，是网格容器的直接子元素。只有直接子元素才能成为网格项，孙元素不会自动成为网格项。网格项属性允许开发者对单个网格项进行更精细的控制，包括它们的位置、对齐方式和排序。网格项及其属性1.grid-column和grid-row这些属性用于指定网格项跨越的列或行。可以通过指定起始线和结束线来定义网格项的位置。例如，grid-column:1/3;表示网格项从第1条列线到第3条列线，共跨2列。网格项及其属性2.grid-area这个属性用于将网格项放置到指定的网格区域。如果网格区域已经通过grid-template-areas定义，可以直接使用区域名称来定位网格项。例如，grid-area:header;将网格项放置在定义为“header”的网格区域内。网格项及其属性3.order这个属性定义了网格项的排序顺序，数值越小，网格项在网格容器中排列得越靠前。例如，order:2;将网格项的顺序设置为2，使其排在其他默认顺序（通常是1）之后的网格项前面。网格线的定义及使用第四部分网格线的定义及使用网格线是网格轨道之间的分隔线。网格线可以是水平的（行线）或垂直的（列线），它们用于定义网格项的位置。每条网格线都有一个编号，从1开始，水平网格线的编号表示行线，垂直网格线的编号表示列线。此外，还可以给网格线命名，以便更直观地引用它们。网格线的定义及使用列线的编号是从左到右，