HTML5网页制作与前端开发（AI协同）课件 模块4　CSS布局技术-响应式网页设计之旅

零号任务精确定位——掌控布局之CSS定位技巧汇报人：xxx时间：2026任务说明01在模块3创建的社团管理网页的基础上完成以下操作。（1）使用绝对定位固定头部导航栏的位置，避免页面下滑的时候导航栏被默认隐藏。（2）使用z-index:1000将<header>的层级设为较高的数值，以保证<header>在其他内容之上显示，避免被内容遮挡。零号任务任务说明知识准备0201定位的概念02不同的定位方式目录03重叠元素的处理1.

定位的概念知识准备定位实现对元素的精准控制，其底层原理依赖于CSS引擎如何解析和渲染页面上的元素。浏览器接收到HTML和CSS代码后，会构建DOM树和渲染树，并根据CSS规则计算出每个元素的位置。对于设置了定位的元素，CSS引擎会根据上述规则来决定它们最终在页面上的位置。定位方式描述是否脱离文档流静态定位默认定位方式，不支持top、right、bottom、left属性否相对定位元素在原有位置基础上偏移，但仍占据原有位置空间否绝对定位相对于最近的已定位祖先元素定位是固定定位相对于浏览器窗口定位，页面滚动时位置不变是黏性定位当页面滚动到特定位置时，元素会转变为固定定位，此前为相对定位占据原有位置空间取决于条件2.不同的定位方式知识准备使用方法①设置定位属性：指定元素的定位方式（如static、relative、absolute、fixed、sticky等）。②设置偏移值：结合定位方式，通过top、right、bottom、left等属性调整元素在页面中的具体位置。定位方式与边偏移1)静态定位2)相对定位2.不同的定位方式知识准备定位方式与边偏移3)绝对定位

4)固定定位5)粘性定位初始状态（相对定位）：当页面没有滚动时，或者元素还没有到达“黏性”区域时，元素表现为相对定位。黏性状态（固定定位）：当页面滚动到某个特定位置时，元素会变为固定定位，并固定在视口中的某个位置，3.重叠元素的处理知识准备在CSS中，每个元素都有一个层叠上下文，当多个元素发生重叠时，层叠上下文的顺序决定了哪个元素显示在上面，哪个元素显示在下面。层叠上下文是一个三维概念，假定用户正面向（浏览器）视窗或网页，则HTML元素沿着其相对于用户的一条虚构的z轴排开。z-index属性用于控制元素的层叠顺序，数值越大，则元素越靠上（前）显示。当两个元素重叠时，z-index值大的元素显示在上面。需要注意的是，z-index只对定位元素（position属性，且属性值为非static值的元素）有效。如果element1为图片，element2为文字，则设置层叠顺序后，文字显示在图片上。如果不设置z-index，则按照元素在HTML中的顺序决定层叠顺序，即后出现的元素会覆盖先出现的元素。任务实现03任务实现01应用绝对定位固定头部导航栏的位置：通过将头部导航栏的定位方式设置为绝对定位，使其在页面滚动时保持始终在顶部不被隐藏。这样可以确保用户在浏览页面时导航栏始终可见。02调整z-index:1000属性：为<header>元素设置较高的层级（z-index:设为1000），确保它始终位于页面其他内容之上，避免被滚动内容覆盖或遮挡。通过合理运用z-index，可以有效管理页面元素的显示顺序，避免层叠，保持页面结构清晰且交互顺畅。

许多网站为提升用户体验，会将导航栏固定在页面顶部，这样即使用户滚动页面，导航栏也始终可见，方便用户随时跳转到其他页面。下面将在社团管理网页中实现此效果，确保导航栏在页面滚动时始终保持在页面的顶部位置，避免被隐藏或遮挡。借助AI通义灵码的帮助，先给它一段基于我们目标的关键词（你可以根据自己对目标网站的需求，给出与此处不同的关键词）任务实现position:fixed;：将header设置为固定定位。这样，header会固定在页面的指定位置，不会随着页面滚动而滚动。z-index:1000;：将header的层级设为较高的数值，以保证header在其他内容之上显示，避免被内容遮挡。由于header被固定在顶部，占据了一定的高度，因此需要给main内容区域加上一个上边距。这个距离可以根据header的实际高度来调整，使内容不会被header遮挡。谢谢大家汇报人：xxx时间：2026一号任务浮动不止——探索CSS的浮动魔法汇报人：xxx时间：2026任务说明01在模块3创建的“志愿者服务队招新”页面的基础上完成以下操作。（1）在现有的“加入我们”部分插入两个浮动的内容块，分别为“策划部”和“宣传部”，通过float:left和float:right来控制布局。（2）为浮动布局的内容块添加新的样式，并创建清除浮动的.clearfix类，确保后续内容不会受到浮动的影响。一号任务任务说明知识准备0201浮动的概念03清除浮动的方法目录02浮动未清除问题1.浮动的概念知识准备浮动是让元素脱离文档流并沿着其容器边缘对齐的技术。在CSS中主要通过float属性决定元素如何在其父容器内浮动。（1）float属性用于指定元素应该向哪一侧浮动。（2）浮动元素会尽可能地向指定方向移动，直到碰到容器的边缘或其他浮动元素。2.浮动未清除的问题属性值描述none默认值，元素不浮动left元素向左浮动right元素向右浮动inherit规定应该从父元素继承float属性值2.浮动未清除的问题知识准备使用float属性后不加以处理可能会导致一系列布局问题：（1）父元素高度塌陷当父元素内的子元素都设置了浮动（float:left或float:right）不再占据文档流中的空间，若父元素的高度没有明确指定或者没有内容来撑起高度，那么它的高度就会“塌陷”，如图所示不能正确包裹其子元素。（2）后续元素错误定位如果不对浮动元素进行清除，后续元素可能会出现在不应该出现的位置，例如，可能会与浮动元素重叠或错误地绕过这些元素。3.清除浮动的方法知识准备（1）给父级元素指定高度通过直接设置高度强制父元素包含浮动的子元素。此方式只适用于能计算出父元素确切高度的情况，即高度固定的布局，不具有通用性。（2）父级添加overflow属性对浮动元素的父容器overflow属性进行设置（overflow:hidden;或overflow:auto;），隐藏超出容器的部分从而间接清除内部的浮动。（3）在浮动元素后添加带有clear:both;的元素在浮动元素之后添加一个新的非浮动元素，并为其设置clear:both;，使新元素出现在所有前面的浮动元素下方，从而清除浮动。（4）使用伪元素清除浮动在父容器之后添加一个不可见的伪元素，并设置clear:both;来清除浮动。这种方法的优点是可以不需要额外的HTML结构。任务实现03任务实现01在“加入我们”部分插入两个浮动的内容块，分别为“策划部”和“宣传部”。通过使用float:left和float:right，可以灵活地控制这两个内容块的布局，使它们分别排列在页面的左侧和右侧，达到整齐的视觉效果。02为确保浮动布局不会影响页面后续内容的正常显示，我们需要为这些浮动元素添加相应的样式，同时创建一个.clearfix类来清除浮动，避免父容器高度塌陷或其他布局问题。/*浮动内容样式*/.float-box{width:45%;padding:15px;margin:10px;color:var(--primary);text-align:center;border-radius:5px;box-shadow:04px8pxvar(--shadow-color);background-color:#f1f1f1;}.float-left{float:left;background-color:#dff9fb;}.float-right{float:right;background-color:#f9ca24;}/*清除浮动*/.clearfix::after{content:"";display:block;clear:both;}<!--HTML部分--><divclass="section"><h2class="section-title">加入我们</h2><pclass="content-text">经过十年的努力，郁金香志愿服务队获得多项荣誉，优秀的你，难道不心动吗?</p><!--描述浮动布局内容--><divclass="float-boxfloat-left">策划部：负责活动中策划，制定详细的方案。</div><divclass="float-boxfloat-right">宣传部：负责推广宣传，设计视觉内容。</div><divclass="clearfix"></div><h3class="subsection-title">你能获得的</h3><ulclass="benefit-list"><li><spanclass="highlight-text">丰富的经验：</span>参与多样化的活动。</li><li><spanclass="highlight-text">结交新朋友：</span>与志同道合的伙伴共同成长</li></ul></div>任务实现谢谢大家汇报人：xxx时间：2026二号任务从灵活到精准——实现Flexbox与Grid布局汇报人：xxx时间：2026任务说明01本任务将介绍两种新的页面布局，并将其应用在社团管理网页中，具体完成以下操作：（1）将“部门职能”部分的<section>区域改为Grid布局，使不同的组职能简介更整齐地排成两列。Grid布局适合这类多维布局需求。（2）对社团管理网页侧边栏中的“最新志愿者活动”区域进行修改，采用Flexbox布局，以优化其显示效果。二号任务任务说明知识准备0201关于Flexbox布局目录关于Grid布局03Flexbox与Grid的混合使用021.关于Flexbox布局知识准备Flexbox：是Flexiblebox的缩写，作为CSS3的布局模式它决定了元素如何在页面上排列，使元素能在不同屏幕尺寸和设备下可预测地展现。其中，采用Flexbox布局的元素被称为flex容器，容器内部的元素则称为flex项目。它之所以被称为Flexbox，是因为它能够扩展和收缩flex容器内的元素，以最大限度地填充可用空间。与以前的布局方式（如表格布局和浮动元素内嵌块元素）相比，Flexbox布局更强大的方式，主要表现在以下几个方面。①在不同方向排列元素。②可重新排列元素的显示顺序。③能更改元素的对齐方式。④方便动态地将元素装入容器。1.关于Flexbox布局知识准备Flexbox布局的常用属性属性值含义row默认值，主轴为水平方向（水平布局），起点在左端，从左往右排列row-reverse主轴为水平方向（水平布局），起点在右端，从右往左排列column主轴为垂直方向（垂直布局），起点在上沿，从上往下排列column-reverse主轴为垂直方向（垂直布局），起点在下沿，从下往上排列属性值含义nowrap默认值，表示不换行wrap换行wrap-reverse换行，第一行在下方布局方向flex-direction：用于定义主轴的方向，从而决定子元素的排列方向环绕效果flex-warp：控制子元素在主轴方向上是否换行，1.关于Flexbox布局知识准备Flexbox布局的常用属性属性值含义flex-start默认值，左对齐flex-end右对齐center居中space-between两端对齐，项目的间距相等space-around项目两侧的间距相同，项目的间距比两侧的间距大一倍属性值含义flex-start交叉轴的起点对齐flex-end交叉轴的终点对齐center交叉轴的中点对齐baseline项目的第一行文字的基线对齐sretch默认值，若项目未设置高度或设为auto，将占满整个容器的高度水平对齐方式justify-content：定义子元素在主轴（水平或垂直）方向上的对齐方式交叉轴对齐方式align-items：定义子元素在交叉轴方向上的对齐方式2.关于Grid布局知识准备Grid布局即网格布局。它就像一张规整的表格，把网页中的容器划分成“行”和“列”，这些行、列交叉形成一个个小格子，也就是单元格。我们可以像在表格里放置内容一样，指定网页元素（项目）放在哪个单元格里，所以它是一种二维布局方式。Grid布局的基本概念如下。①网格容器和项目：采用网格布局的区域称为“容器”（Container），容器内部采用网格定位的子元素称为“项目”（Item）。②网格轨道：一个网格轨道就是网格中任意两条线之间的空间。③网格线：Grid会为我们创建编号的网格线让我们来定位每一个网格元素。④网格单元：一个网格单元是一个网格元素最小的单位；一旦一个网格元素被定义在一个父级元素当中，那么他的子级元素将会排列在每个事先定义好的网格单元中。⑤网格区域：网格元素可以沿着行或列的方向扩展一个或多个单元，并且会创建一个网格区域。⑥网格间距：两个网格单元之间的网格横向间距或网格纵向间距。2.关于Grid布局知识准备4.文字排版与过渡效果3.Flexbox与Grid的混合使用知识准备Flexbox和Grid是CSS中两个强大的布局系统，它们有各自的优势和用途。在实际的网页设计中，我们可以根据布局需求混合使用它们，以达到最佳的布局效果。混合使用具备各自的优势如下。（1）Flexbox：适合于一维布局（单行或单列），以及需要在容器内部对项目进行对齐和分布的场景。（2）Grid：适合二维布局（行列），以及需要创建复杂页面结构的场景。在我们前面实现的页面布局中，包含头部、侧边栏、主要内容区和底部。主要内容区需要进一步细分为一个3列的网格布局，用于展示不同的内容模块。4.文字排版与过渡效果任务实现03任务实现（1）对社团管理网页侧边栏中的“最新志愿者活动”区域进行修改，采用Flexbox布局，以优化其显示效果。Flexbox布局非常适合处理一维结构的内容，能够实现元素的对齐、分配和排列，尤其在处理动态内容或需要自适应调整的情况下表现尤为出色。使用Flexbox可以提升页面布局的可维护性，同时增强用户界面的互动性和流畅度。任务实现（2）将“部门职能”部分的<section>区域调整为Grid布局，这样可以将不同组的职能简介更加整齐地排成两列。display:grid;：启用Grid布局，将.grid-container转换为网格容器。grid-template-columns:1fr1fr;：定义两列布局，两列占据相等的宽度。gap:20px;：设置网格项的间距。.grid-item：单独样式化每个职能项，将其设置为带有边框和圆角的独立模块。Grid布局非常适合处理具有多维结构的内容，精确控制每个元素的位置和排列方式，尤其适用于实现复杂的布局。谢谢大家汇报人：xxx时间：2026技能补强响应式设计——流式布局与适配性设计汇报人：xxx时间：2026技能知识011.关于响应式设计技能知识响应式设计是一种通过CSS的媒体查询和灵活布局技术，使网页能够在不同设备上自适应显示的设计方法。3种常见的网页布局对比如表所示。布局类型单位类型适应性优点缺点固定布局像素（px）固定宽度，适应性差

设计简单，布局易控制在不同屏幕上体验不佳，尤其是小屏幕设备流式布局（FluidLayout）百分比（%）宽度自适应，内容灵活在大多数屏幕上适配性较好在极端屏幕尺寸下可能需要调整响应式布局弹性单位（em）+媒体查询全面适应设备屏幕几乎在所有设备上均可获得最佳体验开发复杂度高，需要更多设计和调试工作固定布局适合需要精确控制布局的场景，但不适合移动设备；流式布局相对灵活，但在某些极端屏幕尺寸下可能出现不美观的情况；而响应式布局是当前网页设计的主流，能在几乎所有设备上提供一致的用户体验。2.弹性单位技能知识响应式设计不单需要调整布局，还需要调整字体大小、边距等，使用弹性单位可以帮助我们实现更灵活的设计。常见的弹性单位有以下4种。（1）em：相对于父元素的字体大小。（2）rem：相对于根元素的字体大小。（3）vw：占视口宽度的百分比，1vw等于视口宽度的1%。

vh：占视口高度的百分比，1vh等于视口高度的1%。3.媒体查询技能知识媒体查询是响应式设计的核心工具。它让我们可以为不同的设备和屏幕尺寸指定不同的CSS样式。媒体查询的方法有两种，即内联式和外联式。下面通过代码来进行演示：利用媒体查询，当文档宽度超过720px时，调整元素的样式以适配大屏设备。（1）内联式：直接在HTML文件的<style>标签中使用。（2）外联式：将媒体查询写入外部CSS文件，并通过<link>标签引入。技能实践02流式布局技能实践

流式布局的核心思想是通过百分比宽度、弹性盒子（Flexbox）或CSS网格（Grid）来设计响应式网页，而不是固定的像素值。这样可以确保网页在不同尺寸的屏幕上都能良好显示。例如，使用媒体查询（MediaQueries）来调整不同屏幕尺寸下的布局和样式。

为了防止前面学的知识生疏，这里回顾一下之前学习过的语义化标签，同时使用通义灵码来生成一个简单基础的日记网站：流动布局技能实践

利用浏览器（以谷歌浏览器为例）打开已初步编辑好的日记网页，右击并选择“检查”，找到Dimensions便可切换不同的设备（这里以iPhoneXR为例）。为了遵循流式布局和适配性设计原则，可以为网页添加以下代码：没有使用响应式设计时，页面布局是固定的，常会导致页面内容溢出，特别是在小屏幕设备上，用户体验较差。当使用响应式设计时，页面布局根据设备宽度调整，元素大小和排列方式也根据屏幕变化，使得网站在不同设备上都能自适应显示，给用户更好的体验。思考与练习请同学们注意：填空题考查CSS选择器、盒模型、开发者工具、变量作用域及盒模型设置；判断题分析CSS属性、优先级、样式继承及命名规范；选择题判别选择器优先级、布局特性、变量作用域、工具功能及响应式单位。一、填空题答案static（静态定位）滚动到指定阈值（或“滚动至元素到达视口特定位置”）justify-content最近的已定位（position不为static）父元素子元素超出容器宽度时自动换行二、判断题答案×××√√三、选择题答案ACBABDABD一、填空题1.CSS中的默认定位方式是_______