项目1 Web前端开发职业前景与开发初体验 1
任务1.1 认识Web前端开发工程师 1
【任务目标】 1
【导学知识】 2
1.1.1 Web前端开发涉及的岗位 2
1.1.2 Web前端开发的发展方向 2
【任务实现】 3
任务1.2 熟悉Web前端开发相关技术 4
【任务目标】 4
【导学知识】 5
1.2.1 Web前端开发核心技术 5
1.2.2 相关专业术语 6
1.2.3 Web前端开发工具简介 7
1.2.4 HBuilder X 8
【任务实现】 10
任务1.3 熟悉Web前端开发工作流程 11
【任务目标】 11
【导学知识】 12
1.3.1 Web前端开发工作流程 12
1.3.2 Web前端开发岗位分工 13
1.3.3 Web前端项目目录结构 14
【任务实现】 15
任务1.4 初识HTML5页面 16
【任务目标】 16
【导学知识】 17
1.4.1 项目目录及文件 17
1.4.2 网页基本标签结构分析 17
【任务实现】 18
【任务拓展】 20
项目2 制作5G新时代科学知识页面 25
任务2.1 规划页面的布局 25
【任务目标】 25
【导学知识】 26
2.1.1 传统的布局标签 26
2.1.2 HTML5新增语义化标签 26
【任务实现】 27
任务2.2 构建网页的内容 28
【任务目标】 28
【导学知识】 29
2.2.1 文本控制标签 29
2.2.2 图像和超链接 31
2.2.3 表格和列表 33
【任务实现】 36
任务2.3 美化网页的样式 37
【任务目标】 37
【导学知识】 37
2.3.1 使用CSS的方式 37
2.3.2 CSS选择器 38
2.3.3 文本格式化 40
【任务实现】 45
项目3 制作背包客旅行网站注册和登录页面 50
任务3.1 创建背包客旅行网站注册和登录页面 50
【任务目标】 50
【导学知识】 51
3.1.1 初识表单 51
3.1.2 创建表单 52
3.1.3 构建表单控件 53
【任务实现】 58
任务3.2 美化背包客旅行网站注册和登录页面 60
【任务目标】 60
【导学知识】 61
3.2.1 定义页面布局和基础样式 61
3.2.2 使用CSS控制表单样式 61
【任务实现】 61
项目4 开发今日影评网站 68
任务4.1 制作今日影评网站剧情简介页面 68
【任务目标】 68
【导学知识】 69
4.1.1 应用CSS样式规则 69
4.1.2 引入CSS 70
4.1.3 CSS中的特殊选择器 70
【任务实现】 72
任务4.2 使用CSS控制元素样式 75
【任务目标】 75
【导学知识】 76
4.2.1 CSS图像 76
4.2.2 CSS链接 76
4.2.3 CSS表格 76
4.2.4 CSS列表 77
4.2.5 CSS表单 77
【任务实现】 78
任务4.3 使用CSS高级设置 82
【任务目标】 82
【导学知识】 83
4.3.1 CSS组合选择器 83
4.3.2 CSS的特征 83
4.3.3 CSS优先级 84
4.3.4 CSS排错 85
【任务实现】 85
项目5 美化传统文化网 93
任务5.1 制作图片展以及图像边框 93
【任务目标】 93
【导学知识】 94
5.1.1 认识盒子模型 94
5.1.2 盒子的外边距与内边距 94
5.1.3 盒子的宽度与高度 96
5.1.4 盒子边框属性 99
5.1.5 轮廓属性 100
5.1.6 盒子阴影属性 100
5.1.7 CSS3新增盒子模型属性 101
【任务实现】 104
【任务拓展】 107
任务5.2 添加创意渐变色与多重图像背景 108
【任务目标】 108
【导学知识】 109
5.2.1 背景颜色 109
5.2.2 背景图像 109
5.2.3 CSS3新增渐变 112
【任务实现】 114
【任务拓展】 116
项目6 优化国学文化网 121
任务6.1 转换元素类型 121
【任务目标】 121
【导学知识】 122
6.1.1 认识元素类型 122
6.1.2 转换元素类型 122
6.1.3 对象的显示与隐藏 123
【任务实现】 123
任务6.2 处理元素内容溢出问题 124
【任务目标】 124
【导学知识】 124
6.2.1 认识溢出 124
【任务实现】 124
任务6.3 改变元素排列方式 126
【任务目标】 126
【导学知识】 126
6.3.1 认识浮动 126
6.3.2 清除浮动 128
6.3.3 父级塌陷 128
【任务实现】 131
【任务拓展】 134
任务6.4 重定元素间位置关系 134
【任务目标】 134
【导学知识】 135
6.4.1 认识定位 135
6.4.2 认识偏移 135
6.4.3 定位案例 136
【任务实现】 139
【任务拓展】 141
任务6.5 调整元素的层叠顺序 142
【任务目标】 142
【导学知识】 142
6.5.1 认识层叠 142
【任务实现】 143
项目7 开发响应式音乐播放页面 148
任务7.1 设计响应式页面 148
【任务目标】 148
【导学知识】 149
7.1.1 响应式布局简介 149
7.1.2 响应式页面设计 150
【任务实现】 154
【任务拓展】 157
任务7.2 设计响应式音乐播放页面 160
【任务目标】 160
【导学知识】 161
7.2.1 音频/视频嵌入技术概述 161
7.2.2 在HTML5中嵌入音频 161
7.2.3 在HTML5中嵌入视频 162
【任务实现】 164
【任务拓展】 169
项目8 制作游乐场摩天轮动画效果页面 174
任务8.1 创建网页导航栏 174
【任务目标】 174
【导学知识】 175
8.1.1 认识transform属性 175
8.1.2 二维变形 175
8.1.3 三维变形 179
【任务实现】 186
任务8.2 设计爱心照片墙 188
【任务目标】 188
【导学知识】 189
8.2.1 过渡简介 189
8.2.2 过渡属性的使用 189
【任务实现】 191
【任务拓展】 195
任务8.3 制作游乐场摩天轮动画效果 195
【任务目标】 195
【导学知识】 196
8.3.1 animation动画 196
8.3.2 @keyframes规则 196
8.3.3 animation属性 197
【任务实现】 199
项目9 开发果果鲜水果电商PC端网站 207
任务9.1 创建网站项目目录 208
【任务目标】 208
【导学知识】 208
9.1.1 分析网站项目目录结构 208
9.1.2 搭建网站项目目录结构 209
9.1.3 网页基本代码 209
【任务实现】 209
任务9.2 开发网站 214
【任务目标】 214
【导学知识】 214
9.2.1 网站常见模块分析 214
9.2.2 版心 215
【任务实现】 215
任务9.3 使用字体图标美化网站 229
【任务目标】 229
【导学知识】 230
9.3.1 字体图标概述 230
9.3.2 iconfont字体图标库的下载 230
【任务实现】 231
任务9.4 开发网站动效交互 234

【任务目标】 234
【导学知识】 234
9.4.1 JavaScript概述 234
9.4.2 引入外部JavaScript代码 234
9.4.3 在<script>标签中写代码 235
【任务实现】 235
项目10 开发果果鲜水果电商移动端网站 240
任务10.1 创建移动端项目目录 241
【任务目标】 241
【导学知识】 241
10.1.1 分析项目开发需求 241
10.1.2 搭建网站开发目录 241
【任务实现】 242
任务10.2 实现移动端适配 243
【任务目标】 243
【导学知识】 243
10.2.1 移动端适配原理 243
10.2.2 完成移动端网站适配配置 243
【任务实现】 244
任务10.3 开发移动端项目网站 245
【任务目标】 245
【导学知识】 245
10.3.1 移动端仿真模式 245
10.3.2 弹性盒子概述 246
【任务实现】 247