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

项目1 制作HBuilder百科页面1 1.1 项目描述1 1.2 前导知识1 1.2.1 初识HTML51 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 初识CSS25 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 制作旅游网站的导航栏和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.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