图书简介:
项目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
展开
随着多设备、浏览器和Web标准的演变,作为依托互联网发展起来的网站制作正面临着新的挑战。开发者不仅要注重网站的信息丰富、功能齐备、页面精美、操作流畅,还要关注网站能适合多设备浏览,因此,响应式Web开发技术迅速成为移动互联网开发的热点。
Web前端开发工程师正在成为兼顾逻辑、性能、交互、体验的综合性岗位。现在互联网行业普遍缺少Web前端开发工程师,这个问题不仅存在于刚起步的创业公司,上市公司也同样存在。
本书以Web前端开发工程师岗位需求为目标选取课程内容,采用以项目为导向和实践一体化的学习领域课程模式,以Web前端开发工程师岗位真实工作任务为载体,以具体的产品为载体内涵,以Web前端开发工程师职业资格为课程标准的依据,强调学生的主体作用,在基于职业学习情境中,通过师生之间的互动和合作,在自己“做”的实践中,使学生习得实践技能,掌握所学知识。
本书由辽宁生态工程职业学院与辽宁图灵网络科技有限公司共同开发,是一本校企合作开发教材。本书采用项目驱动的教学模式,工学结合地选取内容,按照项目实施的方式进行编写,重点以HTML5、CSS3和响应式Web前端开发为主线进行编写。
本书共10个项目,由浅入深地讲解了Web前端开发的相关知识点,其中,项目1~项目4由孙晓娟(辽宁生态工程职业学院)编写,项目5由冯颖、赵翊程(辽宁生态工程职业学院)编写,项目6、项目8和项目9由张亚林(辽宁生态工程职业学院)编写,项目7由赵东明(辽宁机电职业技术学院)编写,项目10由刘雷(辽宁生态工程职业学院)编写。
在编写本书过程中,编者参阅了大量书籍及互联网资料,还得到了来自Web前端开发实践一线、具有实际开发经验的辽宁图灵网络科技有限公司孙明凯总经理的支持,谨在此对参考借鉴的书刊资料的作者和给予我们帮助的企业工程师表示真诚的谢意。由于编者水平和时间有限,书中难免存在不足之处,恳请各位专家和读者不吝赐教。
编 者
展开