HTML5+CSS3网页布局任务教程

高职高专“十三五”规划教材

HTML5+CSS3网页布局

任务教程

主编◎斯琴高娃

副主编◎孟清谭海中雷琳

内容简介

本书根据HTML5和CSS3标准详细讲解了网页的布局和制作方法。全书共分12个单元，内

容包括：准备工作、HTML5常见元素、网页整体布局的搭建、网页主体内容的构建、网页页眉

的构建、网页主导航的构建、网页横幅广告的构建、网页页脚的构建，以及混合布局的综合网页

的构建。每个单元包含若干个任务，各任务之间有连贯性，强化和覆盖相关知识点。

本书与Web前端开发工作岗位接轨，强调三方面的技能：一是针对只会写局部不会写整体的

问题，培养基于网页设计稿（或效果图）来规划网页，从网页整体入手，先搭建结构，再填充内

容的技能；二是归纳和强化常用的方法，使读者熟练掌握方法，而不仅是知识点；三是学会写代

码，而不是用Dreamweaver的可视化操作来生成代码。

本书适合作为高职高专院校HTML5+CSS3集中实训课程或理实一体化课程的教材，也可作

为网页设计与制作爱好者的自学读物。

图书在版编目（CIP）数据

HTML5+CSS3网页布局任务教程/斯琴高娃主编.—北京:

中国铁道出版社有限公司,2020.9

高职高专“十三五”规划教材

ISBN978-7-113-27180-0

Ⅰ.①H…Ⅱ.①斯…Ⅲ.①超文本标记语言-程序设计-

高等职业教育-教材②网页制作工具-高等职业教育-教材

Ⅳ.①TP393.092.2②TP312.8

中国版本图书馆CIP数据核字(2020)第153112号

书名：HTML5+CSS3网页布局任务教程

作者：斯琴高娃

策划：唐旭编辑部电话：（010）63549508

责任编辑：陆慧萍

封面设计：高博越

责任校对：张玉华

责任印制：樊启鹏

出版发行：中国铁道出版社有限公司（100054，北京市西城区右安门西街8号）

网址：/51eds/

印刷：三河市宏盛印务有限公司

版次：2020年9月第1版2020年9月第1次印刷

开本：787mm×1092mm1/16印张：13.75字数：327千

书号：ISBN978-7-113-27180-0

定价：39.00元

版权所有侵权必究

凡购买铁道版图书，如有印制质量问题，请与本社教材图书营销部联系调换。电话：（010）63550836

打击盗版举报电话：（010）51873659

前言

HTML5和CSS3是HTML和CSS的较新标准。HTML和CSS是Web前端开发基础技术，分别

用于实现网页的结构和表现，是学习后续前端脚本语言JavaScript和前端开发框架（Bootstrap、

jQuery等）的重要基础。

作者将长期的高职教学实践所得精心提炼到了本书中，充分考虑了高职学生的学情，按照初

学者的认知规律循循善诱，按照开发者的思考路线分步讲解，在精心编排的50多个网页制作任

务中渗透了实际网站开发中常用的方法、经验，覆盖了从无到有地制作一个完整的网页所需的知

识和技术。

本书共分12个单元，单元内的任务之间互补强化，单元之间衔接连贯。

第1单元准备工作，介绍HTML5和CSS3是什么，如何搭建网页制作环境，如何使用网页

编辑器的编辑和调试功能。

第2单元HTML5常见元素，介绍制作一个完整的网页一般需要哪些HTML5元素，如何使

用这些元素。

第3单元网页整体布局的搭建，介绍典型的网页布局有哪些，搭建网页结构用到哪些“盒

子”，实现这些布局设置哪些样式。

第4单元网页主体内容的构建1——文本的制作，介绍典型的网页布局中主体内容区的文本

内容的制作方法。

第5单元网页主体内容的构建2——图片的制作，介绍典型的网页布局中主体内容区的图片

内容的制作方法。

第6单元网页主体内容的构建3——表格的制作，介绍典型的网页布局中主体内容区的表格

内容的制作方法。

第7单元网页主体内容的构建4——表单的制作，介绍典型的网页布局中主体内容区的表单

内容的制作方法。

第8单元网页页眉的构建，介绍典型的网页布局中页眉的制作方法。

第9单元网页主导航的构建，介绍典型的网页布局中主导航的制作方法。

第10单元网页横幅广告的构建，介绍典型的网页布局中横幅广告的制作方法。

第11单元网页页脚的构建，介绍典型的网页布局中页脚的制作方法。

第12单元混合布局的综合网页的构建，介绍复杂网页的制作方法。

本书主要特色：

①与Web前端开发工作岗位接轨，教学生直接写HTML5和CSS3代码，而不是教可视化

操作。

②教学生基于网页设计稿（或效果图）制作完整的网页，而不是仅仅会做网页一角。

③归纳和强化常用的方法，让学生熟练掌握方法，而不仅仅是知识点。

④每个实训任务都有详尽的步骤和逻辑，而不是直接粘贴成片的代码。

课时数及选用建议（仅供参考）：

单元任务课时数建议选用建议

任务1.1~1.22

第1单元

任务1.3~1.42

任务2.1~2.22
理实一体化课程：

任务2.3~2.42选用所有任务。

任务2.5~2.62
集中实训课程：

第2单元

任务2.7~2.82省略

任务2.9~2.102

任务2.112

任务3.14
理实一体化课程：

选用所有任务。

第3单元任务3.24

集中实训课程：

任务3.32选用所有任务

任务4.12

任务4.22
理实一体化课程：

任务4.32任务4.2、4.5、4.6或全部。

第4单元

任务4.42
集中实训课程：

任务4.54任选

任务4.64

任务5.1~5.22

任务5.32
理实一体化课程：

任务5.42任务5.2、5.3、5.4、5.5、5.7或全部。

第5单元

任务5.5~5.62
集中实训课程：

任务5.72任选

任务5.8~5.92

任务6.12

第6单元

任务6.2~6.32

任务7.12

第7单元任务7.22

任务7.32

理实一体化课程：

任务8.12

第8单元任选。

任务8.22

集中实训课程：

任务9.12

第9单元任选

任务9.22

任务10.12

第10单元

任务10.22

任务11.12

第11单元

任务11.22

理实一体化课程：

任务12.18

省略。

第12单元

集中实训课程：

任务12.212

任选

合计100

本书由斯琴高娃任主编，孟清、谭海中、雷琳任副主编。其中，斯琴高娃编写第3~5单元、

第12单元，孟清编写第6~8单元，谭海中编写第1、2单元，雷琳编写第9~11单元。

由于时间仓促，编者水平有限，书中难免存在疏漏和不足之处，敬请广大读者批评指正，联

系方式：378083015@。

编者

2020年6月

目录

第1单元准备工作..........................................................................................1

任务1.1认识HTML5和CSS3................................................................................................1

任务1.2搭建软件环境...........................................................................................................2

任务1.2.1安装HBuilderX.............................................................................................3

任务1.2.2安装SublimeText3........................................................................................5

任务1.3分析第一个网页........................................................................................................6

任务1.4了解网页编辑和调试技巧........................................................................................9

单元小结.................................................................................................................................10

习题.........................................................................................................................................10

第2单元HTML5常见元素............................................................................12

任务2.1认识标题元素.........................................................................................................12

任务2.2认识段落元素.........................................................................................................14

任务2.3认识水平线元素、换行元素..................................................................................15

任务2.4认识图像元素.........................................................................................................16

任务2.5认识超链接.............................................................................................................17

任务2.6认识无序列表.........................................................................................................18

任务2.7认识有序列表.........................................................................................................19

任务2.8认识自定义列表......................................................................................................20

任务2.9认识表格元素.........................................................................................................21

任务2.10认识表单元素.......................................................................................................23

任务2.11认识音频、视频元素............................................................................................24

单元小结.................................................................................................................................26

习题.........................................................................................................................................26

第3单元网页整体布局的搭建......................................................................27

任务3.1单列布局的搭建......................................................................................................27

任务3.1.1网页结构的实现...........................................................................................28

任务3.1.2网页样式的实现...........................................................................................29

任务3.2左宽右窄两列布局（F式布局）的搭建................................................................35

任务3.2.1网页结构的实现...........................................................................................35

任务3.2.2网页样式的实现...........................................................................................36

任务3.3三列布局的搭建......................................................................................................44

2HTML5+CSS3网页布局任务教程

任务3.3.1网页结构的实现...........................................................................................44

任务3.3.2网页样式的实现...........................................................................................45

单元小结.................................................................................................................................51

习题.........................................................................................................................................51

第4单元网页主体内容的构建1——文本的制作...........................................53

任务4.1“海南岛简介”页的制作（标题+段落）................................................................53

任务4.1.1网页结构的实现...........................................................................................54

任务4.1.2网页基本样式的实现...................................................................................56

任务4.1.3简介标题样式和段落样式的实现.................................................................58

任务4.2“学院简介”页的制作（头部+段落）...................................................................63

任务4.2.1网页结构的实现...........................................................................................64

任务4.2.2网页基本样式的实现...................................................................................65

任务4.2.3简介头部的样式和正文样式的实现.............................................................66

任务4.3“美丽的草原”页的制作（头部+章节）................................................................69

任务4.3.1网页结构和基本样式的实现........................................................................70

任务4.3.2文章头部样式和章节样式的实现.................................................................72

任务4.4“学院首页”两行对称栏目的制作.........................................................................73

任务4.4.1网页结构和基本样式的实现........................................................................74

任务4.4.2两列对称栏目样式的实现............................................................................78

任务4.5“学院首页”三列非对称栏目的制作......................................................................81

任务4.5.1网页结构和基本样式的实现........................................................................82

任务4.5.2三列非对称栏目样式的实现........................................................................85

任务4.6“专业介绍”页的制作（左窄右宽的两列布局）...................................................88

任务4.6.1网页结构和基本样式的实现........................................................................89

任务4.6.2左窄右宽的两列布局的实现........................................................................91

单元小结.................................................................................................................................96

习题.........................................................................................................................................96

第5单元网页主体内容的构建2——图片的制作...........................................98

任务5.1“学院首页”两行对称栏目插图.............................................................................98

任务5.2“学院首页”三列非对称栏目插图.......................................................................101

任务5.3F式布局、左图右文.............................................................................................106

任务5.4两列布局、上图下文............................................................................................109

任务5.5文字环绕图片1....................................................................................................113

任务5.6文字环绕图片2....................................................................................................116

任务5.7多张图片紧凑排列................................................................................................117

任务5.8设置背景图像1....................................................................................................121

任务5.9设置背景图像2....................................................................................................123

目录3

单元小结...............................................................................................................................125

习题.......................................................................................................................................125

第6单元网页主体内容的构建3——表格的制作.........................................127

任务6.1典型的表格...........................................................................................................127

任务6.2单元格合并...........................................................................................................131

任务6.3隔行换色表格.......................................................................................................132

单元小结...............................................................................................................................134

习题.......................................................................................................................................134

第7单元网页主体内容的构建4——表单的制作.........................................135

任务7.1制作网页一角的表单............................................................................................135

任务7.2制作网页任意位置的表单....................................................................................140

任务7.3制作遮罩层上的表单............................................................................................147

单元小结...............................................................................................................................151

习题.......................................................................................................................................151

第8单元网页页眉的构建...........................................................................153

任务8.1制作典型页眉1....................................................................................................153

任务8.2制作典型页眉2....................................................................................................156

单元小结...............................................................................................................................160

习题.......................................................................................................................................160

第9单元网页主导航的构建.......................................................................161

任务9.1制作不带下拉菜单的导航....................................................................................161

任务9.2制作带下拉菜单的导航........................................................................................163

单元小结...............................................................................................................................167

习题.......................................................................................................................................167

第10单元网页横幅广告的构建..................................................................168

任务10.1制作窄幅横幅广告..............................................................................................168

任务10.2制作宽幅横幅广告..............................................................................................169

单元小结...............................................................................................................................171

习题.......................................................................................................................................171

第11单元网页页脚的构建.........................................................................172

任务11.1制作典型页脚1...................................................................................................172

任务11.2制作典型页脚2...................................................................................................174

单元小结...............................................................................................................................178

习题.......................................................................................................................................178

4HTML5+CSS3网页布局任务教程

第12单元混合布局的综合网页的构建........................................................179

任务12.1“旅游美食网”首页的构建.................................................................................179

任务12.2仿“中国知网”首页的构建...............................................................................187

单元小结...............................................................................................................................204

习题.......................................................................................................................................205

知识解读索引................................................................................................206

第1单元准备工作

准确理解基本概念，做好上机实践准备，以及了解必要的调试技巧是学习网页制作必需

的准备工作。

通过本单元的学习，应该达到以下目标：

认识HTML5和CSS3。

能够安装和配置软件环境。

学会编辑、浏览和调试网页的方法。

掌握HTML元素、开始标签、结束标签等概念。

任务1.1认识HTML5和CSS3

任务要求

请描述HTML、HTML5、CSS、CSS3这4个概念。

任务分析

可从这4个缩写单词的字面意义出发，结合Web开发语言的发展历史给出全面的描述。

知识概括

HTML是制作Web页面的标准语言，CSS是实现网页外观的语言，它们都是Web浏览器

能解析的语言，都经过了多年的发展，经历了多个不同的标准（版本）。

任务实现

1．认识HTML

HTML（HyperTextMarkupLanguage，超文本标记语言）是构成网页的基本通用语言。超

文本是指页面内可以包含图片、链接、音乐、视频、程序等非文本元素。使用HTML编写的

文档称为HTML文档，它被浏览器解析后呈现为网页。HTML自1993年被公开发布以来，经

历了HTML2.0、HTML3.2、HTML4.0、HTML4.01、XHTML1.0、HTML5等多个版本。

2．认识HTML5

HTML5是HTML的新版本，HTML5的主要新特性有标签更语义化、表单更好用、直接

2HTML5+CSS3网页布局任务教程

支持音视频、矢量绘图、用户可以编辑网页的内容等。

有的浏览器，尤其浏览器的低版本，还不完全支持HTML5中新增的标签或属性，也就

是说无法正确解析HTML5的网页。但主流浏览器都在逐渐实现对HTML5的全面支持。

3．认识CSS

CSS（CascadingStyleSheets，层叠样式表）是用于实现网页的排版和修饰的一种计算机

语言，可以嵌入到HTML标签中，也可以编写到独立的文件中。

HTML负责网页的结构，CSS负责网页的表现，换句话说，HTML表达网页的内容，CSS

表达网页的样式。

跟HTML一样，CSS也经历了不同的版本，主要有CSS1.0、CSS2.0、CSS3.0。

CSS3是CSS的较新版本，增加了更多的CSS选择器，可以实现更简单、更强大的功能。

任务1.2搭建软件环境

任务要求

请搭建学习HTML5+CSS3所需的软件环境。微课

任务分析

学习HTML5+CSS3需要搭建的软件环境很简单，只需要安装一个网页

编辑器和一个主流浏览器。

搭建软件环境

知识概括

1．编辑器

任何一种文本编辑器都可以用于编写HTML文档，如记事本、EditPlus、NotePad++、

UltraEdit等。但是，专门的网页编辑器会提供强大的代码提示、代码检查、联想查询、代码

折叠等功能，更方便于快速正确地编写HTML和CSS代码，如SublimeText、WebStorm、HBuilder

X、Dreamweaver等。

本书推荐使用HBuilderX或SublimeText3，它们使用普遍，体积小，功能强大，易于安

装，可以合法免费获得。

2．浏览器

初学者不必考虑如何让网页兼容各种浏览器的问题，建议选择支持HTML5的浏览器。

本书推荐使用谷歌（GoogleChrome）浏览器和火狐浏览器（MozillaFirefox），它们对HTML5

的支持性好。

第1单元准备工作3

任务1.2.1安装HBuilderX

任务实现

步骤1：获得软件。

从官网https://www.dcloud.io/上可以免费下载新版的该软件，下载步骤如图1-1~图1-3

所示。

①单击“HBuilderX极客开发工具”选项。

②单击DOWNLOAD选项。

③单击“正式版”选项，“Alpha版”是还在测试中的版本。然后，可以单击“标准版”

（区分操作系统）来下载“HBuilderX”的较新版本，可以单击“上一代HBuilder下载”右边

的链接（区分操作系统）来下载“HBuilder”的较新版本，还可以单击“历史版本”下载

“HBuilderX”或“HBuilder”的历史版本。

图1-1下载HBuilderX（一）图1-2下载HBuilderX（二）

图1-3下载HBuilderX（三）

步骤2：安装软件。

HBuilderX不需要安装，将HBuilderX的压缩包解压到当前文件夹，从解压出来的文件

夹里找到HbuilderX.exe文件，右击后选择“发送到桌面快捷方式”命令。

步骤3：使用软件。

①双击HBuilderX.exe文件或桌面快捷方式即可启动HBuilderX，关闭自述文件（可在

4HTML5+CSS3网页布局任务教程

帮助菜单项里单击“自述文件”再次打开）。

②选择“文件”菜单中的“新建”“打开”等命令，可以新建和打开网站文件夹或各种

文件，常用的几个选项如图1-4所示。

③选择“文件”→“新建”→“html文件”命令，在打开的对话框中输入文件名和存

放位置，选中“空白文件”复选框，单击“创建”按钮，新建一个HTML文档，如图1-5

所示。

图1-4HBuilderX的“文件”菜单

图1-5新建HTML文件

④在文档中输入html:5，然后按【Tab】键，如图1-6所示，可看到html:5这个缩写被

扩展成了完整的一段HTML代码，如图1-7所示。

图1-6HTML5文档结构的缩写和扩展键

第1单元准备工作5

图1-7缩写被扩展生成的HTML代码

任务1.2.2安装SublimeText3

任务实现

步骤1：获得软件。

从官网上可以免费下载最新版的该软件（英文安装版，带Emmet

插件），如图1-8所示。也可以下载网上共享的汉化解压版（注意要带Emmet插件）。

图1-8SublimeText官网下载链接

Emmet插件是提供缩写扩展功能的一个软件包，大部分网页编辑器都自带该插件或支持

Emmet插件，有了该插件后网页编辑器才更方便于快速输入HTML和CSS代码。

步骤2：安装软件。

下面介绍从官网下载的SublimeText3英文安装版的安装步骤。

①双击安装包（文件名如SublimeTextBuild3207x64Setup.exe），指定软件的安装位置，

单击Next按钮，如图1-9所示。

②直接单击Next按钮，如图1-10所示。