目 录
模块一 HTML5 基础
项目1 制作个人信息展示页面2
任务1.1 搭建HTML 文档框架3
1.1.1 编写<html>、<head> 和<body> 核心结构标签.3
1.1.2 使用<meta> 标签设置字符集（charset）与视口（viewport）信息 8
1.1.3 添加<title> 标签与注释说明文档结构11
任务1.2 填充个人信息内容13
1.2.1 用<p> 和<h1>~<h6> 标签编写个人简介文本.13
1.2.2 使用<img> 标签插入照片并配置路径16
1.2.3 使用HTML5 语义化标签18
任务1.3 使用CSS 样式修饰页面23
1.3.1 使用CSS 样式定义页面字体类型 .23
1.3.2 使用CSS 样式设置段落行高与首行缩进 .27
1.3.3 使用CSS 样式调整照片尺寸与边框样式 .29
项目总结34
项目拓展34
项目2 设计制作美食推荐网站.35
任务2.1 构建美食推荐网站HTML 基础结构36
2.1.1 设计HTML 基本结构与<meta> 标签配置方法36
2.1.2 网站标题设置与HTML 注释规范的应用.38
2.1.3 使用无序列表与超链接设计网站首页 40
任务2.2 制作美食展示功能页面 45
2.2.1 使用有序列表设计美食排行榜页面 .46
2.2.2 图像标签路径配置与响应式设置 57
任务2.3 制作美食详情与美食视频页面60
2.3.1 使用超链接与锚点链接设计美食详情页面 .61
2.3.2 使用视频标签设计美食视频页面 65
项目总结 67
项目拓展67
模块二 CSS3 技术
项目3 设计个人博客页面70
任务3.1 设计个人博客页面的布局 71
3.1.1 使用CSS3 浮动与清除浮动设计页面布局 71
3.1.2 使用CSS3 定位属性设计导航栏模块 .77
3.1.3 使用BFC 原理解决布局塌陷问题.85
任务3.2 设计博客文章页面样式 89
3.2.1 使用CSS3 字体属性与文本缩进样式 .89
3.2.2 使用CSS3 行高与段落间距样式 94
3.2.3 使用CSS3 渐变背景与阴影效果样式 100
任务3.3 设计博客网站交互元素 .103
3.3.1 使用CSS3 伪类选择器实现交互效果 103
3.3.2 使用CSS3 属性选择器设置表单元素的样式 105
3.3.3 使用CSS3 动画过渡实现交互效果 108
项目总结 .114
项目拓展 .115
项目4 设计制作电商产品展示页面 116
任务4.1 设计产品图片展示页面.117
4.1.1 盒子模型边框与内边距的设置 .117
4.1.2 使用列表样式设置缩略图效果 .123
4.1.3 使用CSS3 transform 实现图片缩放效果.128
任务4.2 设计产品详情页面131
4.2.1 使用Flexbox 布局设计产品详情页面 131
4.2.2 使用CSS 文本修饰样式 133
4.2.3 设置盒子模型外边距与间距 135
任务4.3 设计产品规格参数页面.138
4.3.1 使用表格标签与边框样式 138
4.3.2 设计表格隔行变色 141
4.3.3 设计表格响应式布局 143
项目总结.146
项目拓展.147
项目5 设计制作企业网站首页148
任务5.1 设计企业网站首页布局.149
5.1.1 使用Flexbox 布局设计首页 149
5.1.2 使用Grid 布局.152
5.1.3 使用浮动布局 155
任务5.2 设计视觉效果159
5.2.1 使用渐变背景与视差滚动样式 .159
5.2.2 使用CSS 动画实现元素交互效果 161
5.2.3 使用滤镜效果与阴影增强视觉效果 164
任务5.3 设计实现页面响应式效果166
5.3.1 使用“媒体查询”技术 .166
5.3.2 优化移动端字体与按钮尺寸 169
5.3.3 设计图片自适应缩放与响应式效果 171
项目总结.174
项目拓展.175
模块三 JavaScript 应用
项目6 制作个人待办清单页面178
任务6.1 设计制作待办清单页面基础结构179
6.1.1 搭建待办清单页面基本HTML 结构.179
6.1.2 使用变量、数组存储待办事项数据 181
任务6.2 设计制作添加与显示待办事项页面 188
6.2.1 使用JavaScript 函数.189
6.2.2 绑定“添加”按钮单击事件 193
6.2.3 动态创建列表项用于显示数据 .198
任务6.3 设计制作待办事项的“完成”与“删除”功能 .201
6.3.1 为待办事项列表项添加“完成”功能 .201
6.3.2 为待办事项列表项添加“删除”功能 .205
6.3.3 使用条件判断处理空输入 210
项目总结.214
项目拓展.214
项目7 设计制作商品详情动态展示页面.215
任务7.1 搭建商品详情页基础结构 216
7.1.1 搭建页面HTML 与CSS 结构216
7.1.2 使用querySelector 获取元素信息219
7.1.3 定义商品数据对象 225
任务7.2 实现商品图片切换功能 .228
7.2.1 为每个缩略图绑定单击事件 228
7.2.2 实现商品图片切换功能 .231
7.2.3 设置图片切换时缩略图高亮样式 233
任务7.3 实现规格选择与数量计算 235
7.3.1 单击“颜色”“存储规格”按钮时记录选中状态 .235
7.3.2 设计通过“+”“ – ”按钮修改input 值模块.239
7.3.3 动态显示用户选择商品数据 241
项目总结.246
项目拓展.246
项目8 设计制作在线调查问卷系统页面.247
任务8.1 搭建问卷表单页面基础结构248
8.1.1 设计表单整体结构 248
8.1.2 设计表单中分模块的内容 251
8.1.3 添加核心表单元素 252
任务8.2 使用CSS 样式美化问卷表单页面256
8.2.1 设计分模块布局 .256
8.2.2 优化表单元素样式 258
8.2.3 设计响应式样式与状态样式 261
任务8.3 使用JavaScript 实现问卷表单页面的验证功能.262
8.3.1 绑定验证事件 263
8.3.2 设计核心验证规则 265
8.3.3 设计错误提示模块 267
任务8.4 设计问卷表单页面的动态交互效果.269
8.4.1 设计复选框“其他选项”与文本框的联动 269
8.4.2 设计range 滑块滑动时实时更新提示信息页面 .272
8.4.3 设计填写进度实时提示效果 274
任务8.5 设计问卷数据本地存储与结果展示功能 275
8.5.1 设计问卷数据保存功能 .276
8.5.2 设计提交成功反馈及结果展示页面 278
项目总结.281
项目拓展.282
项目9 设计制作个人作品集页面.283
任务9.1 设计制作个人作品集首页 284
任务9.2 设计制作技术文档介绍页 286
任务9.3 设计制作作品图片展示页 288
项目总结.290
项目拓展.290
参考文献291
