项目1制作HBuilder百科页面1
1.1项目描述1
1.2前导知识1
1.2.1初识HTML51
1.2.2HTML5基础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初识CSS25
2.2.2引入CSS样式与CSS语法格式26
2.2.3CSS基础选择器29
2.2.4伪元素选择器35
2.2.5链接伪类36
2.2.6结构化伪类选择器37
2.2.7CSS的层叠性与继承性42
2.2.8CSS的优先级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.4box-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制作旅游网站的导航栏和banner100
5.1项目描述100
5.2前导知识100
5.2.1元素的浮动属性float100
5.2.2元素的清除浮动属性clear102
5.2.3元素的位置定位属性position103
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.4HTMLDOMVideo对象141
7.2.5嵌入音频143
7.2.6HTMLDOMAudio对象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

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