网页基础开发教程 1

项目5制作公司招聘页浮动与定位理解元素的浮动，能够为元素设置浮动样式；熟悉清除浮动的方法，可以使用不同方法清除浮动；掌握元素的定位，能够为元素设置常见的定位模式。任务描述知识准备任务实现任务小结任务测试与考核实训任务描述制作企公司招聘页1.HTML结构（1）创建首行“导航栏”结构；（2）创建“横幅”栏结构；（3）创建企业展示图片部分结构；（4）创建企业文化模块结构；（5）创建企业招聘模块结构；（6）创建“侧边栏”部分结构；（7）创建“页脚”部分结构。2.CSS样式（1）通过通配符设置所有元素的外边距和内边距为0；（2）整体页面的版心宽度设置1200px，并居中显示，色调为蓝色（#0066ff）；（3）整体字体类型为“黑体”，默认字体大小为16px；（4）首行导航栏部分：宽度为1200px，高度为60px，设置头部的高度为60px，使用

float

属性将logo、导航栏左侧和右侧元素进行布局，当鼠标悬停时，文本颜色变为蓝色；（5）“横幅”部分：宽度不限，高度300px，设置背景图片；（6）企业展示图片部分：宽度为1200px，使用浮动布局展示图片；（7）企业文化部分：宽度为1200px，居中显示，卡牌内部使用定位布局；（8）企业招聘模块：宽度为1200px，对不同岗位进行浮动布局；（9）“侧边栏”部分：宽度为80px，对侧边栏使用固定定位；（10）“页脚”部分：高度为400px,背景颜色为深蓝色（#030f2d），使用

float

属性将页脚的

<dl>

和

<ul>

元素进行布局。任务描述知识准备任务实现任务小结任务测试与考核实训标准流（普通流/文档流）元素的浮动元素的定位知识准备1：标准流（普通流/文档流）传统网页布局的三种方式在网页设计中，布局是构建页面结构的基础。传统布局主要依赖三种基本方式：标准流（普通流/文档流）、浮动与定位，它们各具特点，适用于不同的布局场景，共同构成了CSS布局技术的核心。（1）标准流：元素按照其在HTML中出现的默认顺序进行排列（2）浮动

：元素脱离标准流，向左或向右浮动（3）定位

：通过精确定位将元素放置在页面的特定位置标准文档流（也称为“文档流”或“正常文档流”）是HTML元素在网页中默认的排列方式。它遵循HTML的语义结构，按照代码中元素的顺序，从上到下、从左到右依次渲染。所有标签默认都存在于标准文档流中，无需额外的布局指令。HTML元素主要分为三种类型：块级元素、行内元素和行内块元素。知识准备1：标准流（普通流/文档流）1.标准流（普通流/文档流）元素类型特点常见标签块级元素独占一行；可设置宽度和高度；宽度默认占据父容器的全部宽度；默认独占一行，从上到下依次排列。<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>、<table>行内元素不独占一行；不能设置宽度和高度；同一行内从左到右排列，一行排不下时换行。<span>、<a>、<img>、<strong>、<em>、<br>行内块元素不独占一行，可设置宽度和高度；可在同一行内排列。<button>、<input>、<textarea>、<select>2.认识和理解标准文档流例5-1启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如chapter05文件夹），新建HTML文件，命名为demo5-1.html代码如下。演示不同元素在标准流中的布局效果。知识准备1：标准流（普通流/文档流块级元素：单独占据一行行内元素：从左到右排列，遇到阻碍或宽度不足时自动换行行内块元素：从左到右排列，可以设置宽高传统的网页布局分为：标准流（普通流/文档流）、浮动与定位标准流：元素按照其在HTML中出现的默认顺序进行排列浮动

：元素脱离标准流，向左或向右浮动定位

：通过精确定位将元素放置在页面的特定位置标准流下：块级元素，单独占据一行；行内元素，从左到右排列，遇到阻碍或宽度不足时自动换行；行内块元素，从左到右排列，可以设置宽高。总结单词速记英文中文Normalflow标准流float浮动position定位Block-levelelement块级元素Inlineelement行内元素Inline-blockelement行内块元素标准流（普通流/文档流）元素的浮动元素的定位在实际网页开发中，常需将多个块级元素（如多个<div>）水平排列为一行，或实现块级元素左右对齐。知识准备2：元素的浮动为什么需要浮动？在默认标准流中，块级元素纵向排列，无法直接达成该效果。此时便需借助浮动布局——它能够令元素脱离标准流，实现横向排列，并灵活控制左右对齐。在CSS中，通过float属性实现元素的浮动。其语法格式如下:知识准备2：元素的浮动1.浮动的基本语法：float:none|left|right;浮动属性各个参数的详细说明如表：属性说明none元素不浮动（默认值）left元素向左浮动right元素向右浮动浮动元素具有三个核心特征：脱离标准流(脱标)、一行内显示并且顶部对齐、具有行内块元素的特性。知识准备2：元素的浮动2.浮动的特性设置为浮动属性，该元素将不再保留其原先在文档流中的占位空间，从而实现更加灵活的布局效果。（1）浮动元素会脱离标准流(脱标)div1div2浮动脱离标准流案例例5-2启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter05文件夹)，新建HTML文件，命名为demo5-2.html。定义两个盒子，并设置盒子相关属性，为第一个盒子添加浮动进行对比，效果图如下：知识准备2：元素的浮动知识准备2：元素的浮动2.浮动的特性多个盒子同时设置浮动，它们会依指定的浮动方向在一行内依次排列，顶端自动对齐，彼此紧密贴靠，毫无缝隙。（2）浮动的元素会一行内显示并且元素顶部对齐注意：当父级宽度不足以容纳所有浮动盒子时，超出部分会自动另起一行，依旧保持顶端对齐，继续排列。浮动元素一行内显示案例例5-3启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter05文件夹)，新建HTML文件，命名为demo5-3.html。定义两个盒子，并设置盒子相关属性，为第一个盒子添加浮动进行对比，效果图如下：知识准备2：元素的浮动（3）浮动的元素会具有行内块元素的特性知识准备2：元素的浮动

2.浮动的特性任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。块级盒子若没设宽度，原本会撑满父级；浮动后则收缩为内容宽度，不再占整行。浮动盒子之间零缝隙，会紧密贴靠、自动顶端对齐，一排放不下就换行继续排列。行内元素浮动后，同样脱离文档流，呈现可设宽高、随内容定尺寸的「行内块」特性。浮动的元素会具有行内块元素的特性案例知识准备2：元素的浮动

例5-4启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter05文件夹)，新建HTML文件，命名为demo5-4.html。为不同的元素设置浮动，效果图如下：在网页布局中，浮动元素通常与标准流父级搭配使用，以实现对浮动位置的精准控制。其通用策略可概括为：“父级标准流控制上下，子级浮动负责左右”。布局时应首先使用标准流的父元素确定模块在页面中的垂直位置，确保结构稳固、层次清晰；随后，在父元素内部，令子元素采用浮动方式，实现水平方向上的并排排列、均分或环绕效果。知识准备2：元素的浮动3.浮动的应用浮动应用案例例5-5启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter05文件夹)，新建HTML文件，命名为demo5-5.html。定义1个标准流父盒子，并在内部设置两个浮动的子盒子，效果图如下：知识准备2：元素的浮动知识准备2：元素的浮动3.清除浮动为什么需要清除浮动？由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为

0

时，就会影响下面的标准流盒子。父盒子下方盒子子盒子1子盒子2由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响知识准备2：元素的浮动3.清除浮动清除浮动是CSS布局中的一项重要技术，指通过特定的CSS属性设置，控制元素对浮动元素的环绕行为清除浮动的本质是清除浮动元素造成的影响如果父盒子本身有高度，则不需要清除浮动清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了清除浮动本质浮动带来的影响的特性案例知识准备2：元素的浮动

例5-6启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter05文件夹)，新建HTML文件，命名为

demo5-6.html。父元素的高度塌陷（未设置高度），边框无法包裹浮动子元素，footer元素向上移动，与浮动元素发生重叠效果图如下：知识准备2：元素的浮动3.清除浮动清除浮动的本质是清除浮动元素对后续布局产生的影响。清除浮动的目的，就是让父元素“重新识别”浮动子元素的高度，恢复正常的文档流秩序。在CSS中，通过clear属性实现清除浮动。其语法格式如下:选择器{clear:属性值;}clear属性各个参数的详细说明如表：属性说明left不允许左侧有浮动元素(清除左侧浮动的影响)right不允许右侧有浮动元素(清除右侧浮动的影响)both同时清除左右两侧浮动的影响知识准备2：元素的浮动3.清除浮动额外标签法也称为隔墙法，是

W3C

推荐的做法。清除浮动——额外标签法额外标签法会在浮动元素末尾添加一个空的标签。例如

<div

style=”clear:both”></div>，或者其他标签（如<br

/>等）。缺点:

添加许多无意义的标签，结构化较差优点：通俗易懂，书写方便注意：要求这个新的空标签必须是块级元素额外标签额外标签法实现清除浮动案例知识准备2：元素的浮动

例5-6启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter05文件夹)，新建HTML文件，命名为

demo5-7.html。使用了额外标签清除浮动（在三个浮动元素后添加了<divclass="clear"></div>），清除浮动元素造成的影响效果图如下：知识准备2：元素的浮动3.清除浮动清除浮动——父级添加overflow给父元素添加overflow属性，将其属性值设置为hidden、auto或scroll，即可清除浮动。这种方法的核心原理是通过触发BFC（BlockFormattingContext，块级格式化上下文）来包含内部的浮动元素。其语法格式如下:选择器{overflow:属性值;}overflow属性各个参数的详细说明如表：属性说明visible默认值，不会触发BFC，不能清除浮动Hidden（推荐）触发BFC，可以清除浮动auto触发BFC，可以清除浮动Scroll触发BFC，可以清除浮动父级添加overflow实现清除浮动案例知识准备2：元素的浮动

例5-6启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter05文件夹)，新建HTML文件，命名为

demo5-8.html。给父级添加overflow清除浮动（在父元素添加overflow:hidden;属性

），清除浮动元素造成的影响效果图如下：注意：使用overflow:hidden时，如果内容超出父容器范围，超出的部分将被隐藏

知识准备2：元素的浮动3.清除浮动清除浮动——父级添加after伪元素法after伪元素法是现代网页开发中推荐使用的清除浮动方法。它通过在父元素的末尾添加一个看不见的伪元素来清除浮动，既实现了清除浮动的效果，又不会增加额外的HTML标签。其语法格式如下:.clearfix::after{content:"";display:block;height:0;clear:both;visibility:hidden;}:after

方式是额外标签法的升级版。也是给父元素添加父级添加overflow实现清除浮动案例知识准备2：元素的浮动

例5-6启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter05文件夹)，新建HTML文件，命名为

demo5-9.html。给父级添加after伪元素清除浮动（在父元素添加after伪元素），清除浮动元素造成的影响效果图如下：知识准备2：元素的浮动3.清除浮动清除浮动——父级添加双伪元素法双伪元素清除浮动法是after伪元素法的增强版本，它同时使用:before和:after两个伪元素来更全面地解决浮动问题。这种方法不仅能清除浮动，还能预防margin重叠问题。其语法格式如下:.clearfix:before,.clearfix:after{content:"";display:table;}.clearfix:after{clear:both;}优点：代码更简洁缺点：照顾低版本浏览器代表网站：小米、腾讯等父级添加overflow实现清除浮动案例知识准备2：元素的浮动

例5-6启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹(例如chapter05文件夹)，新建HTML文件，命名为

demo5-9.html。给父级添加双伪元素清除浮动，清除浮动元素造成的影响效果图如下：知识准备2：元素的浮动3.清除浮动各方法对比方法名称实现方式优点缺点适用场景额外标签法在浮动元素末尾添加空标签设置clear:both简单易懂，书写方便增加无意义标签，结构化较差简单页面，少量浮动父级overflow法给父元素添加overflow:hidden代码简洁内容增多时可能造成内容被隐藏，无法显示溢出元素确定父元素内容不会溢出的情况父级after伪元素法父元素添加:after伪元素设置清除符合闭合浮动思想，结构语义化正确IE6-7不支持:after，需使用zoom:1触发hasLayout主流浏览器，推荐使用父级双伪元素法父元素同时添加:before和:after伪元素代码更简洁IE6-7不支持:after，需使用zoom:1触发hasLayout主流浏览器，推荐使用浮动的核心作用：让元素向父元素的左侧或右侧浮动，脱离原本的文档流位置浮动的取值：float:left（向左浮动）、right（向右浮动）、none（不浮动，默认值）浮动的特性：元素浮动后会脱离标准文档流，不再占据原位置；浮动元素会停靠在父元素边缘或其他浮动元素旁；文本和行内元素会环绕浮动元素浮动的影响：父元素可能因浮动子元素而高度坍塌（无法包裹子元素）清除浮动的方法：额外标签法；给父元素添加overflow；父级添加after伪元素法；父级添加双伪元素法总结单词速记英文中文clear清除collapse塌陷overflow溢出pseudo-element 伪元素after在...之后content内容visibility可见性1.下列哪个CSS属性用于设置元素浮动方向？A.floatB.clearC.overflowD.position知识准备2：元素的浮动2.父元素包含浮动子元素时，可能出现的问题是？A.子元素被隐藏B.父元素高度坍塌C.子元素无法点击D.父元素背景色失效4.clear属性的作用是指定元素是否允许周围有______元素。5.使用伪元素清除浮动时，通常使用______在父元素后添加伪元素。6.简述一下常见的清除浮动的四种方法和他的优缺点。3.下列哪种方法不能用于清除浮动？A.父元素设置overflow:hiddenB.浮动元素后添加clear:both的空标签C.父元素设置display:flexD.父元素使用::after伪元素清除标准流（普通流/文档流）元素的浮动元素的定位在以下情况使用标准流或者浮动能实现吗？知识准备2：元素的定位为什么需要的定位

某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子在以下情况使用标准流或者浮动能实现吗？知识准备2：元素的定位为什么需要的定位

当我们滚动窗口的时候，盒子是固定屏幕某个位置的。定位是CSS布局中另一种重要的布局机制，它允许开发者精确控制元素在页面中的位置。与浮动不同，定位提供了更精细的位置控制能力，能够将元素放置在页面的任何位置，甚至可以实现元素的层叠效果。知识准备2：元素的定位1.定位的概念以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。定位的概念：定位：将盒子定在某一个位置，所以定位也是在摆放盒子，

按照定位的方式移动盒子。定位

=

定位模式

+

边偏移

。定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。知识准备2：元素的定位2.定位的组成其语法格式如下：选择器{position:定位模式;top:值;bottom:值;left:值;right:值;}定位模式决定元素的定位方式

，它通过

CSS

的

position

属性来设置，其值可以分为四个：知识准备2：元素的定位2.定位的组成（1）定位模式属性值说明static静态定位，默认值。没有定位，元素出现在正常文档流中relative相对定位，相对于其原文档流的位置进行定位absolute绝对定位，相对于其上一个已经定位的父标签进行定位fixed固定定位，相对于浏览器窗口进行定位通过边偏移属性top、bottom、left或right，可以精确定义定位标签的位置。边偏移属性取值为数值或百分比：知识准备2：元素的定位2.定位的组成（2）边偏移属性值说明top顶端偏移量，定义标签相对于其父标签上边线的距离bottom底部偏移量，定义标签相对于其父标签下边线的距离left左侧偏移量，定义标签相对于其父标签左边线的距离right右侧偏移量，定义标签相对于其父标签右边线的距离标签的定位类型主要包括静态定位、相对定位、绝对定位和固定定位，对它们的具体介绍如下知识准备2：元素的定位3.定位类型其语法格式如下：选择器{position:static;}（1）静态定位（了解）静态定位是元素的默认定位方式，即元素按照标准流进行排列静态定位特点如下：元素按照标准文档流排列边偏移属性（top、bottom、left、right）无效在布局中很少显式设置静态定位案例例4-5启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter05文件夹），新建HTML文件，命名为

demo5-11.html。部分代码如下：知识准备2：元素的定位<style>

.static-box{

position:static;/*默认值，可省略*/

width:200px;

height:100px;

background-color:#3498db;

color:white;

text-align:center;

line-height:100px;

margin:10px;

}

</style>知识准备2：元素的定位3.定位类型其语法格式如下：选择器{position:relative;top:值;left:值;}（2）相对定位（重要）相对定位是将元素会相对于它原本在文档流中的位置来调整显示位置，同时保留原占位空间。相对定位特点如下：

偏移基准：元素在文档流中的原始位置

空间保留：原始占位空间保持不变，不影响其他元素布局

层叠控制：可通过z-index属性控制层叠顺序相对定位案例例4-5启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter05文件夹），新建HTML文件，命名为

demo5-12.html。其效果图如下：知识准备2：元素的定位第二个方块向下向右偏移并与周围元素产生重叠，但其原始空间依然保留在文档流中。知识准备2：元素的定位3.定位类型其语法格式如下：选择器{position:absolute;top:值;left:值;}（3）绝对定位（重要）绝对定位（position:absolute）使元素脱离文档流，其定位基准为最近的非static定位的祖先元素；若不存在此类祖先，则相对于视口定位。该元素不再占据原空间，并会随页面滚动而移动。绝对定位特点如下：

元素完全脱离文档流，不会保留原来的位置

相对于最近的有定位（非static）的祖先元素进行定位

如果没有定位的祖先元素，则相对于浏览器窗口进行定位

常用于弹出层、轮播图、图标定位等绝对定位对比案例例4-5启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter05文件夹），新建HTML文件，命名为

demo5-13.html。其效果图如下：知识准备2：元素的定位未设置定位元素设置定位元素，但无定位祖先设置定位元素，有定位祖先知识准备2：元素的定位3.定位类型其语法格式如下：选择器{position:fixed;top:值;left:值;}（3）固定定位（重要）固定定位可以看作是绝对定位的一个特殊类型，始终以浏览器窗口作为定位的参照基准，不会随页面滚动而移动。当position属性的取值为fixed时，即可将标签的定位模式设置为固定定位。固定定位特点如下：

元素完全脱离文档流，不在占有原来的位置

始终相对于浏览器窗口进行定位

不随页面滚动而移动

常用于导航栏、侧边栏、广告等需要始终可见的元素固定定位案例例4-5启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter05文件夹），新建HTML文件，命名为

demo5-15.html。其效果图如下：知识准备2：元素的定位“网站导航栏”和“固定侧边栏”设置了固定定位：“网站导航栏”固定在顶部；“固定侧边栏”固定在右侧。知识准备2：元素的定位定位特性总结定位模式是否脱标移动位置基准使用场景static否正常文档流默认布局relative否（保留原位置）自身原位置微调位置，定位参考absolute是最近定位祖先/初始包含块弹出层、图标定位fixed是浏览器窗口导航栏、侧边栏知识准备2：元素的定位4.z-index层叠等级属性其语法格式如下：z-index:value;元素应用了非static的position属性后,可能会造成元素之间的覆盖,用z-index属性设置元素的堆叠顺序。层叠等级属性特点如下：value取值可为负整数、0或正整数，数值越大则元素层叠级别越高仅对定位元素（非

static）生效，未定位元素默认为

auto（可视为0）元素设置非

static

定位后，默认获得高于普通元素的层叠级别层叠等级属性案例例4-5启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter05文件夹），新建HTML文件，命名为

demo5-16.html。部分代码如下：知识准备2：元素的定位.box1{

position:absolute;

top:10px;

left:10px;

z-index:1;

background-color:pink;

}.box2{

position:absolute;

top:40px;

left:20px;

z-index:2;

background-color:#ccc;

}定位的核心作用：让元素脱离标准文档流（或保留文档流位置），相对于指定上下文精准定位定位的取值：position:static（静态定位，默认）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（粘性定位）定位的偏移属性：top（上偏移）、right（右偏移）、bottom（下偏移）、left（左偏移）（仅对非static定位生效）定位的上下文规则：relative相对于自身原位置；absolute相对于最近已定位祖先元素（无则为文档）；视口层叠顺序控制：z-index:数值（仅定位元素生效，数值越大层级越高，默认auto）典型应用搭配：父元素relative+子元素absolute（实现子元素在父元素内精准布局）总结单词速记英文中文position定位static静态定位relative相对定位absolute绝对定位fixed固定定位z-index层叠顺序offsetproperties偏移属性1.CSS中用于设置元素定位方式的核心属性是？（

）A.floatB.positionC.displayD.z-index知识准备2：元素的浮动2.下列哪种定位方式的元素不会脱离标准文档流？（）A.absoluteB.fixedC.relativeD.sticky4.定位属性的默认值是______，元素会遵循标准文档流排列。5.固定定位（fixed）的元素相对于______定位，滚动页面时位置不变。6.要实现“子元素在父元素内精准居中”，通常需给父元素设置______定位，子元素设置absolute定位。子元素设置position:absolute后，其定位基于？（）A.父元素B.浏览器视口C.最近的已定位（非static）祖先元素D.元素自身原始位置任务描述知识准备任务实现任务小结任务测试与考核实训任务描述制作企公司招聘页1.HTML结构（1）创建首行“导航栏”结构；（2）创建“横幅”栏结构；（3）创建企业展示图片部分结构；（4）创建企业文化模块结构；（5）创建企业招聘模块结构；（6）创建“侧边栏”部分结构；（7）创建“页脚”部分结构。2.CSS样式（1）通过通配符设置所有元素的外边距和内边距为0；（2）整体页面的版心宽度设置1200px，并居中显示，色调为蓝色（#0066ff）；（3）整体字体类型为“黑体”，默认字体大小为16px；（4）首行导航栏部分：宽度为1200px，高度为60px，设置头部的高度为60px，使用

float

属性将logo、导航栏左侧和右侧元素进行布局，当鼠标悬停时，文本颜色变为蓝色；（5）“横幅”部分：宽度不限，高度300px，设置背景图片；（6）企业展示图片部分：宽度为1200px，使用浮动布局展示图片；（7）企业文化部分：宽度为1200px，居中显示，卡牌内部使用定位布局；（8）企业招聘模块：宽度为1200px，对不同岗位进行浮动布局；（9）“侧边栏”部分：宽度为80px，对侧边栏使用固定定位；（10）“页脚”部分：高度为400px,背景颜色为深蓝色（#030f2d），使用

float

属性将页脚的

<dl>

和

<ul>

元素进行布局。1.创建项目启动VSCode，打开“OpenFolder”对话框，选择本章代码文件夹（chapter05文件夹）。在目录chapter05下，新建一个名为CorporateRecruitment的文件夹，以存放本章节的综合实训项目。在CorporateRecruitment文件夹中，创建一个名为05-Recruitment..html的网页文件，用于构建页面内容。创建一个images文件夹来存储项目所需的图片资源。在项目中创建一个css文件夹，用于存放样式文件，在css文件夹中创建05-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-culture"

class="culture">

<div

class="container">

<h1>企业文化</h1>

<p>

信创人有矢志不渝、开拓创新的精神，因为拼搏，所以突破，

因为进取，所以卓越。

</p>

<div

class="content1">

<h1>VISION</h1>

<h2>愿景</h3>

<p>