第1章 HTML5+CSS3初体验 1
1.1 HTML5和CSS3的优势 1
1.1.1 HTML5的优势 1
1.1.2 CSS3的优势 3
1.2 HTML5的基本使用 3
1.2.1 HTML5的基本语法 3
1.2.2 HTML5语义化标签 4
1.3 CSS的基本使用 6
1.3.1 CSS的引入方式 6
1.3.2 选择器 7
1.3.3 盒子模型 11
1.3.4 浮动与定位 14
1.4 【项目1-1】三栏布局页面 15
1.4.1 项目分析 15
1.4.2 编写头部和底部区域 17
1.4.3 编写主体区域 19
1.4.4 实现左侧边栏效果 20
1.4.5 实现右侧边栏效果 21
1.4.6 项目总结 22
1.5 CSS3边框属性 22
1.5.1 圆角边框 23
1.5.2 特殊边框效果 24
1.6 CSS3背景设置 27
1.7 CSS3阴影和渐变 28
1.7.1 阴影 28
1.7.2 线性渐变 30
1.7.3 径向渐变 32
1.8 【项目1-2】许愿墙 34
1.8.1 项目分析 34
1.8.2 编写许愿墙页面结构 35
1.8.3 编写许愿墙页面样式 36
1.8.4 项目总结 37
课后练习 37
第2章 CSS3文本与图标 38
2.1 HTML5中常用的文本标签 39
2.2 CSS3文本样式属性 40
2.2.1 字体样式属性 40
2.2.2 文本外观属性 41
2.2.3 链接属性 43
2.2.4 @font-face属性 44
2.3 font-awesome字体图标 46
2.3.1 下载font-awesome 46
2.3.2 使用font-awesome 47
2.4 CSS3用户界面属性 49
2.4.1 box-sizing属性 50
2.4.2 resize调整尺寸 52
2.4.3 outline-offset外形修饰 54
2.5 【项目2】软文推广页面 55
2.5.1 项目分析 55
2.5.2 编写头部页面效果 57
2.5.3 编写中间部分页面效果 59
2.5.4 编写底部页面效果 61
2.5.5 项目总结 63
课后练习 63
第3章 CSS3过渡、变形与动画 64
3.1 CSS3过渡 64
3.1.1 什么是过渡 65
3.1.2 transition的子属性 65
3.2 CSS3变形 67
3.2.1 2D转换 67
3.2.2 元素变形原点 69
3.2.3 3D转换 71
3.3 CSS3动画 75
3.3.1 @keyframes规则 76
3.3.2 animation属性 76
3.4 【项目3】摇晃的桃子 79
3.4.1 项目分析 79
3.4.2 编写摇晃桃子的基本页面效果 80
3.4.3 编写桃子的摇晃效果 82
3.4.4项目总结 86
课后练习 86
第4章 HTML5表单的应用 87
4.1 介绍表单 88
4.1.1 <form>标签 88
4.1.2 <input>标签 89
4.1.3 其他表单标签 91
4.2 【项目4-1】调查问卷页面 99
4.2.1 项目分析 99
4.2.2 编写用户基本信息页面效果 103
4.2.3 编写上传文件和文本域页面效果 106
4.2.4 项目总结 106
4.3 HTML5表单新特性 107
4.3.1 <form>新特性 108
4.3.2 <input>新特性 110
4.4 【项目4-2】登录注册页面 114
4.4.1 项目分析 114
4.4.2 编写登录页面效果 117
4.4.3 编写注册基本页面效果 119
4.4.4 实现注册信息验证页面效果 122
4.4.5 项目总结 123
课后练习 123
第5章 HTML5画布 125
5.1 JavaScript的基础知识 125
5.1.1 JavaScript引入方式 125
5.1.2 数据类型 127
5.1.3 变量 127
5.1.4 函数 127
5.1.5 对象 128
5.1.6 事件处理 129
5.1.7 DOM操作 131
5.1.8 getBoundingClientRect()方法 133
5.2 Canvas绘图基本步骤 136
5.2.1 创建画布 136
5.2.2 准备画笔 136
5.2.3 定义坐标和起始点 137
5.2.4 绘制线条图案 137
5.2.5 绘制三角形 140
5.3 Canvas常用方法 143
5.3.1 绘制几何图形 143
5.3.2 绘制笑脸 145
5.3.3 绘制图片 148
5.4 Canvas其他方法 150
5.5 【项目5-1】涂鸦板 151
5.5.1 项目分析 151
5.5.2 编写页面结构，定义画布 154
5.5.3 在JavaScript中绘制图形 155
5.5.4 实现鼠标涂鸦效果 156
5.5.5 项目总结 156
5.6 【项目5-2】发红包看照片 157
5.6.1 项目分析 157
5.6.2 编写页面结构 160
5.6.3 编写页面样式 161
5.6.4 绘制圆形图片 163
5.6.5 实现单击按钮图片显示效果 164
5.6.6 项目总结 164
课后练习 165
第6章 HTML5音频和视频 166
6.1 JavaScript编程基础 166
6.1.1 JavaScript运算符 166
6.1.2 分支结构 169
6.1.3 循环结构 170
6.2 视频和音频技术简介 172
6.3 视频的基本使用 172
6.3.1 在HTML5中嵌入视频 173
6.3.2 视频标签的常用属性 174
6.3.3 处理视频文件格式 175
6.4 音频的基本使用 176
6.4.1 在HTML5中嵌入音频 176
6.4.2 处理音频文件格式 177
6.5 音频和视频对象 178
6.5.1 音频和视频对象的常用方法 178
6.5.2 音频和视频对象的常用属性 178
6.5.3 音频和视频对象的常用事件 179
6.6 【项目6-1】视频播放器 183
6.6.1 项目分析 183
6.6.2 编写播放器页面结构 185
6.6.3 编写播放器页面样式 186
6.6.4 计算视频播放的总时长 191
6.6.5 实现视频播放和暂停效果 191
6.6.6 实现进度条显示效果 192
6.6.7 实现视频全屏显示效果 192
6.6.8 实现视频播放完成后的重置操作 193
6.6.9 实现单击进度条视频跳转效果 193
6.6.10使用Esc键退出全屏 194
6.6.11使用按键控制视频的播放和暂停 194
6.6.12项目总结 195
6.7 【项目6-2】音乐播放器 195
6.7.1 项目分析 195
6.7.2 编写音乐播放器页面结构 202
6.7.3 编写音乐播放器页面样式 203
6.7.4 实现歌词控制栏效果 205
6.7.5 实现播放器样式效果 207
6.7.6 实现音频文件的播放功能 211
6.7.7 项目总结 212
课后练习 212
第7章 响应式Web设计 213
7.1 响应式Web设计基础 214
7.1.1 视口 214
7.1.2 媒体查询 216
7.1.3 百分比布局 218
7.1.4 栅格系统 221
7.2 响应式常见实现方式 222
7.2.1 媒体查询实现响应式布局 222
7.2.2 弹性盒布局 224
7.2.3 弹性盒常用属性 225
7.2.4 弹性盒属性的综合运用 232
7.3 【项目7-1】环保网站 235
7.3.1 项目分析 235
7.3.2 编写HTML结构代码 239
7.3.3 编写style.css公共样式代码 239
7.3.4 实现header响应式效果 240
7.3.5 实现banner响应式效果 245
7.3.6 实现中间区域效果 246
7.3.7 实现底部区域效果 251
7.3.8 项目总结 252
7.4 【项目7-2】学习教程库 252
7.4.1 项目分析 252
7.4.2 编写HTML结构代码 256
7.4.3 编写标题部分样式代码 257
7.4.4 编写免费教程资源部分样式代码 258
7.4.5 编写媒体查询样式代码 260
7.4.6 项目总结 262
课后练习 262
第8章 Bootstrap（上） 263
8.1 Bootstrap简介 264
8.1.1 什么是Bootstrap 264
8.1.2 Bootstrap的优势 265
8.1.3 Bootstrap 4的新特性 265
8.2 Bootstrap的下载和环境安装 266
8.2.1 Bootstrap的下载方式 266
8.2.2 下载Bootstrap预编译文件 267
8.2.3 下载Bootstrap源文件手动编译 269
8.2.4 使用CDN加载Bootstrap 271
8.2.5 在HTML中引入Bootstrap 272
8.3 Bootstrap布局容器 274
8.3.1 初识布局容器 274
8.3.2 栅格系统 275
8.3.3 栅格基本使用 276
8.3.4 响应式布局工具 276
8.4 Flex弹性布局 277
8.5 SVG矢量图的使用 278
8.6 Bootstrap常用组件 282
8.6.1 表单 283
8.6.2 输入框组 285
8.6.3 按钮 286
8.6.4 分页 288
8.7 辅助样式 289
8.7.1 文本颜色 289
8.7.2 背景颜色 290
8.7.3 设置元素间距 291
8.8 【项目8】PC端登录界面 293
8.8.1 项目分析 293
8.8.2 编写HTML结构代码 295
8.8.3 设置body和html样式 295
8.8.4 实现页面垂直居中显示 295
8.8.5 实现头部head部分 295
8.8.6 实现中间center部分 295
8.8.7 实现底部footer部分 295
8.8.8 项目总结 295
课后练习 295
第9章 Bootstrap（下） 295
9.1 导航 295
9.1.1 基础导航 295
9.1.2 标签式导航 295
9.1.3 pills导航 295
9.1.4 导航对齐方式 295
9.1.5 导航下拉菜单 295
9.1.6 标签页切换 295
9.2 导航栏 295
9.2.1 基础导航栏 295
9.2.2 设置导航栏的标题 295
9.2.3 导航栏折叠效果 295
9.3 卡片 295
9.3.1 卡片结构 295
9.3.2 卡片主体内容 295
9.3.3 设置带有图片的卡片 295
9.3.4 设置卡片背景图 295
9.4 【项目9】后台管理系统 295
9.4.1 项目展示 295
9.4.2 安装Node.js环境 295
9.4.3 使用Sass编写样式代码 295
9.4.4 安装Gulp 295
9.4.5 下载和安装Chart.js图表库 295
9.4.6 引入Feather图标库 295
9.4.7 搭建项目目录结构 295
9.4.8 创建模板文件 295
9.4.9 实现导航栏 295
9.4.10 实现网页中间部分布局 295
9.4.11 编写中间部分结构代码 295
9.4.12 实现侧边导航布局 295
9.4.13 实现右侧内容布局 295
9.4.14 实现左侧导航激活效果 295
9.4.15 解决iframe框架高度自适应 295
9.4.16 项目总结 295
课后练习 295