《HTML5+CSS3网页制作》课件-模块七 网页布局

模块七网页布局任务1CSS3布局基础网页制作CSSHTML知识准备-----CSS3布局基础实战演练——制作“愚公移山”网页CSS3布局基础0201进阶训练—制作“中国传统文化”网页03动手实践--制作中国共产党的百年大事记04

1.掌握网页布概念、普通文档流、元素的类型及转换

2.了解CSS3多列布局CSS3布局基础学习目标：

1.

.弘扬优秀传统文化鼓励学生深入了解和展现中华优秀传统文化的精髓，增强民族自豪感和文化自信。

2.培养对中国科技发展历程及重大成就的深刻认识，增强学生的民族自豪感和国家认同感，理解科技进步对国家实力和国际地位的重要意义。

3.培养创新精神，鼓励学生创造性地解决问题，设计更加人性化、高效的信息交互界面，体现创新思维。CSS3布局基础思政目标：

21知识准备—什么是布局1知识准备--在网页设计与前端开发中，布局是指如何在网页上组织和排列元素（如文本、图像、视频等）。这涉及到使用CSS（层叠样式表）来控制元素的大小、位置以及相互之间的关系。换而言之，就是在制作网页时，为实现页面结构清晰、有条理，将网页里所呈现的内容按功能或者其他需求进行合理划分、并且对于每一部分通过调整对齐方式、间距调等来实现对网页的“排版”。

21知识准备—什么是布局1知识准备--网页内容区域是指网页中主体内容所在的区域，一般在浏览器窗口中水平居中显示。。

21知识准备—什么是布局1知识准备--页面中的模块最简单的页面布局，主要由头部（header）、导航（nav）、焦点图（banner）、内容（content）、页面底部（footer）五部分组成

21知识准备—普通文档流1知识准备--普通文档流（NormalFlow或称为文档流、标准流）是指HTML元素按照其在HTML代码中的顺序从上往下，从左往右，以及CSS的默认显示特性和位置规则进行排列的方式。普通文档流是网页布局的基础，理解和掌握它是进行更复杂布局设计前提。1.块级元素（BlockElements）块级元素默认情况下会独占一行，从上到下依次堆叠。2.行内元素（InlineElements）行内元素则在一行内从左到右排列，直到该行排满后再换到下一行。3.浮动（Floats）当元素被设置为浮动，它们会从文档流中“浮动”出来，浮动元素虽然改变了位置，但仍会影响文档流中的其他元素。4.定位（Positioning）绝对定位（position:absolute;）和固定定位（position:fixed;）的元素会完全脱离文档流，不再影响也不受文档流中其他元素的影响。

21知识准备—元素的类型及转换1知识准备--1.块级元素（BlockElements）块级元素（BlockElements）在HTML中是指那些在页面布局中以独立的行显示，并且可以设置宽度、高度、对齐等属性的元素。这类元素通常用于结构化文档内容，如段落、标题、列表、表格、分区块等。它们的特征包括：（1）独占一行：每个块级元素都会新起一行开始显示，其后的元素也会另起一行显示。（2）可设置宽高：可以直接设置宽度（width）和高度（height）。（3）支持内外边距：可以应用margin（外边距）和padding（内边距）属性来调整元素之间的空间和内容与边框的距离。（4）默认宽度：如果没有指定宽度，块级元素通常会占据其父容器的全部可用宽度。常见的块级元素有div、p、h1-h6、li、table、from、blockquote。

21知识准备—元素的类型及转换1知识准备--下面通过案例古诗词春晓7-1演示，块级元素的特性。案例分析：通过对于标题使用h1元素，其他段落使用p元素，为了方便区分，为每一个元素设置一个不同的背景颜色，然后通过CSS设置盒子的宽高，内外边距的内容。对于类名为two的元素，并未设置其宽度高度则会有自定义的宽度和高度，同时每个元素会另起一行。

21知识准备—元素的类型及转换1知识准备--2.行内元素（InlineElements）这类元素通常用于文本内容或者小的语义化标签中，它们的行内元素（InlineElements）在HTML中是指那些不独占一行显示，而是与其他行内元素在同一行内顺序排特点包括：（1）同行显示：行内元素不会强迫其周围的元素换行，多个行内元素可以在同一行内从左到右排列，直到该行空间不足以容纳下一个元素。（2）宽度和高度：默认情况下，行内元素的宽度只足够包裹其内容，不能直接设置宽度和高度。它们的尺寸由内容决定。（3）部分支持内外边距：虽然可以设置水平方向的内外边距（左右margin和padding），但垂直方向的内外边距（上下margin和padding）在某些情况下可能不会影响周围元素的布局，因为行内元素的特性是紧密排列。（4）默认行为：行内元素不会引起上下空白行的出现，适合用来标记文本中的某些特殊部分或添加小图标等。常见的行内元素有span、a、strong、em、input、button、select等。

21知识准备—元素的类型及转换1知识准备--下面以div元素为例通过案7-2演示，块级元素的特性。案例分析：在7-1案例基础上，创建文件7-2.html将“风雨声”和“知多少”分别放入一个span元素中，为了方便区分，将第一个span元素设置id名为a，第一个span元素设置id名为b,并设置不同背景颜色，并试着为id为a的元素这是宽度、高度和外边距等属性。从图中可以看出，行内元素不会单独占一行，并且无法单独设置宽度和高度，对于外边距在网页中也只有左右进行了设置。

21知识准备—元素的类型及转换1知识准备--3.行内块状元素（Inline-BlockElements）这是一种结合了块级元素和行内元素特性的类型，它像行内元素一样在行内排列，但同时可以设置宽度和高度，如<img>。下面通过案例7-3演示设置行内块元素的特性。案例分析：使用两个p元素将静夜思故事放入网页中，并使用两个img元素在p元素内插入图片，为p元素设计一个背景颜色。同时将第一个img标签设置id名为one。为id为one的img标签设置宽度和高度。对于img元素，虽然不会独占一行，但是可以为其设置宽度和高度。

21知识准备—元素的类型及转换1知识准备--4.元素之间的转换网页是由多个块元素和行内元素构成的盒子排列而成的。当想实现行内元素具有块元素的某些特性或者需要块元素具有行内元素的某些特性，就进行元素类型的转换。在CSS中，使用display属性可以实现HTML元素布局类型转换。其格式如下：display:属性值;

21知识准备—元素的类型及转换1知识准备--下面通过案例7-4演示，使用display属性实现元素转换的用法。案例分析：继续以7-1案例为基础，不改变原来的HTML结构及CSS设置的样式，继续选择类名为b的sapn元素，使用display属性设置为块元素，并设置宽度和高度。经过元素转换后，span标签也可以独占一行，设置宽度和高度样式。

21知识准备—CSS3多列1知识准备--CSS多列布局是一种使文本内容能够跨多列显示的技术，模仿了报纸和杂志的布局风格，提高了内容的可读性和页面的视觉效果。实现CSS多列布局的关键属性

21知识准备—CSS3多列1知识准备--下面通过案例7-5进行演示多列属性的用法。案例分析：在网页中使用一个p元素,将古诗《短歌行》放入其中。使用clumn属性对p元素中的列数、列与列之间的间距，列边框进行设置。在案例7-5中，p元素内的内容会被自动分为三列，每列间有40像素的间隔，并且列间有一条1像素宽的虚线分隔线。

实战演练—制作“愚公移山”网页2本次任务主要是利用布局中CSS多列属性、元素转换等知识点实现愚公移山故事介绍网页的制作。

实战演练—制作“愚公移山”网页2愚公移山网页的制作思路为首先用一个div元素作为容器，在容器里面标题使用h1元素，图片使用img元素插入，故事内容每一段使用p元素，并在所有p元素一起放入一个div容器中。整体制作可以分为以下三步：首先制作“愚公移山网页”的HTML结构代码；其次编写基础CSS代码；最后设置网页布局。

实战演练—制作“愚公移山”网页21、制作“愚公移山”HTML结构代码

实战演练—制作“愚公移山”网页22、编写“愚公移山”基础CSS代码选择body元素对网页整体设置基础样式。然后来设置最外面的div容器，为最外面的容器设置边框和背景颜色。通过类名选择器单独选中最外面的div元素，设置边框背景颜色同时设置内边距和外边距。最后来这是每一个单独元素的样式，设置标题的字体颜色，居中对齐，设置段落的字体大小及首行缩进效果。

实战演练—制作“愚公移山”网页23、设置“愚公移山”设置网页布局将图片的img元素转换为块元素，并为它设置高度、宽度，并使用外边距属性将图片设置为自适应居中。将故事内容分为两栏，首先需要通过类名选择器单独选中只有p元素的那个div元素，然后使用column属性设置两列，实线绿色边框。完成最终效果。

进阶训练—制作“中国传统节日”阅读平台3本次任务主要是利用布局中CSS多列属性、break-inside等知识点实现模拟以“中国传统节日”为主题，展示一系列关于中国传统节日摘要的在线阅读平台，

进阶训练—制作“中国传统节日”阅读平台3

break-insidebreak-inside是一个CSS属性，用于控制页面分栏、打印或区域断行时元素内部的断行行为。这个属性对于改善打印样式、多列布局的连续性和响应式设计特别有用。break-inside属性可以有多个值，以适应不同的布局需求。

进阶训练—制作“中国传统节日”阅读平台3

“中国传统节日”网页制作思路为，用一个类名为“header”的div元素作为容器，用来进行顶部布局。再用一个类名为“context”的div元素作为容器，用来进行网页中内容部分的布局，然后在这个div元素中再设置三个类名叫做“article-summary”div容器，实现网页文章内容。整体制作可以分为以下四步：首先制作“中国传统节日”的HTML结构代码；其次编写基础CSS代码；接着通过盒子模型设置顶部样式；最后通过多列布局及break-inside属性实现多列展示。

进阶训练—制作“中国传统节日”阅读平台3

1、制作“中国传统节日”阅读平台HTML结构代码

进阶训练—制作“中国传统节日”阅读平台3

2、编写“中国传统节日”基础CSS代码首先清空html每个元素默认的样式。即将用到的元素使用font-family属性设置网页统一字体，将margin属性和padding属性设置为0；其次设置h1的字体大小为28像素，并使用margin属性设置为0来清空外边距。接着将h2的字体大小为24像素，字体颜色为黄色，外边距上方设置为30像素。最后设置h3的字体大小为20像素，字体粗细为bold，并使用margin属性清空外边距。

进阶训练—制作“中国传统节日”阅读平台3

3、设置“中国传统节日”设置顶部样式在html中，将头部内容放入了一个类名为“header”的div容器中，接着，可以通过类名选择器选中头部设置相应样式。首先，设置使用background-color属性设置背景颜色为金色，使用color属性设置字体颜色为白色，使用padding设置内边距为20像素，使用text-align设置文本对齐方式为居中对齐。

进阶训练—制作“中国传统节日”阅读平台3

4、实现“中国传统节日”阅读平台多列展示类名为content的div元素为承载文章摘要的容器，实现多列展示，首先使用column-count属性设置为3来定义容器内部的内容分为三列，接着设置

column-gap属性为30px来指定列与列之间的间距，增加内容的可读性和美观度。并将margin属性设置在页面上居中显示，设置padding属性为：020px为容器内部两侧添加20像素的内边距，最后设置max-width为1200px;

添加

max-height属性为600px限制容器的最大高度。类名为article-summary的div的容器通过

break-inside:avoid-column;

确保文章摘要不会被分隔在不同的列里，保证阅读连贯性。4动手实践—制作“中国共产党的百年大事记”网页4设计并制作如图所示的“中国共产党的百年大事记”网页。设置网页的头部布局和将事记的具体介绍实现多列布局排列。小结知识准备——CSS3布局基础实战演练——制作“愚公移山”网页进阶训练——制作“中国传统文化”网页动手实践——制作中国共产党的百年大事记模块七网页布局任务2元素的浮动网页制作CSSHTML知识准备-----元素的浮动实战演练——制作“婚礼策划机构首页”网页元素的浮动0201进阶训练—制作“中国女排阵容”网页03动手实践—制作“红色文化传承”为主题网页04

1.掌握元素浮动的概念

2.熟练地为元素应用浮动样式。元素的浮动学习目标：

1..弘扬优秀传统文化鼓励学生深入了解和展现中华优秀传统文化的精髓，增强民族自豪感和文化自信。

2.培养对中国科技发展历程及重大成就的深刻认识，增强学生的民族自豪感和国家认同感，理解科技进步对国家实力和国际地位的重要意义。

3.培养创新精神，鼓励学生创造性地解决问题，设计更加人性化、高效的信息交互界面，体现创新思维。元素的浮动思政目标：

21知识准备—overflow属性1知识准备--overflow属性是当盒子内的元素超出盒子自身的大小时用于溢出内容的显示方式的属性。这个属性可以应用于块级元素、内联块元素或者绝对定位元素。其格式如下所示。选择器{overflow:属性值;}

21知识准备—overflow属性1知识准备--下面通过案例7-6案例演示overflow不同属性值的效果。案例分析：使用一个p元素将爱莲说的内容放入进去，并为p元素设置一个宽度为200像素，高度为200像素的盒子，为了方便区分，设置一个背景颜色。接下来使用overflow属性分别设置为visible、hidden、scroll、auto。

21知识准备—元素的浮动1知识准备--所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。选择器{float:属性值;}

21知识准备—元素的浮动1知识准备--下面通过案例7-7演示浮动的用法。案例分析：设置四个div容器，并将div设置长为70像素，宽为70像素，将后两个div元素设置相同的类名a,并为div盒子设置背景颜色及30像素的外边距，便于观察效果。然后使用float属性实现浮动效果。图中盒子1、盒子2为浮动未设置浮动效果，div默认标准文档流会每个独占一行，盒子3、盒子4为添加浮动效果，此时div跳出默认文档流，并列布局。

21知识准备—元素的浮动1知识准备--但是在使用浮动属性时，也会出现一些问题。创建案例7-8来演示浮动产生的一种影响。案例分析：在案例7-7的基础上，对于原来的两个类名为a的div分别设置类名one和two,然后现在只设置类名为one的div进行靠左浮动，为了方便观察，将其背景颜色改为绿色。

21知识准备—元素的浮动1知识准备--创建案例7-9来演示浮动产生的第二种影响。案例分析：使用一个类名叫做out的div作为父容器，同时在里面添加一个类名叫做out的div子容器。对于父容器只设置背景颜色，和1像素的边框用来观察。在子容器中设置不同的背景颜色，然后使用浮动属性，靠左浮动。

21知识准备—元素的浮动1知识准备--创建案例7-9来演示浮动产生的第二种影响。案例分析：使用一个类名叫做out的div作为父容器，同时在里面添加一个类名叫做out的div子容器。对于父容器只设置背景颜色，和1像素的边框用来观察。在子容器中设置不同的背景颜色，然后使用浮动属性，靠左浮动。

21知识准备—清除浮动1知识准备--由于浮动元素不再占用原文档流中的位置，所以会对页面中其他元素的排版产生影响，如果要避免这种影响，就需要对元素清除浮动。对于清除浮动的方法，常见的有以下三种。

21知识准备—清除浮动1知识准备--1.运用clear属性清除浮动Clear属性的书写格式如下所示。选择器{clear:属性值;}

21知识准备—清除浮动1知识准备--创建案例7-10来演示使用clear属性来清除浮动。案例分析：在案例7-9产生浮动影响的基础上，首先在父容器里继续添加一个类名叫做box01的div空容器，然后通过CSS设置box01使用clear属性。

21知识准备—清除浮动1知识准备--2.运用overflow属性清除浮动运用clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时，经常会遇到一些特殊的浮动影响。在网页设计中，overflow属性通常不是用来直接清除浮动（float）的，但可以通过一种间接的方式来解决由浮动元素导致的父元素高度塌陷问题。当一个容器内的元素设置了浮动（如float:left;或float:right;），且没有设置高度或者高度不够时，容器可能无法包围住这些浮动元素，导致高度塌陷。此时，可以通过为该容器添加overflow属性的一个值来触发BFC（块格式化上下文），从而使得容器能够正确包含浮动的子元素，间接达到清除浮动的效果。

21知识准备—清除浮动1知识准备--下面通过案例7-11来演示使用overflow清除浮动的影响。案例分析：在案例7-9产生浮动影响的基础上，使用overflow属性，而设置overflow是在受影响的元素中设置，及在案例中为类名为out的div父元素。

21知识准备—清除浮动1知识准备--3.伪对象清除::after伪对象是CSS中的一个非常有用的特性，它允许你在元素的内容之后插入生成的内容，并且可以应用样式。这对于不需要额外标记就能实现某些布局效果或清除浮动等方面特别有用。但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。

21知识准备—清除浮动1知识准备--下面通过案例7-12演示::after伪对象的清除浮动的用法。案例分析：以7-4产生的浮动影响为基础，使用伪对象对产生影响的元素，即类名为out的元素。设置相应属性，

实战演练—制作“婚礼策划机构首页”网页2本次任务主要是利用布局中浮动属性、不同方法清除浮动等知识点实现婚礼策划机构网页的制作。

实战演练—制作“愚公移山”网页2“婚礼策划机构首页”的制作思路为，用一个类名为“header”的div元素作为容器，用来进行顶部布局。再用一个类名为“nav”的div元素作为容器，并在容器中使用ul无序列表元素，用来进行网页中导航的布局。再用一个类名为“content”的div元素作为容器，用来进行网页中内容部分的布局，里面再分别加入一个类名为“section”的div容器作为文本介绍部分，加入两个类名为“highlight”的div元素作为展示机构的亮点部分。最后，再用一个类名为“footer”的div元素，用来进行网页的底部内容布局。整体制作可以分为以下四步：首先制作“婚礼策划机构首页”的HTML结构代码；其次编写基础CSS代码；接着通过元素浮动分别设置导航栏中无序列表的并列样式和亮点部分内容并列展示样式；最后通过清除浮动实现清除受浮动产生的影响。。

实战演练—制作“婚礼策划机构首页”网页21、制作“婚礼策划机构首页”HTML结构代码首先，设置网页的默认字体，接着，清空HTML中各个元素默认的样式，同时设置所有标签中文本的默认对齐方式为居中。为头部内容设置背景颜色为粉色，内边距为15像素。设置无序列表的背景颜色为灰色。为a元素设置为块元素，字体颜色设置为白色，设置内边距，使用伪链接的hover设置背景颜色为深灰色。为类名highlight的div容器，设置元素的宽度为父容器宽度的45%，为元素设置外边距，这里使元素之间有1%的间距。使用box-sizing属性设置值为border-box。最后设置插入的图片，为底部内容设置背景颜色为粉色，内边距为20像素。实战演练—制作“婚礼策划机构首页”网页22、编写“婚礼策划机构首页”基础CSS代码

实战演练—制作“婚礼策划机构首页”网页23、设置浮动实现并列样式为了实现导航栏内容和网页中的主要介绍部分并列展示，将当行每一个列表项即li元素和类名为highlight的div元素设置靠左浮动。

实战演练—制作“婚礼策划机构首页”网页24、清除浮动为了清除使用浮动属性产生的布局影响，将受到li浮动影响的ul父容器使用overflow属性消除。将受到类名为highlight的div容器浮动影响的底部内容使用clear进行消除。

进阶训练—制作“中国女排阵容”网页3本次任务主要是利用布局中浮动属性实现了一个具有三列布局的网页，专门用于展示中国女排阵容信息，同时包含侧边栏和底部版权信息的“中国女排阵容”网页的制作。

进阶训练—制作“中国女排阵容”网页3

网页布局网页布局的设计对于创建美观且功能性的网站至关重要。单列、双列和三列布局是最常见的几种网页布局类型，每种都有其适用场景和设计特点。网页布局的设计对于创建美观且功能性的网站至关重要。单列、双列和三列布局是最常见的几种网页布局类型，每种都有其适用场景和设计特点。下面详细介绍这三种布局及其实现方法：

进阶训练—制作“中国女排阵容”网页3

1.单列布局(SingleColumnLayout)单列布局是最简单的布局形式，整个页面的内容按照从上到下的顺序排列在一个单一的列中。这种布局适合于博客、新闻网站或任何需要线性阅读体验的页面。

进阶训练—制作“中国女排阵容”网页3

2.双列布局(TwoColumnLayout)双列布局通常分为主内容区和侧边栏，适用于需要额外信息展示或导航的网站，如电子商务网站、论坛等。

进阶训练—制作“中国女排阵容”网页3

3.三列布局(ThreeColumnLayout)三列布局包括两个侧边栏和一个主内容区，适合于内容丰富的网站，如新闻门户、社区论坛等。

进阶训练—制作“中国女排阵容”网页3

页面结构包含了头部、两个侧边栏、主要内容区域和底部。头部仅包含标题。左侧边栏包含了一组相关赛事的链接，中间内容区域展示了多个卡片，每个卡片代表一个球员的信息。右侧边栏包含一组体育新闻的链接。最后，底部显示了版权信息。具体实现步骤可以分为以下几步：首先制作“中国女排阵容”网页的HTML结构代码；其次编写基础CSS代码；接着通过浮动属性实现网页三列布局划分，及网页整体布局样式。最后，为主要内容区域设置相关的展示卡片样式。

进阶训练—制作“中国女排阵容”网页3

1、制作“中国女排阵容”网页HTML结构代码

进阶训练—制作“中国女排阵容”网页3

2、设置CSS基本样式首先全局样式设置:对a,li,h1,h2,p等标签进行了默认样式重置，移除了它们的边距和填充，以及链接的下划线和列表项的样式。接着，设置头部样式:为类名为header的div元素设置顶部标题区域的样式，包括背景色为绿色、文字颜色为白色、内边距1rem和居中文本。设置侧边栏样式，即为类名叫做left-sidebar和.right-sidebar的div设置侧边栏的样式，包括宽度、背景色和顶部外边距。侧边栏中包含无序列表，用于展示链接。最后设置底部样式，将类名为footer的div元素设置了底部区域的样式，设置高度为50像素，上内边距为10像素设置背景颜色为绿色并将文本设置为居中显示。

进阶训练—制作“中国女排阵容”网页3

3、通过浮动属性实现网页三列布局划分网页整体布局样式在元素中，分别使用类名为.left-sidebar、content、right-sidebar的div容器来设置三列布局。使用浮动将三个容器并列展示。并且把主要内容区域的宽度设置为占网页的70%，其余每个为15%。同时，消除由于浮动，底部内容上移的影响，选择类名为footer的元素，使用clear属性清除浮动。最后设置运动员卡片样式，将类名为player-card的div容器定义球员信息卡片的样式，包括浮动布局让多个卡片并列样式、设置背景色为灰色、边框1像素、灰色实线、内外边距为15像素、外边距为27像素，宽度25%、高度自适应以及文本居中。在设置类名为player-card的容器下的img元素进一步设置了图片的大小和底部边距。进阶训练—制作“中国女排阵容”网页3

4、为主要内容区域设置相关的展示卡片样式4动手实践—制作以“红色文化传承”为主题的小型网页4设计一个以“红色文化传承”为主题的小型网页。这个网页旨在通过展示中国革命历史中的重要事件、英雄人物和红色遗址，来弘扬爱国主义精神和社会主义核心价值观。小结知识准备——元素的浮动实战演练——制作“婚礼策划机构首页”网页进阶训练——制作“中国女排阵容”网页动手实践——制作“红色文化传承”为主题网页模块七网页布局任务3元素的定位网页制作CSSHTML知识准备-----元素的定位实战演练——制作“旅游景点推荐网”banner元素的定位0201进阶训练—制作“个人博客首页”网页03动手实践—制作火灾防护宣传页面04

1.掌握元素的定位

2.能够为元素设置常见的定位模式元素的定位学习目标：

1.

.弘扬优秀传统文化鼓励学生深入了解和展现中华优秀传统文化的精髓，增强民族自豪感和文化自信。

2.培养对中国科技发展历程及重大成就的深刻认识，增强学生的民族自豪感和国家认同感，理解科技进步对国家实力和国际地位的重要意义。

3.培养创新精神，鼓励学生创造性地解决问题，设计更加人性化、高效的信息交互界面，体现创新思维。元素的定位思政目标：

21知识准备—元素的定位模式与边偏移1知识准备--1.定位模式（PositioningModes）在CSS中，元素的定位模式决定了元素如何在页面上放置。这主要通过position属性来控制，它有几种不同的值，每种值定义了不同的定位行为。position属性的书写格式如下所示。选择器{position:属性值;}

21知识准备—元素的定位模式与边偏移1知识准备--在CSS中，“边偏移”通常指的是元素相对于其定位上下文的位置调整，主要通过top、right、bottom和left这四个属性来实现。这些属性用于精确控制元素在页面上的位置，尤其在使用position属性设定为relative、absolute或fixed的元素时更为常见。

21知识准备—静态定位1知识准备--静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

21知识准备—相对定位1知识准备--相对定位是将元素相对于它原本在标准文档流中的位置进行定位。且原本在标准文档流中位置会被保留，不影响其他元素的位置变化。

21知识准备—相对定位1知识准备--下面通过案例7-16演示使用相对定位(position:relative;)来调整页面上元素的位置。案例分析：首先使用一个类名为father的div元素，其中包含三个子<div>元素，类名分别为child01、child02和child03。然后为每一个div设置相应的宽度、高度、背景颜色和边框等基本格式。并将父元素设置为外边距自动居中。接着对类名为chlid02的div元素使用相对位移属性，并设置边偏移距离左边150px,即向右移动150像素，距离顶部150像素即向下移动150像素。如图所示为设置偏移前后的效果。其中左边为移动前，右边为移动后。

21知识准备—绝对定位1知识准备--绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。

21知识准备—绝对定位1知识准备--下面通过案例7-17演示使用绝对定位(position:absolute;)来调整页面上元素的位置。案例分析：在案例7-16的基础上，保持原来基本样式不变，分别对不设置父元素定位和设置父元素定位，子元素绝对定位的效果进行演示。仅将子元素child02设置绝对定位，距离顶部100像素，距离左边150像素。150px100px150px100px原来的位置未保留

21知识准备—固定定位1知识准备--固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。。

21知识准备—固定定位1知识准备--下面通过案例7-18演示使用固定定位(position:fixed;)来调整页面上元素的位置。案例分析：还是以7-17案例为基础，保持各个div的宽度、高度、背景颜色和边框等基本样式，仅将父元素的高度设置为300像素，超出网页高度，可以滑动。然后将child02的定位设置为固定定位fixed,设置距离顶部位偏移为100像素，设置距离左边位偏移为150像素。150px150px

21知识准备—z-index层叠等级属性1知识准备--当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。下面通过案例7-19演示来演示定位元素发生重叠效果及解决方法。

21知识准备—z-index层叠等级属性1知识准备--案例分析：使用三个类名分别叫做child01、child02、child03三个div元素，同时设置宽度、高度、边框、背景颜色等基础样式，然后使用定位属性，分别类名为chlid01的div设置定位方式位绝对定位，位偏移距离顶部100像素，距离左边150像素。类名为chlid02的div设置定位方式位绝对定位，位偏移距离顶部105像素，距离左边155像素。类名为chlid03的div设置定位方式位绝对定位，位偏移距离顶部110像素，距离左边160像素。作为对比使用三个类名分别叫做child04、child05、child06三个div元素，同时设置宽度、高度、边框、背景颜色等基础样式，然后使用定位属性，分别类名为chlid04、child05、child06的div设置绝对定位并通过位偏移实现相同的重叠效果。将child04设置z-index:1。

实战演练—制作“旅游景点推荐网”banner2本次任务主要是利用浮动属性、清除浮动、定位属性等知识点完成“旅游景点推荐网”banner的制作，左侧展示精美的背景图和吸引人的广告语，右侧则简洁明了地介绍了网站提供的服务。

实战演练—制作“旅游景点推荐网”banner2首先，使用一个类名为bg-banner的div容器，用来设置通栏样式，然后设置类名为“banner"的div容器中，包含左侧的图文区域和右侧的服务介绍区域。左边的部分首先添加一个类名为left的div父容器为左侧整体布局，为其设置相应的样式，然后再使用一个类名为content-left的div子元素用于存放多个p标签的英文和中文标题、广告语。通过定位属性来调整左侧文本内容与左侧父容器之间的位置关系。右边区域同样添加一个类名为right的div父容器为右侧整体布局，为其设置相应的样式，然后再使用一个类名为content-right的div子元素用于存放多个服务介绍标题和图标列表，以及服务说明文本。具体实现步骤可以分为以下几步：首先制作“旅游景点推荐网页”banner的HTML结构代码；其次编写基础CSS代码；接着通过元素浮动和清除浮动效果实现元素的并列展示样式；最后通过定位属性，设置相应元素的位置。

实战演练—制作“旅游景点推荐网”banner21、制作HTML结构代码

实战演练—制作“旅游景点推荐网”banner22、编写基础CSS代码

首先为网页全局设置样式：设置body的字体、字号和颜色，重置全部元素默认的边距、填充、列表样式等。

接着为通栏即类名为定义bg_banner的div元素设置宽度背景色，类名为banner的div元素定义了宽度为1000px，高度为285px的容器，居中显示，使用overflow:hidden;防止内容溢出边界。最后设置左侧图文区域的基本样式，和右侧服务介绍区域基本样式。

实战演练—制作“旅游景点推荐网”banner23、使用浮动让元素并列，并清除浮动影响

首先将类名为left的div元素使用float靠左浮动，将类名为right的div元素使用float靠右浮动。实现并列布局。

然后为列表项li元素设置靠左浮动，实现列表项内图标并列样式。然后设置右外边距为12像素拉开图标与图标之间的距离。

最后使用.cl类添加额外的样式，如边距和行高，以确保布局正确。

实战演练—制作“旅游景点推荐网”banner24、使用定位属性调整元素位置为了使banner更美观，使用定位属性来调整内容的位置。在左侧图文区域即类名为left的div标签使用position:relative;使其成为相对定位的参考。而图文内容区域即类名为content_left的div元素使用position:absolute;进行绝对定位，相对于类名为left的容器定位，，位偏移距离顶部75像素，距离左侧45像素。在右侧服务介绍区域即类名为right的div元素同样使用position:relative;进行相对定位，.而内容区域即类名为content_right的div元素使用position:absolute;进行绝对定位，相对于类名为right的容器定位，位偏移距离顶部50像素，距离左侧30像素。

进阶训练—制作“个人博客首页”网页3使用HTML5新增布局元素及网页定位知识实现了一个基本的个人博客首页布局，包括头部导航、主内容区域和底部版权信息。其在浏览器中的效果图如图所示，并且滚动页面可以发现头部导航内容一致在页面固定位置，并且文章标题会在一定范围内也是固定不动的。

进阶训练—制作“个人博客首页”网页3

position:stickyposition:sticky:也是CSS中的一种定位机制，它结合了相对定位(position:relative;)和固定定位(position:fixed;)的特性，允许元素在滚动到视口内的特定位置时“粘贴”在视口的边缘。当元素的position属性设置为sticky时，它最初是按照相对定位(position:relative;)来定位的，即相对于其正常文档流中的位置。一旦元素滚动到视口内，且其上边缘或下边缘触及视口的边缘，元素就变成固定定位(position:fixed;)，并停留在视口的那个边缘位置，直到另一个元素完全覆盖它原本在文档流中的位置。

进阶训练—制作“个人博客首页”网页3

个人播客首页的制作思路为:使用header元素包含博客标题和导航菜单。使用Main元素包含两个主要部分分别使用一个section元素，设置id名为featured-post和recent-posts，分别展示最新文章和最近的文章列表。使用footer元素包含版权信息。在header元素中，使用h1元素显示博客标题，使用nav和a元素构建导航菜单。在id名为featured-post的元素中，使用article元素包装文章内容，包括标题、简介和阅读链接。在id名为recent-posts的元素中，使用ul元素和li元素创建文章列表，每个列表项包含一个文章标题链接。使CSS为每个元素设置相应的样式，并且通过CSS的浮动、绝对定位和百分比宽度，实现不同屏幕尺寸下的适配布局。具体实现步骤可以分为以下几步：首先使用HTML5新增的元素进行网页据，制作“个人播客首页”网页的HTML结构代码；其次编写基础CSS代码；接着通过元素浮动实现头部区域内容；最后通过定位属性，设置相应元素的距离位置。

进阶训练—制作“中国传统节日”阅读平台3

1、制作HTML结构代码

进阶训练—制作“中国传统节日”阅读平台3

2、编写基础CSS代码设定全局样式和元素默认样式。选择body元素设置全局字体为Arial、行高设置为1.6，这有助于提高文本的可读性，使段落间的间距更加舒适。文本颜色设置为深灰色（#333）。清空HTML元素的默认样式，设置margin和padding为0。同时，这里也去除a元素的下划线，即将text-decoration设置为none，以及无序列表的项目符号，即将list-style属性设置为none。

进阶训练—制作“中国传统节日”阅读平台3

3、通过元素浮动实现头部区域内容首先设置Header元素的背景颜色为绿色和内边距为1rem文本对齐属性text-align设置为居中对齐。接着为了与绿色背景形成鲜明对比，将标题h1元素设置字体颜色为白色。然后设置导航栏样式，设置nav元素内的a链接的颜色为白色。同时，通过margin属性在每个链接左右两侧添加了0.5rem的外边距。最后设置链接悬停效果：当鼠标悬停在nav元素内的a链接上时，链接文本下方会出现下划线。

进阶训练—制作“中国传统节日”阅读平台3

4、通过定位属性，设置相应元素的位置设置id名为featured-post的section元素、id名为recent-posts的section元素和footer元素三个部分的样式。设置footer元素的样式，设置背景色为浅灰色，使用text-align属性文本居中对齐，设置内边距为1rem。设置position属性为absolute，使footer变为绝对定位。设置bottom值为0将footer定位在页面底部。设置元素的宽100%，以填充整个屏幕宽度。4动手实践—制作火灾防护宣传页面4设计并制作如图所示火灾防护宣传页面。通过综合使用定位知识点。小结知识准备——元素的定位实战演练——制作“旅游景点推荐网”banner进阶训练——制作“个人博客首页”网页动手实践——制作火灾防护宣传页面模块七网页布局任务4CSSflex布局网页制作CSSHTML知识准备——CSSflex布局实战演练——制作“我的网上简历”网页CSSflex布局0201进阶训练——制作“保健常识”网页03动手实践——制作“购物网”网页04

掌握CSSflex布局相关规范CSSflex布局学习目标：1.弘扬优秀传统文化，鼓励学生深入了解和展现中华优秀传统文化的精髓，增强其民族自豪感和文化自信。2.激发学生对环境问题的关注，使其认识到每个人的行为对环境都有影响，鼓励学生积极参与环保活动，成为负责任的社会成员。3.培养学生对中国科技发展历程及重大成就的深刻认识，增强学生的民族自豪感和国家认同感，让学生理解科技进步对国家实力和国际地位的重要意义。CSSflex布局思政目标：

2flex是flexibleBox的缩写，意为"弹性布局"，是一种用于按行或按列布局元素的一维布局方法。flex容器中的弹性元素可以进行排列、对齐和分配空白空间。11知识准备--什么是flex

211知识准备--flex容器Flex容器与弹性盒子Flex容器是包含一个或多个弹性盒子的布局方式，通过display:flex;属性设置，允许子元素在主轴和侧轴上灵活排列和对齐。利用flex-grow、flex-shrink和flex-basis属性，可以精确控制弹性元素如何分配额外空间以及在空间不足时的收缩行为。flex-direction属性定义主轴的方向，而align-items和justify-content等属性则用于调整元素在主轴和侧轴上的对齐方式，实现多样化的布局效果。空间分配机制方向与对齐控制

211知识准备--flex容器flex容器包含两个轴，分别为主轴（mainaxis）和侧轴(crossaxis)

211知识准备--flex容器主轴的定义与作用主轴是CSSflex布局中用于排列弹性元素的主要方向，由flex-direction`属性决定，可以是水平或垂直。它决定了弹性元素在容器内的排列方式，对布局起着关键作用。侧轴的定义与作用侧轴是垂直于主轴的方向，主要用于控制弹性元素在垂直于主轴方向上的对齐方式。当主轴为水平时，侧轴就是垂直方向；当主轴为垂直时，侧轴就是水平方向。主轴与侧轴的关系主轴和侧轴共同决定了弹性元素在弹性容器内的布局和对齐方式。它们相互垂直，一个负责元素的排列方向，另一个负责元素的对齐方式，共同构成了完整的布局体系。010203211知识准备--flex-directionflex-direction属性指定了弹性元素是如何在弹性容器中布局的，定义了主轴的方向（正方向或反方向）。flex-direction:row|row-reverse|column|column-reverse;row（默认）表示flex

容器的主轴被定义为与文本方向相同，主轴起点和主轴终点与内容方向相同。row-reverse表现和row相同，但是置换了主轴起点和主轴终点。column表示flex

容器的主轴被定义为垂直于文本方向，主轴起点与主轴终点和书写模式的前后点相同column-reverse表现和column相同，但是置换了主轴起点和主轴终点。211知识准备--flex-wrapflex-wrap属性指定弹性元素单行显示还是多行显示。如果允许换行，这个属性控制行的堆叠方向。flex-wrap:nowrap|wrap|wrap-reverse;nowrap（默认值）：弹性元素被摆放到到一行，这可能导致flex容器溢出。wrap：弹性容器为多行，该情况下弹性元素溢出的部分会被放置到新行。wrap-reverse：和wrap的行为一样，但是方向会反转。211知识准备--flex-flowflex-flow属性是flex-direction和flex-wrap的简写。flex-flow:flex-direction

flex-wrap;flex-flow是flex-direction和flex-wrap属性的复合属性，两种属性之间用空格隔开，默认值为rownowrap。211知识准备--justify-contentjustify-content属性定义浏览器如何沿着弹性容器的主轴在弹性容器之间和周围分配空间。justify-content:flex-start|flex-end|center|space-between|space-around|space-evenly;flex-start（默认值）：元素紧密地排列在弹性容器的主轴起始侧。flex-end：弹性元素紧密地排列在弹性容器的主轴结束侧。center：弹性元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。space-between：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。space-around：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。space-evenly：弹性元素都沿着主轴均匀分布在指定的对齐容器中。相邻弹性元素之间的间距，主轴起始位置到第一个弹性元素的间距，主轴结束位置到最后一个弹性元素的间距，都完全一样。211知识准备--justify-content211知识准备--align-itemsalign-items属性控制弹性元素在侧轴上的对齐方式。align-items:stretch|flex-start|flex-end|center|baseline;stretch（默认值）：如果（多个）元素的组合大小小于容器的大小，其中自动调整大小的元素将等量增大，以填满容器，同时这些元素仍然保持其宽高比例的约束。flex-start：将弹性元素与flex容器的主轴起点或侧轴起点对齐。flex-end：将弹性元素与flex容器的主轴末端或侧轴末端对齐。baseline：所有弹性元素都对齐，以使它们的

flex容器基线对齐。距离其侧轴起点和基线之间最远的元素与行的侧轴起点对齐。center：弹性元素的外边距框在侧轴上居中对齐。如果弹性元素的侧轴尺寸大于flex容器，它将在两个方向上等距溢出。211知识准备--align-contentalign-content属性定义浏览器如何沿着弹性容器的侧轴在弹性容器之间和周围分配空间。align-content:stretch|flex-start|flex-end|center|space-between|space-around|space-evenly;stretch（默认值）：拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。flex-start：所有行从侧轴起点开始填充。第一行的侧轴起点边和容器的侧轴起点边对齐。接下来的每一行紧跟前一行。flex-end：所有行从侧轴末尾开始填充。最后一行的侧轴终点和容器的侧轴终点对齐。同时所有后续行与前一个对齐。center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的侧轴起点边和第一行的距离相等于容器的侧轴终点边和最后一行的距离。space-between：所有行在容器中平均分布。相邻两行间距相等。容器的侧轴起点边和终点边分别与第一行和最后一行的边对齐。space-evenly：所有行沿侧轴均匀分布在对齐容器内。每对相邻的项之间的间距，第一项和容器边框，以及最后一项和容器边框的间距，都是完全相同的。211知识准备--align-content211知识准备--为什么使用flexflex布局具有以下优点：灵活性：flex布局可以很容易地调整元素在容器内的位置，无论它们是水平排列还是垂直排列。空间分配：flex布局允许容器内的空间根据元素的大小和数量动态分配，这使得布局更加灵活。对齐和分布：flex布局提供了丰富的属性来控制元素的对齐方式，包括主轴和侧轴上的对齐。自适应性：flex布局可以很好地适应不同屏幕尺寸和设备，提高网页的响应式设计。易用性：flex布局的属性和概念相对直观，使得开发者更容易上手和使用。社区支持：flex布局得到了广泛的社区支持，有大量的教程、工具和框架可以帮助开发者快速掌握和应用。

实战演练—制作“我的网上简历”网页2本次任务主要是利用flex布局完成“我的网上简历”的制作，分为几个部分：头部（包含个人照片和基本信息）、技能栏、工作经验、教育背景以及联系方式。

实战演练—制作“我的网上简历”网页2“我的网上简历”制作思路为用一个类名为resume-container的元素作为容器，在里面创建5个section元素分别展示头部（含照片和基本信息）、技能、经验、教育及联系方式五大块内容，类名为header的section用于展示个人基本信息，在头部通过img元素引入个人照片，并利用div元素结合h1元素、p元素等展示姓名、职位、联系方式等基本信息。接着，在技能、工作经验、教育背景各自元素内部分别使用列表ul、li或段落p清晰列出条目；最后，专设联系方式区域，确保所有信息逻辑清晰、层次分明。本网页可以分成三步来完成：首先制作“我的网上简历”的HTML结构代码；其次编写基础CSS代码；最后通过弹性布局实现页面整体布局。

实战演练—制作“我的网上简历”网页21.制作“我的网上简历”的HTML结构代码。

实战演练—制作“我的网上简历”网页22.完成CSS样式代码。首先,重置默认样式，使用通配符选择器*重置全局的margin和padding，确保各浏览器间的一致性。设置box-sizing:border-box;使得元素的宽度包括padding和border，简化布局计算。头部样式，为.header设置display:flex;来实现图片和文字信息的水平排列，利用align-items:center;对齐两者垂直中心。调整.profile-pic的大小和形状，使用border-radius创建圆形头像效果。然后，设定全局的字体和字号，保证文本的统一风格。通过margin-bottom给标题和段落之间添加间距，提升内容的分隔感和层次感。给所有的.section添加统一的背景色、内边距和圆角，增加视觉舒适度和专业感。分别针对不同的section（技能、经验、教育、联系信息）设置特定的样式或调整，如调整标题h2的样式来区分各个部分。3.最后，通过弹性布局实现页面整体布局。进行容器布局对.resume-container应用display:flex;和flex-direction:column;使其内容垂直排列，并通过align-items:center;让所有内容在页面居中，提高阅读体验。进阶训练—order3

order属性规定了弹性容器中的可伸缩项目在布局时的顺序。弹性元素按照

order

属性的值的增序进行布局。order:<integer>;<integer>用整数值来定义排列顺序，数值小的排在前面。可以为负值。.box1>.item:nth-child(1){order:10;}.box1>.item:nth-child(2){order:1;}.box1>.item:nth-child(3){order:100;}进阶训练—flex-grow3

flex-grow属性定义剩余空间的分成。默认为0，即如果存在剩余空间，也不放大。flex-grow:<number[0,∞]>;这个属性规定了flex-grow项在flex容器中分配剩余空间的相对比例。主尺寸是项的宽度或高度，这取决于flex-direction值。剩余空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将剩余空间按相同比例分配，否则将按照flex-grow定义的比例进行分配。进阶训练—flex3

flex属性是、flex-grow、flex-shrink和flex-basis属性的简写。设置了弹性元素如何增大或缩小以适应其弹性容器中可用的空间。flex:<'flex-grow'><'flex-shrink'>?||<'flex-basis'>;进阶训练—align-self3

align-self属性定义弹性元素单独在侧轴（纵轴）方向上的对齐方式。align-self:auto|stretch|center|flex-start|flex-end|baseline;auto（默认值）：弹性元素继承了它的父容器的align-items属性。如果没有父容器则为"stretch"。stretch：弹性元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。center：弹性元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。flex-start：弹性元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。flex-end：弹性元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。baseline：弹性元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

进阶训练—制作“保健常识”网页3

本次任务主要是利用flex知识点完成pc端网页的制作。标题居中展示；导航栏中的三个导航项在导航栏中均匀分布，分别为营养饮食、运动锻炼和压力管理；根据导航分类，内容应分为不同的板块，每个板块内包含若干篇文章或小贴士，每篇文章或小贴士采用卡片式布局，包含一张相关图片、标题、简短摘要或全文。

进阶训练—制作“保健常识”网页3

“保健常识”制作思路为主体使用类名为container的div包裹，实现整体的布局控制，内部通过header、main和footer元素划分页面头部、主要内容和页脚区域。导航条放置于头部，采用无序列表链接方便用户跳转到营养饮食、运动锻炼、压力管理三大板块。主体内容部分，每个保健主题(section)内含文章(article)以灵活的flex布局展示图文信息，图片与文字描述相结合，增强可读性和吸引力。最后，页脚包含版权信息。可以分成三步来完成：首先制作“保健常识”的HTML结构代码；然后通过弹性布局实现页面整体布局。

进阶训练—制作“保健常识”网页3

1.制作“保健常识”的HTML结构代码。

进阶训练—制作“保健常识”网页3

2.在编写该保健常识网页的CSS内容时，首先设定了全局字体样式以保证文本的基本可读性与一致性。接着，通过flex布局对页面的容器、头部、内容区域以及底部进行了布局设定，确保它们能够自适应各种屏幕尺寸。确保内容区域可以灵活地填充剩余空间，同时内部元素采用flex布局以实现响应式排列，设置了间距和内边距以增加可读性和美观性。每个包含图片和文本的文章块都采用flex布局，垂直居中对齐内容，定义了宽度、背景色、阴影、圆角以及底部外边距和溢出处理，保持整洁的布局。导航栏使用flex实现水平居中对齐，定义了链接的颜色和无下划线，以及链接间的间距。每个保健主题分类区域具有一定的底部外边距、使用flex垂直居中内容，确保标题和文章在视觉上的对齐。4动手实践—制作“购物网”网页4设计并制作如图所示的“购物网”网页。该网页包含头部导航、banner和商品列表。使用flex完成对头部导航区域和商品列表区域的布局。小结知识准备——CSSflex布局实战演练——制作“我的网上简历”网页进阶训练——制作“保健常识”网页动手实践——制作“购物网”网页模块七网页布局任务5CSSgrid布局网页制作CSSHTML知识准备——CSSgrid布局实战演练——制作“中国科技成就”网页CSSgrid布局0201进阶训练——制作“环保公益”网页03动手实践——制作“旅游网站”网页04

了解CSSgrid布局基本属性用法CSSgrid布局学习目标：1.弘扬优秀传统文化，鼓励学生深入了解和展现中华优秀传统文化的精髓，增强其民族自豪感和文化自信。2.激发学生对环境问题的关注，使其认识到每个人的行为对环境都有影响，鼓励学生积极参与环保活动，成为负责任的社会成员。3.培养学生对中国科技发展历程及重大成就的深刻认识，增强学生的民族自豪感和国家认同感，让学生理解科技进步对国家实力和国际地位的重要意义。CSSgrid布局思政目标：

2Grid布局是一种现代CSS布局技术，它提供了一种强大且灵活的方法来设计二维网页布局。通过将页面划分为行和列的网格结构，开发者可以精确定位和对齐元素，无论这些元素的内容如何变化。这种布局模型允许创建响应式和动态的布局，而无需依赖于固定位置或流体宽度的传统方法。Grid布局使得创建复杂和美观的界面变得简单，尤其是在处理多列布局、不对称网格以及需要精确控制元素定位的场景下。11知识准备--介绍Grid布局

211知识准备--Grid布局相关概念Grid网格容器：将一个元素的display属性设置为grid或inline-grid，则该元素就成为网格容器。网格容器定义了其子元素的网格布局，以及行和列的结构。GridCells（网格单元格）：由行和列的网格线界定的矩形区域。每个网格项占据一个或多个网格单元格。GridItems（网格项）：网格容器的所有直接子元素。网格项可以占据一个或多个单元格。Gaps（间隙）：网格项之间的空白空间。GridLines（网格线）：网格线是定义网格结构的虚拟线，它们沿着行和列划分网格。网格线编号从1开始，每一行或列前后都有两条网格线。211知识准备--grid布局常用属性属性描述display显示模式grid-template-columns/grid-template-rows定义网格中列和行的大小。可以使用各种单位，包括

px,%,fr等grid-gap/row-gap/column-gap设置网格项之间的垂直和水平间距grid-auto-flow控制网格项如何填充网格。例如，row,column,dense等justify-content/align-content设置如何沿着行项轴/列项轴在网格项之间和周围分配空间grid-column/grid-row定义了网格元素列和行的开始和结束位置justify-item/align-item控制网格项在网格单元格内的对齐方211知识准备--display要使HTML元素变成一个网格容器，可以将display属性设置为grid或inline-grid。display:grid|inline-grid;display：grid预览效果display：inline-grid预览效果211知识准备--grid-template-columns/grid-template-rowsgrid-template-columns和grid-template-rows属性定义了网格布局中的列和行的数量，它也可以设置每个列和行的宽度。属性值是一个以空格分隔的列表，其中每个值定义相对应列的宽度。grid-template-columns/grid-template-rows:<width><width>...;其中，<width>可以是长度单位、关键字、repeat函数和fr。注意，这些值可以联合使用。auto意味着宽度应该根据其内容的宽度来确定，或者如果内容小于可用空间，则占据可用空间的一部分