近年来，互联网在各个领域的普及，使Web前端开发技术的发展速度十分迅猛，而HTML5+CSS3更是已经成为Web前端开发技术的主流，从而使Web前端开发技术具备了更多新的功能特性。本书从Web前端开发实际应用的角度出发，以企业实际项目为核心，由浅入深地讲解了HTML5、CSS3及响应式Web前端开发技术。本书共10个项目，前9个项目从项目描述、前导知识、项目分析、项目实践、项目总结5个方面对各项目进行了系统的讲解，帮助读者快速理解并掌握各项目的重点知识，最后通过项目10的企业真实项目实战对响应式Web前端开发全过程进行梳理和讲解，全面提高读者分析问题、解决问题及动手操作的能力。本书包含配套教学计划、教案、教学PPT、教学案例、源代码、课后习题等资源，读者可登录华信教育资源网（http://www.hxedu.com.cn）注册后免费下载。本书适用面广，既可作为高职院校、培训机构的Web前端开发教材，也可作为网页设计、网站开发、网页编程等课程的教材及参考书。

孙晓娟，参加工作以来，一直从事Web开发和计算机软件方向的研究与教学工作，撰写论文20余篇，多次获得省级教学成果奖，教育部优秀指导教师等荣誉。2017年至今，多次担任辽宁省职业技能大赛高职、中职组的计算机检测与维修、电子商务赛项的评委。

项目1 制作HBuilder百科页面 1
1.1 项目描述 1
1.2 前导知识 1
1.2.1 初识HTML5 1
1.2.2 HTML5基础 4
1.2.3 文本控制元素 6
1.2.4 图像控制元素 9
1.2.5 超链接元素 9
1.2.6 列表元素 10
1.2.7 结构元素 13
1.2.8 分组元素 18
1.2.9 内容交互元素 20
1.3 项目分析 21
1.3.1 页面结构分析 21
1.3.2 样式分析 22
1.4 项目实践 23
1.4.1 制作页面结构 23
1.4.2 定义CSS样式 24
1.5 项目总结 24
项目2 制作化妆品展示列表页面 25
2.1 项目描述 25
2.2 前导知识 25
2.2.1 初识CSS 25
2.2.2 引入CSS样式与CSS语法格式 26
2.2.3 CSS基础选择器 29
2.2.4 伪元素选择器 35
2.2.5 链接伪类 36
2.2.6 结构化伪类选择器 37
2.2.7 CSS的层叠性与继承性 42
2.2.8 CSS的优先级 44
2.2.9 字体样式属性与文本样式属性 45
2.3 项目分析 52
2.3.1 页面结构分析 52
2.3.2 样式分析 52
2.4 项目实践 53
2.4.1 制作页面结构 53
2.4.2 定义CSS样式 54
2.5 项目总结 54
项目3 制作电商主播排行榜页面 55
3.1 项目描述 55
3.2 前导知识 55
3.2.1 初识盒模型 55
3.2.2 边框属性 57
3.2.3 边距属性 64
3.2.4 box-sizing属性 67
3.2.5 阴影属性 68
3.2.6 渐变属性 69
3.2.7 背景属性 72
3.3 项目分析 77
3.3.1 页面结构分析 77
3.3.2 样式分析 78
3.4 项目实践 78
3.4.1 制作页面结构 78
3.4.2 定义CSS样式 78
3.5 项目总结 79
项目4 制作家装行业产品展示页面 80
4.1 项目描述 80
4.2 前导知识 81
4.2.1 过渡 81
4.2.2 变形 85
4.2.3 动画 92
4.3 项目分析 94
4.3.1 页面结构分析 94
4.3.2 样式分析 95
4.4 项目实践 95
4.4.1 制作页面结构 95
4.4.2 定义CSS样式 97
4.5 项目总结 99
项目5 制作旅游网站的导航栏和banner 100
5.1 项目描述 100
5.2 前导知识 100
5.2.1 元素的浮动属性float 100
5.2.2 元素的清除浮动属性clear 102
5.2.3 元素的位置定位属性position 103
5.2.4 元素的类型转换 108
5.3 项目分析 111
5.3.1 页面结构分析 111
5.3.2 样式分析 111
5.4 项目实践 111
5.4.1 制作页面结构 111
5.4.2 定义CSS样式 112
5.5 项目总结 114
项目6 制作信息注册页面 115
6.1 项目描述 115
6.2 前导知识 115
6.2.1 表单概述 115
6.2.2 表单元素及属性 117
6.2.3 表单校验 129
6.3 项目分析 131
6.3.1 页面结构分析 131
6.3.2 样式分析 132
6.4 项目实践 132
6.4.1 制作页面结构 132
6.4.2 定义CSS样式 135
6.5 项目总结 138
项目7 制作视频播放页面 139
7.1 项目描述 139
7.2 前导知识 139
7.2.1 多媒体的格式 139
7.2.2 支持视频和音频的浏览器 140
7.2.3 嵌入视频 140

7.2.4 HTML DOM Video对象 141
7.2.5 嵌入音频 143
7.2.6 HTML DOM Audio对象 143
7.2.7 视频、音频中的source
元素 145
7.3 项目分析 145
7.3.1 页面结构分析 145
7.3.2 样式分析 146
7.4 项目实践 146
7.4.1 制作页面结构 146
7.4.2 定义CSS样式 147
7.5 项目总结 148
项目8 制作垃圾分类页面 149
8.1 项目描述 149
8.2 前导知识 150
8.2.1 视口 150
8.2.2 媒体查询 152
8.2.3 百分比布局 158
8.3 项目分析 161
8.3.1 页面结构分析 161
8.3.2 样式分析 161
8.4 项目实践 162
8.4.1 制作页面结构 162
8.4.2 定义CSS样式 164
8.5 项目总结 171
项目9 制作个人信息页面 172
9.1 项目描述 172
9.2 前导知识 173
9.2.1 栅格系统 173
9.2.2 弹性盒布局 176
9.3 项目分析 190
9.3.1 页面结构分析 190
9.3.2 样式分析 190
9.4 项目实践 191
9.4.1 制作页面结构 191
9.4.2 定义CSS样式 194
9.5 项目总结 201
项目10 制作物流公司响应式网站 202
10.1 项目描述 202
10.2 页面结构搭建 206
10.2.1 页面结构搭建的内容 206
10.2.2 模块结构 206
10.2.3 代码实现 206
10.3 顶部通栏 208
10.3.1 顶部通栏结构 208
10.3.2 代码实现 208
10.4 导航栏 209
10.4.1 导航栏结构 209
10.4.2 代码实现 210
10.5 轮播图 211
10.5.1 轮播图结构 211
10.5.2 代码实现 212
10.6 关于我们模块 214
10.6.1 关于我们模块结构 214
10.6.2 代码实现 215
10.7 我们的优势模块 216
10.7.1 我们的优势模块结构 216
10.7.2 代码实现 217
10.8 我们的服务模块 219
10.8.1 我们的服务模块结构 219
10.8.2 代码实现 221
10.9 运输物流模块 222
10.9.1 运输物流模块结构 222
10.9.2 代码实现 223
10.10 最新资讯模块 224
10.10.1 最新资讯模块结构 224
10.10.2 代码实现 225
10.11 版尾 227
10.11.1 版尾结构 227
10.11.2 代码实现 228
10.12 项目总结 228
参考文献 228