网页基础开发教程 12

项目6制作资源中心页响应式布局理解响应式布局的设计原理，能够根据设备特性规划页面适配方案；熟悉Flex与Grid布局的核心属性，可独立完成多列、嵌套等复杂布局；掌握媒体查询的使用方法，能针对不同屏幕尺寸编写适配样式；具备跨设备兼容性调试能力，确保页面在主流设备上的一致性体验。任务描述知识准备任务实现任务小结任务测试与考核实训任务描述制作资源中心页1.HTML结构（1）创建首行“导航栏”结构；（2）创建响应式“Banner区”结构；（3）创建资源中心“核心内容区”结构；（4）创建“侧边功能区”部分结构。（5）创建“页脚”部分结构。2.CSS样式（1）通过通配符设置所有元素的外边距和内边距为0；（2）整体页面的版心宽度设置1200px，并居中显示，色调为蓝色（#0066ff）；（3）整体字体类型为“黑体”，默认字体大小为16px；（4）首行导航栏部分：宽度为1200px，高度为60px，设置头部的高度为60px，使用

float

属性将logo、导航栏左侧和右侧元素进行布局，当鼠标悬停时，文本颜色变为蓝色；（5）“横幅”部分：宽度不限，高度300px，设置背景图片；（6）企业资源展示部分：宽度为1200px，使用flex布局显示新闻模块和侧边图片；（7）“页脚”部分：高度为400px,背景颜色为深蓝色（#030f2d），使用

float

属性将页脚的

<dl>

和

<ul>

元素进行布局。任务描述知识准备任务实现任务小结任务测试与考核实训响应式布局设计基础Flex布局的基本概念Flex布局的容器属性Flex布局的项目属性Grid布局概述Grid布局的容器属性Grid布局的项目属性知识准备1：响应式布局设计基础响应式布局核心定义为：一个网站能兼容多个设备，而不是为每个设备开发单独的版本。随着硬件的发展网页也要适应各种不同大小的屏幕。响应式布局通过设置不同的样式规则来适应不同的设备和屏幕尺寸，使得网页可以在不同的设备和屏幕上都能够完美显示，提高了用户体验。对比维度响应式布局传统布局开发与维护成本响应式布局仅需一套代码即可适配多设备，大幅提升开发维护效率传统布局需为不同设备开发多个版本，迭代成本显著增加设备适配范围覆盖全尺寸设备（手机、平板、笔记本、桌面显示器、电视等），动态适配不同屏幕宽度。仅适配特定尺寸（如1920px桌面），小屏需缩放、大屏有留白；多版本布局也难以覆盖所有设备。未来扩展性基于“动态适配”理念，可通过调整断点或样式快速适配新设备（如折叠屏、车载屏幕）。新设备需重新设计开发；多版本布局需新增对应版本，扩展性差。响应式布局的实现依赖于三个核心技术要素，它们共同作用实现多设备适配。视口是指浏览器显示网页内容的区域。在移动设备上，默认视口宽度通常大于设备屏幕宽度，这会导致页面需要缩放才能查看，响应式设计必须正确配置视口才能正常工作。1.

视口知识准备1：响应式布局设计基础视口可以分为布局视口、视觉视口和理想视口三种视口说明本质与作用布局视口浏览器渲染网页时使用的“虚拟画布宽度”，是CSS布局计算的基准决定网页布局的“参考坐标系”，CSS中的width、%等单位基于此计算视觉视口用户当前可见的网页区域宽度，即屏幕显示的实际内容范围反映用户的“视觉范围”，受缩放操作影响（缩放时视觉视口大小变化）理想视口设备屏幕的物理宽度，是为该设备优化显示的“最佳视口宽度”连接设备物理尺寸与网页设计的“桥梁”，确保内容以合适比例显示在CSS中，通过meta视口标签告诉浏览器如何设置视口的宽度和缩放比例。其语法格式如下知识准备1：响应式布局设计基础<metaname="viewport"content="width=device-width,initial-scale=1.0">参数说明width设置视口宽度，可为具体像素值或device-width（设备宽度）height设置视口高度，通常不设置，由内容决定initial-scale初始缩放比例（0.0-10.0）minimum-scale最小缩放比例（0.0-10.0）maximum-scale最大缩放比例（0.0-10.0）user-scalable是否允许用户缩放（yes/no）实际的开发中标准的meta视口标签设置：<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">随着高分辨率屏幕的普及，物理像素与逻辑像素不再一一对应。若直接显示原始图片，在高密度屏幕上会导致内容过小。为此，需根据设备像素比对图片进行等比放大后再压缩回显示尺寸，以保障清晰显示。2.

二倍图知识准备1：响应式布局设计基础设备尺寸(英寸)开发尺寸(px)物理像素比(dpr)iphone3G3.5320*4801.0iphone4/4s3.5320*4802.0iphone5/5s/5c4.0320*5682.0HTCOneM84.5360*6403.0iphone64.7375*6672.0Nexus44.7384*6402.0Nexus5x5.2411*7312.6iphone6Plus5.5414*7363.0SamsungGalaxyNote45.7480*8533.0SonyXperiaZUltra6.4540*9602.0Nexus7(12)7.0600*9601.3二倍图演示例6-1启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如chapter06文件夹），新建HTML文件，命名为demo6-1.html。演示如图，左侧为未使用二倍图的图片，右侧为使用二倍图的图标，在移动端显示可以明显看出右侧图片更为清晰。知识准备1：响应式布局设计基础流式布局是相对于固定布局而言的，它使用相对单位替代固定像素，使元素尺寸能够随容器或屏幕尺寸动态变化。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。3.

流式布局相对单位应用知识准备1：响应式布局设计基础单位说明适用场景%相对于父元素的百分比宽度、高度、内外边距em相对于当前元素的字体大小（1em=当前font-size）字体大小、间距rem相对于根元素(html)的字体大小全局字体大小统一控制vw视口宽度的1%（1vw=视口宽度的1%）响应式字体、全屏元素vh视口高度的1%全屏高度区块、垂直布局vminvw和vh中的较小值保证元素在横竖屏都可见vmaxvw和vh中的较大值背景图覆盖等场景流式布局相对单位应用例6-2启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如chapter06文件夹），新建HTML文件，命名为demo6-2.html。为页面中两个盒子的宽度设置了50%，页面中的两个div盒子的大小会随着视口的变化而变化，始终保持各占据50%的页面。知识准备1：响应式布局设计基础

sectiondiv{

float:left;

width:50%;

height:400px;

}

响应式布局：一套代码适配多终端，降本增效且扩展性强视口配置：通过meta标签设置，匹配设备宽度实现基础适配二倍图技术：应对高清屏像素比，解决图片显示模糊问题流式布局：采用相对单位，让元素随屏幕尺寸动态伸缩总结单词速记英文中文Responsive响应式Viewport视口RetinaImage二倍图

Flexbox弹性布局GridLayout网格布局scale

比例响应式布局设计基础Flex布局的基本概念Flex布局的容器属性Flex布局的项目属性Grid布局概述Grid布局的容器属性Grid布局的项目属性在实际网页开发中，经常遇到这样的需求：如何让多个盒子水平排列？如何实现元素的水平垂直居中？如何让布局在不同屏幕尺寸下自适应？知识准备2：Flex布局的基本概念使用传统的浮动布局实现这些效果往往需要编写复杂的CSS代码，且不易维护。Flex布局的出现，让这些布局问题变得简单而优雅适用场景核心布局需求传统布局痛点导航栏布局菜单项水平居中、两端对齐（如首页/关于我们/联系我们分布在导航栏两侧）、均匀分布需用浮动+margin计算，居中需额外嵌套容器卡片容器多张卡片自动填充容器空间，保持一致间距，避免卡片大小不一导致的布局错乱需手动计算卡片宽度+margin，响应式时需频繁调整表单元素对齐表单标签与输入框垂直居中对齐（如“用户名：”与输入框baseline对齐）需用

vertical-align

或定位，兼容性差工具栏按钮按钮组均等分布（如编辑/保存/删除按钮各占1/3宽度）或按比例分配空间需用浮动+width百分比，溢出时需手动换行为什么需要Flex布局FlexibleBox（弹性盒子布局）是一种一维布局模型，旨在提供更高效的方式来布局、对齐和分配容器中项目的空间，即使它们的大小是未知或动态变化的。其语法结构如下：知识准备2：Flex布局的基本概念.container{display:flex|inline-flex;}

注：flex：生成块级Flex容器

inline-flex：生成行内Flex容器Flex布局（弹性布局）为容器提供灵活的排列方式，设置后子元素的

float、clear和vertical-align

属性将失效。采用Flex布局的元素称为Flex容器（父元素），其直接子元素自动成为

Flex项目（子元素)通过定义Flex容器的属性，可以控制Flex项目在容器中的排列方式和对齐方式知识准备2：Flex布局的基本概念通过定义Flex项目的属性，可以控制项目在容器中的大小、位置和排序方式。属性名核心作用可选取值display定义元素是否为Flex容器及容器类型flex

/

inline-flexflex-direction定义Flex项目在容器中的排列方向row（默认）/

row-reverse

/

column

/

column-reversejustify-content定义项目在主轴（水平/垂直）上的对齐方式flex-start（默认）/

flex-end

/

center

/

space-between

/

space-aroundalign-items定义项目在交叉轴（垂直/水平）上的对齐方式stretch（默认）/

flex-start

/

flex-end

/

center

/

baseline属性名核心作用取值范围/默认值flex-basis定义项目基准尺寸，作为空间分配的基础长度值（如100px、30%）或auto（默认）flexflex-grow、flex-shrink、flex-basis的简写复合值（默认值：01auto）order定义项目的排列顺序整数（默认值：0）体验Flex布局例6-3启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter06文件夹)，新建HTML文件，命名为demo6-3.html。页面中的三个span盒子的大小会随着视口的变化而变化，始终保持平分div父盒子的宽度，效果图如下：知识准备2：Flex布局的基本概念响应式布局设计基础Flex布局的基本概念Flex布局的容器属性Flex布局的项目属性Grid布局概述Grid布局的容器属性Grid布局的项目属性知识准备3：Flex布局的容器属性1.flex-directionflex-direction属性决定主轴的方向（即项目的排列方向）其语法格式如下：在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴。默认主轴方向，水平向右；默认侧轴方向，水平向下flex-direction:

row

|

row-reverse|

column|

column-reverse;属性值说明row水平方向从左到右排列row-reverse水平方向从右到左排列column垂直方向从上到下排列column-reverse垂直方向从下到上排列注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而子元素是跟着主轴来排列的。flex-direction属性案例例6-4启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter06文件夹)，新建HTML文件，命名为demo6-4.html。页面中的三个span盒子垂直方向从上到下排列，盒子的大小会随着视口的变化而变化，始终保持平分div父盒子的高度。知识准备3：Flex布局的容器属性

div{

display:flex;

width:800px;

height:300px;

background-color:pink;

flex-direction:column;

}知识准备3：Flex布局的容器属性2.justify-contentjustify-content属性定义了项目在主轴上的对齐方式，其语法格式如下：justify-content:flex-start|flex-end|center|space-between|space-around;注意：justify-content属性只对Flex容器中的Flex项目在主轴方向上的位置进行对齐，不影响在交叉轴方向上的位置。该属性通常与flex-direction联合使用，来控制Flex项目在不同方向上的对齐方式。属性值说明flex-start默认值

从头部开始

如果主轴是x轴，

则从左到右flex-end从尾部开始排列center在主轴居中对齐（如果主轴是x轴则

水平居中）space-around平分剩余空间space-between先两边贴边

再平分剩余空间（重要）justify-content属性案例例6-5启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter06文件夹)，新建HTML文件，命名为demo6-5.html。页面中的四个span盒子先两边贴边再平分剩余空间。知识准备3：Flex布局的容器属性

div{

display:flex;

width:800px;

height:300px;

background-color:pink;

flex-direction:row;

justify-content:space-between;

}知识准备3：Flex布局的容器属性3.align-itemsalign-items属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项（单行）的时候使用，其语法格式如下：align-items:flex-start|flex-end|center|stretch;注意：align-items

用于设置Flex项目在交叉轴上的对齐方式，常与

flex-direction

配合使用。当项目换行（flex-wrap:wrap）形成多行时，可使用

align-content

属性控制整体行在交叉轴上的对齐。属性值说明flex-start从上到下flex-end从下到上center挤在一起居中（垂直居中）stretch拉伸

（默认值

）align-items

属性案例例6-6启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter06文件夹)，新建HTML文件，命名为demo6-6.html。页面中的三个span盒子垂直自上而下排列并且垂直居中。知识准备3：Flex布局的容器属性div{

display:flex;

width:800px;

height:400px;

background-color:pink;

flex-direction:column;

justify-content:center;/*需要一个侧轴居中*/

align-items:center;

}Flex布局基础：基于容器和项目的一维布局模型，通过主轴/交叉轴控制排列逻辑flex-direction：定义Flex主轴方向，可选行/列、正/反方向，决定项目排列流向justify-content：控制主轴方向项目的对齐方式，如居中、两端对齐、间距分配等align-items：控制交叉轴方向项目的对齐方式，如居中、拉伸、靠上/靠下对齐总结单词速记英文中文flex弹性direction方向justify对齐content内容align排列items项目响应式布局设计基础Flex布局的基本概念Flex布局的容器属性Flex布局的项目属性Grid布局概述Grid布局的容器属性Grid布局的项目属性知识准备4：Flex布局的项目属性1.flex属性flex属性定义子项目分配剩余空间

，用flex来表示占多少份数，语法格式如下：flex:数字;数字意义：非负数字（0为默认），表示“瓜分剩余空间的权重”。.item1{flex:1;}/*flex-grow:1*/.item2{flex:2;}/*flex-grow:2*/.item3{flex:1;}/*flex-grow:1*/总权重=1+2+1=4，每一份权重对应空间：200px÷4=50px示例：容器宽度200px，包含3个项目。两种头部导航栏常见布局方式例6-7启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter06文件夹)，新建HTML文件，命名为demo6-7.html。模拟头部导航栏常见布局方式所示，上方是一个矩形条，左右两侧各有一个100px宽的彩色块（红、蓝），中间是占据剩余空间的绿色。下方是另一个矩形条，包含三个span元素，它们的宽度比例是1:2:1。知识准备4：Flex布局的项目属性知识准备4：Flex布局的项目属性2.align-selfalign-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，其语法格式如下：align-self:auto|flex-start|flex-end|center|stretch|baseline;注意：通过

align-self，可以为单个子元素设置与其他子元素不同的交叉轴对齐方式，增加布局的灵活性。属性值说明auto默认值，继承父元素的

align-items

属性值，如果没有父元素则等同于

stretchstretch拉伸子项以填满交叉轴方向的空间（在未设置固定尺寸时）flex-start子项向交叉轴的起始端对齐flex-end子项向交叉轴的结束端对齐center子项在交叉轴上居中对齐baseline子项与交叉轴的基线对齐（基线通常是文本的基线）align-self属性案例例6-8启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter06文件夹)，新建HTML文件，命名为demo6-8.html。页面中的三个span盒子从左至右排列、第三个盒子沿着侧轴底侧对齐。知识准备4：Flex布局的项目属性

divspan{

width:150px;

height:100px;

background-color:aqua;

margin-right:5px;

}

divspan:nth-child(3){

align-self:flex-end;

}知识准备4：Flex布局的项目属性3.orderorder

属性用于控制Flex项目的显示顺序。数值越小，排列越靠前（支持负值）。若多个项目order值相同，则按源码顺序排列。默认值为0。.item{order:<number>;/*整数值，默认为0*/}注意：和z-index不一样，z-index

是决定了重叠元素谁显示在“上面”。order仅调整Flex/Grid项目的视觉显示顺序其语法格式如下：order属性案例例6-9启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter06文件夹)，新建HTML文件，命名为demo6-9.html。页面中的三个span盒子从左至右排列并且2号盒子排在第一个。知识准备4：Flex布局的项目属性

div{

display:flex;

width:80%;

height:300px;

background-color:pink;

}

divspan:nth-child(2){

order:-1; /*-1比0小所以在前面*/

}flex：复合属性，控制项目伸缩性，整合增长、收缩、基础宽度规则align-self：覆盖容器align-items，单独设置项目交叉轴对齐方order：定义项目排列顺序，数值越小越靠前，不改变DOM结构总结1.以下哪个属性是Flex项目属性，用于单独设置某个项目的交叉轴对齐方式？（）A.justify-contentB.align-selfC.flex-directionD.align-items知识准备2：元素的浮动2.Flex项目的order属性取值为整数，关于其作用描述正确的是？（）A.数值越大，项目在主轴上越靠前B.数值越小，项目在主轴上越靠前C.会改变项目的DOM结构顺序D.仅在Grid布局中生效4.当Flex主轴为水平方向时，justify-content控制项目______对齐，align-items控制项目______对齐。5.若想让Flex项目在主轴上居中排列，需设置justify-content:______。6.控制Flex项目在主轴上排列顺序的属性是______，其默认值为______。3.若Flex容器设置flex-direction:column，则主轴方向为？（）A.水平从左到右B.水平从右到左C.垂直从上到下D.垂直从下到上响应式布局设计基础Flex布局的基本概念Flex布局的容器属性Flex布局的项目属性Grid布局概述Grid布局的容器属性Grid布局的项目属性在掌握一维的Flex布局后，网页设计常需处理行列结构的二维布局。CSSGrid布局为此提供了完整的解决方案，能够精准控制行列结构，适用于页面架构、仪表盘等复杂场景知识准备5：Grid布局概述为什么需要的Grid布局适用场景核心布局需求传统布局痛点仪表盘布局多模块规整排列，部分跨行/列浮动+定位嵌套，调整时需重新计算尺寸和间距卡片网格布局多卡片固定行列排列，保持统一间距和对齐手动计算宽度和margin，响应式调整繁琐表单复杂布局表单元素成对排列，部分元素跨列表格布局或复杂嵌套div，灵活性差，对齐困难网页整体框架头部、侧边栏、主内容区、底部的组合浮动+清除浮动，侧边栏与主内容区高度对齐困难图片画廊图片按不同尺寸组合排列绝对定位手动计算坐标，数量变化时布局易错乱Grid布局是一个基于网格的二维布局系统。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。其语法格式如下：知识准备5：Grid布局概述.container{display:grid|inline-grid;}注：grid：生成块级Grid容器

inline-grid：生成行内Grid容器概念核心定义核心作用/特点网格（Grid）行×列交叉形成的二维布局容器布局基础框架，承载所有网格项，通过

display:grid或

display:inline-grid定义。行（Row）水平区域（横向维度）构成网格的横向结构，多个行共同决定网格的“高度方向”布局。列（Column）垂直区域（纵向维度）构成网格的纵向结构，多个列共同决定网格的“宽度方向”布局。行轨（RowTrack）相邻行线间的横向空间带，本质是“行的实际可使用区域”。决定单个行的“高度大小”，是网格项在垂直方向上占据的“空间单位”。列轨（ColumnTrack）相邻列线间的纵向空间带，本质是“列的实际可使用区域”。决定单个列的“宽度大小”，是网格项在水平方向上占据的“空间单位”。单元格（Cell）行轨与列轨交叉的最小矩形，是网格布局的“最小单元”。网格的“基本组成单元”，一个单元格通常对应一个网格项（也可被网格项跨占）。Grid布局案例例6-10启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter06文件夹），新建HTML文件，命名为

demo6-10.html。页面中6个绿色卡片按“2行3列”的网格排列，每个卡片尺寸均匀，单元格间距为20px，且容器宽度自适应（占视口80%），缩小浏览器窗口时，卡片宽度会自动等分剩余空间知识准备5：Grid布局概述响应式布局设计基础Flex布局的基本概念Flex布局的容器属性Flex布局的项目属性Grid布局概述Grid布局的容器属性Grid布局的项目属性grid-template-rows和grid-template-columns是Grid布局的核心属性，分别用于定义网格的行轨道（行高）

和列轨道（列宽），决定网格的行数、列数及每个轨道的尺寸。其语法格式如下:知识准备6：Grid布局的容器属性/*定义行轨道：多个值用空格分隔，每个值表示一行的高度*/grid-template-rows:<轨道尺寸1><轨道尺寸2>...;/*定义列轨道：多个值用空格分隔，每个值表示一列的宽度*/grid-template-columns:<轨道尺寸1><轨道尺寸2>...;1.grid-template-rows和grid-template-columns单位/关键字说明固定长度（px、em、rem）固定行高/列宽，不随容器尺寸变化百分比（%）相对于Grid容器的尺寸计算fr（等分单位）将容器剩余空间按比例分配，1fr表示1份auto自动适应内容或容器尺寸，优先适应内容宽度/高度repeat()重复生成多个相同尺寸的轨道，简化代码复杂网格案例例6-11启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter06文件夹），新建HTML文件，命名为

demo6-11.html。网格为“3行4列”，第1行高度随内容变化，第2-3行高度等分容器剩余空间；第1列宽度固定200px，第2-4列宽度按1:1:1等分。知识准备6：Grid布局的容器属性grid-template-areas通过“命名网格区域”的方式，直观地定义Grid项目的布局结构，无需手动计算网格线编号，适合构建语义化的页面框架（如头部、侧边栏、主内容区）。其语法格式如下:知识准备6：Grid布局的容器属性grid-template-areas:"区域名1区域名1区域名2"/*第1行的区域分布*/"区域名3区域名4区域名2"/*第2行的区域分布*/"区域名3区域名5区域名5";/*第3行的区域分布*/2.grid-template-areas区域命名：每个区域名称必须是连续的矩形区域行定义：每行用一对引号表示，行内区域用空格分隔跨行列：相同区域名表示该区域跨越多列/多行（如上述“区域名1”占第1行前2列）；空单元格：使用点号

.

或多个连续点号表示空单元格（如"header.sidebar"表示三列中间为空白）区域引用：在Grid项目中使用

grid-area:<area-name>

引用定义的区域构建网页框架案例例6-12启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter06文件夹），新建HTML文件，命名为

demo6-12.html。页面分为“头部-侧边栏-主内容区-底部”四部分，布局结构与grid-template-areas定义的完全一致，语义清晰且易于修改知识准备6：Grid布局的容器属性当Grid项目数量超过“grid-template-rows/columns”定义的轨道数量时，Grid会自动生成额外的“隐式轨道”。grid-auto-rows和grid-auto-columns用于定义这些隐式轨道的默认尺寸，避免隐式轨道尺寸自适应内容导致的布局错乱。其语法格式如下:知识准备6：Grid布局的容器属性/*定义隐式行轨道的默认高度*/grid-auto-rows:<轨道尺寸>;/*定义隐式列轨道的默认宽度*/grid-auto-columns:<轨道尺寸>;3.grid-auto-rows和grid-auto-columns注：若未设置这两个属性，隐式行轨道高度默认“自适应内容”（auto），隐式列轨道宽度默认“0”（需手动设置才会显示）。控制隐式轨道案例例6-13启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter06文件夹），新建HTML文件，命名为

demo6-13.html。显式定义的2行高度为100px，超出的3个项目（5、6、7）自动生成隐式行，高度均为80px（由`grid-auto-rows`定义），布局整齐统一。知识准备6：Grid布局的容器属性grid是Grid布局的简写属性，可同时设置grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns和grid-auto-flow，简化代码书写。其语法格式如下:知识准备6：Grid布局的容器属性/*完整写法：行轨道

列轨道/自动轨道尺寸[排列方式]*/grid:<grid-template-rows>/<grid-template-columns>;grid:<grid-template-areas>/<grid-template-columns>;grid:[排列方式]<grid-auto-rows>/<grid-auto-columns>;4.Grid简写方式等效完整写法说明grid:100px1fr/200px1fr;grid-template-rows:100px1fr;grid-template-columns:200px1fr;定义2行2列的显式轨道grid:"aa""bc"/1fr2fr;grid-template-areas:"aa""bc";grid-template-columns:1fr2fr;结合区域定义和列轨道grid:row80px/1fr;grid-auto-flow:row;grid-auto-rows:80px;grid-auto-columns:1fr;定义自动排列方式和隐式轨道简写属性应用案例例6-14启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter06文件夹），新建HTML文件，命名为

demo6-14.html。通过简写方法快速定义了“2行3列”的网格，效果与单独设置grid-template-rows和grid-template-columns完全一致。知识准备6：Grid布局的容器属性

.grid-container{

display:grid;

width:80%;

margin:0auto;

grid:100px1fr/repeat(3,1fr);

gap:10px;

height:300px;

background-color:#f5f5f5;

}二维布局系统：精准控制行列结构，适配仪表盘、网页框架等复杂场景，替代传统嵌套布局容器启用：通过display:grid/inline-grid激活，子元素float等属性失效核心容器属性：grid-template-rows/columns定义行列尺寸，支持fr、repeat()等区域布局：grid-template-areas可视化命名区域，快速构建语义化网页框架隐式轨道：grid-auto-rows/columns定义超出显式轨道的项目默认尺寸简写属性：grid整合多属性，简化行列、区域、自动轨道的统一配置总结单词速记英文中文Row行Column列RowTrack行轨ColumnTrack列轨template模板explicittracks显式轨道implicittracks隐式轨道响应式布局设计基础Flex布局的基本概念Flex布局的容器属性Flex布局的项目属性Grid布局概述Grid布局的容器属性Grid布局的项目属性grid-row-start和grid-row-end用于定义Grid项目在垂直方向（行）上的起始和结束位置，通过指定网格线编号或跨度（span）控制项目占据的行数。其语法格式如下:知识准备7：Grid布局的项目属性grid-row-start:<数字>|span<数字>;grid-row-end:<数字>|span<数字>;1.grid-row-start和grid-row-end代码示例核心效果说明grid-row-start:1;grid-row-end:3;项目从第1条行线开始，第3条行线结束，垂直跨占2行grid-row:1/4;（简写）等价于start:1+end:4，垂直跨占3行（第1、2、3行）grid-row-start:1;grid-row-end:2;项目仅占1行（默认行为），无跨行效果<数字>：指定具体的网格线编号；span<数字>：定义项目跨越的行数控制项目行范围案例例6-15启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter06文件夹），新建HTML文件，命名为

demo6-15.html。项目1从第1行网格线开始到第3行网格线结束，项目5通过span2跨越第2-3行，实现垂直方向的跨多行布局。知识准备7：Grid布局的项目属性grid-column-start和grid-column-end与行属性类似，用于定义Grid项目在水平方向（列）上的起始和结束位置，控制项目占据的列数。知识准备7：Grid布局的项目属性/*起始网格线：数字或span关键字*/grid-column-start:<数字>|span<数字>;/*结束网格线：数字或span关键字*/grid-column-end:<数字>|span<数字>;2.grid-column-start和grid-column-end代码示例核心效果说明grid-column-start:1;grid-column-end:3;项目从第1条列线开始，第3条列线结束，水平跨占2列grid-column-start:2;grid-column-end:4;项目从第2条列线开始，第4条列线结束，水平跨占2列（覆盖第2、3列）grid-column-start:1;grid-column-end:-1;项目从第1条列线开始，最后1条列线结束，跨占所有列（水平占满容器）控制项目列范围案例例6-16启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter06文件夹），新建HTML文件，命名为

demo6-16.html。项目1从第1列网格线到第3列网格线，项目4通过span3跨越3列，实现水平方向的跨多列布局。知识准备7：Grid布局的项目属性grid-row-start/end：定义项目垂直跨行范围，控制行维度占用行数grid-column-start/end：定义项目水平跨列范围，控制列维度占用列数总结1.定义Grid容器列轨道宽度的核心属性是？（）A.grid-template-rowsB.grid-template-columnsC.grid-auto-columnsD.grid-column-start知识准备2：元素的浮动2.要实现Grid项目垂直跨占第2行到第4行，正确的属性设置是？（）A.grid-row:2/4B.grid-column:2/4C.grid-template-rows:24D.grid-auto-rows:244.grid-row-start和grid-row-end用于控制Grid项目在______方向的跨行范围。5.grid-template-areas中，使用______表示空的网格单元格。6.定义Grid显式行轨道高度的属性是______，列轨道宽度是______。3.当Grid项目数量超出显式轨道时，定义隐式行轨道高度的属性是？（）A.grid-template-rowsB.grid-row-endC.grid-auto-rowsD.grid-area任务描述知识准备任务实现任务小结任务测试与考核实训任务描述制作资源中心页1.HTML结构（1）创建首行“导航栏”结构；（2）创建响应式“Banner区”结构；（3）创建资源中心“核心内容区”结构；（4）创建“侧边功能区”部分结构。（5）创建“页脚”部分结构。2.CSS样式（1）通过通配符设置所有元素的外边距和内边距为0；（2）整体页面的版心宽度设置1200px，并居中显示，色调为蓝色（#0066ff）；（3）整体字体类型为“黑体”，默认字体大小为16px；（4）首行导航栏部分：宽度为1200px，高度为60px，设置头部的高度为60px，使用

float

属性将logo、导航栏左侧和右侧元素进行布局，当鼠标悬停时，文本颜色变为蓝色；（5）“横幅”部分：宽度不限，高度300px，设置背景图片；（6）企业资源展示部分：宽度为1200px，使用flex布局显示新闻模块和侧边图片；（7）“页脚”部分：高度为400px,背景颜色为深蓝色（#030f2d），使用

float

属性将页脚的

<dl>

和

<ul>

元素进行布局。1.创建项目启动VSCode，打开“OpenFolder”对话框，选择本章代码文件夹（chapter06文件夹）。在目录chapter06下，新建一个名为CorporateRecruitment的文件夹，以存放本章节的综合实训项目。在CorporateRecruitment文件夹中，创建一个名为06-Recruitment..html的网页文件，用于构建页面内容。创建一个images文件夹来存储项目所需的图片资源。在项目中创建一个css文件夹，用于存放样式文件，在css文件夹中创建06-Recruitment.css文件，用于实现05-Recruitment..html页面的元素样式。任务实现2.设置网页通用样式（1）首先，对CSS样式进行初始化设置，以消除不同浏览器默认样式的影响，从而提高开发效率。主要设置如下：任务实现/*通用选择器，选择所有元素*/*

{

margin:0;/*将所有元素的外边距设置为0*/

padding:0;/*将所有元素的内边距设置为0*/

vertical-align:middle;/*设置元素的垂直对齐方式为中间对齐*/

font-family:"黑体";/*设置所有元素的字体为黑体*/}/*选择所有列表项（li元素）*/li{

list-style:none;/*移除列表项前的标记（如圆点或数字）*/

}

/*选择所有超链接（a元素）*/

a{

text-decoration:none;/*移除超链接的下划线*/

color:#666666;/*设置超链接的文本颜色为深灰色*/

}

/*版心：定义一个类名为container的元素的样式*/

.container{

width:1200px;/*设置宽度为1200像素*/

margin:0

auto;/*设置外边距:上下0像素，左右自动，实现水平居中*/

}（2）将05-Recruitment.css样式引入05-Recruitment.html页面，打开05-Recruitment.html文件在<head></head>标签中输入如下代码：<linkrel="stylesheet"href="css/05-Recruitment.css">（1）搭建企业介绍“横幅”模块网页结构在04-joinUs.html文件的<body></body>标签中输入如下代码：任务实现3.实现企业介绍“横幅”模块制作效果如图所示：

<headerclass="container">

<divclass="logo">

<imgclass="logo-img"src="./img/XINCHUANG信创.png"alt="">

</div>

<divclass="header-left">

<ul>

<li><span>首页</span></li>

<li><span>解决方案</span></li>

<li><span>客户案例</span></li>

<li><span>赋能服务</span></li>

<li><span>资源中心</span></li>

<li><span>新闻动态</span></li>

<li><span>关于信创</span></li>

</ul>

</div>

<divclass="header-right">

<ul>

<liclass="login"><ahref="#">登录</a></li>

<liclass="register"><ahref="#">立即注册</a></li>

</ul>

</div>

</header>（1）搭建企业介绍导航栏模块网页结构在04-joinUs.html文件的<body></body>标签中继续输入如下代码：任务实现4.实现企业介绍导航栏结构模块制作效果如图所示：

<!--子导航栏nav-->

<nav>

<div

class="container">

<ul

class="nav-left">

<li><a

href="#id-introduction">企业介绍</a></li>

<li><a

href="#id-culture">企业文化</a></li>

<li><a

href="#id-Responsibility">社会责任</a></li>

<li><a

href="#">企业公益</a></li>

<li><a

href="#">联系我们</a></li>

</ul>

</div>

</nav>

（1）搭建企业介绍模块网页结构在04-joinUs.html文件的<body></body>标签中继续输入如下代码：任务实现5.实现企业介绍模块制作效果如图所示：

<!--企业介绍-->

<div

id="id-introduction"

class="introduction">

<div

class="container">

<div

class="intro-left">

<img

src="images/intruduction1.jpg"

alt="">

</div>

<div

class="intro-right">

<h1>信创公司-助力企业数字化转型</h1>

<p>信创，即信息技术应用创新产业，以“助力企业数字化转型”为使命，专注于信创领域。自2025年成立以来，公司依托自主研发的信创技术和大数据能力，构建了安全可靠的信创解决方案体系。</p>

<p>信创产业的核心是实现信息技术领域的自主可控，保障国家信息安全。公司为政府、金融、能源等关键行业提供从基础设施适配、软件优化到系统运维的全流程服务，助力客户实现国产化替代。通过采用国产软硬件生态的关键组成部分，信创技术能够提升系统的安全性、稳定性和自主可控性。公司推动信创产业发展，响应国家政策与标准化要求，满足政府在安全、合规性方面的政策需求。

</p>

</div>

</div>

</div>（1）搭建企业文化模块网页结构在04-joinUs.html文件的<body></body>标签中继续输入如下代码：任务实现6.实现企业文化模块制作效果如图所示：

<!--企业文化-->

<div

id="id-