《HTML 5+CSS 3网页开发实战精解》配带1张光碟，内容为《HTML 5+CSS 3网页开发实战精解》重点内容的教学视频和《HTML 5+CSS 3网页开发实战精解》涉及的原始码。《HTML 5+CSS 3网页开发实战精解》共17章，分为3篇。第1篇为技术概览，简要介绍HTML5标準和CSS3层叠样式表等内容；第2篇为基于CSS3的Web界而设计实战，重点介绍文字、背景、框线、盒布局、多列布局、动画、渐变、支持多种设备的样式表等内容；第3篇为基于HTML5的Web套用开发实战，重点介绍绘图、音频和视频、新型表单、拖放、本地存储、离线套用、跨源通信、WebSocket双向通信、多执行绪和地理位置等内容。

第1篇 技术概览

第1章 HTML 5标準（教学视频：46分钟） 2

1.1 HTML 5介绍 2

1.1.1 HTML 5的历史背景 2

1.1.2 HTML 5的现状 3

1.1.3 良好的设计理念 4

1.1.4 新增的HTML 5原生功能 5

1.1.5 HTML 5带来的好处 6

1.2 全新的HTML 5 7

1.2.1 从“头”说起 7

1.2.2 明确简洁的结构 7

1.2.3 新增的元素 10

1.2.4 废弃的元素 11

1.2.5 全新的选择器 12

1.2.6 脚本日誌和调试 12

1.3 HTML 5的未来发展 14

1.4 小结 15

1.5 习题 15

第2章 CSS 3层叠样式表（教学视频：25分钟） 16

2.1 CSS 3简介 16

2.1.1 CSS 3的历史背景 16

2.1.2 CSS 3的发展现状 17

2.1.3 CSS 3新特性预览 18

2.2 增强的选择器功能 20

2.2.1 元素选择符和关係选择符 20

2.2.2 属性选择符 20

2.2.3 结构伪类选择符 23

2.2.4 UI元素状态伪类选择符 26

2.2.5 伪元素选择符 27

2.3 小结 28

2.4 习题 28

第2篇 基于CSS 3的Web界面设计实战

第3章 文本、背景、框线不再单调（教学视频：96分钟） 30

3.1 文本与字型 30

3.1.1 多样化的文本阴影——text-shadow属性 30

3.1.2 溢出文本处理——text-overflow属性 34

3.1.3 对齐的文字才好看——word-wrap和word-break属性 35

3.1.4 使用伺服器端的字型——@font-face规则 37

3.1.5 实验室：丰富的文字样式 40

3.2 色彩模式和不透明度 41

3.2.1 不再为配色发愁——HSL色彩模式 42

3.2.2 含不透明度的——HSLA色彩模式 44

3.2.3 含不透明度的——RGBA色彩模式 45

3.2.4 不透明度——opacity属性 46

3.2.5 实验室：半透明的遮蔽层 48

3.3 背景 51

3.3.1 元素里定义多个背景图片 51

3.3.2 指定背景的原点位置 52

3.3.3 指定背景的显示区域 55

3.3.4 指定背景图像的大小 57

3.3.5 实验室：设计信纸的效果 59

3.4 框线 62

3.4.1 设计圆角框线——border-radius属性 62

3.4.2 设计图像框线——border-image属性 68

3.4.3 设计多色框线——border-color属性 76

3.4.4 实验室：使用新技术设计网页 78

3.5 小结 83

3.6 习题 83

第4章 灵活的盒布局和界面设计（教学视频：69分钟） 84

4.1 灵活的盒布局 84

4.1.1 开启盒布局 84

4.1.2 元素的布局方向——box-orient属性 86

4.1.3 元素的布局顺序——box-direction属性 87

4.1.4 调整元素的位置——box-ordinal-group属性 89

4.1.5 弹性空间分配——box-flex属性 91

4.1.6 元素的对其方式——box-pack和box-align属性 94

4.1.7 实验室：使用新型盒布局设计网页 97

4.2 增强的盒模型 101

4.2.1 盒子阴影——box-shadow属性 101

4.2.2 盒子尺寸的计算方法——box-sizing属性 106

4.2.3 盒子溢出内容处理——overflow-x和overflow-y属性 108

4.2.4 实验室：设计网站服务条款页面 109

4.3 增强的用户界面设计 112

4.3.1 允许用户改变尺寸——resize属性 112

4.3.2 定义外轮廓线——outline属性 113

4.3.3 伪装的元素——appearance属性 118

4.3.4 为元素添加内容——content属性 120

4.3.5 实验室：设计一个省份选择盘 124

4.4 小结 125

4.5 习题 126

第5章 你一直期待的多列布局（教学视频：21分钟） 127

5.1 多列布局基础 127

5.1.1 多列属性columns 127

5.1.2 列宽属性column-width 129

5.1.3 列数属性column-count 129

5.1.4 列间距属性column-gap 131

5.1.5 定义列分隔线——column-rule属性 132

5.1.6 定义横跨所有列——column-span属性 135

5.2 实验室：模仿杂誌的多列版式 136

5.3 小结 138

5.4 习题 138

第6章 酷炫的动画和渐变（教学视频：82分钟） 139

6.1 CSS 3变形基础 139

6.1.1 元素的变形——transform属性 139

6.1.2 旋转 139

6.1.3 缩放和翻转 141

6.1.4 移动 143

6.1.5 倾斜 145

6.1.6 矩阵变形 147

6.1.7 同时使用多个变形函式 149

6.1.8 定义变形原点——transform-origin属性 151

6.1.9 实验室：设计图片画廊 153

6.2 CSS 3过渡效果 156

6.2.1 实现过渡效果——transition属性 156

6.2.2 指定过渡的属性——transition-property属性 157

6.2.3 指定过渡的时间——transition-duration属性 159

6.2.4 指定过渡延迟时间——transition-delay属性 160

6.2.5 指定过渡方式——transition-timing-function属性 161

6.2.6 实验室：製作滑动的选单 162

6.3 CSS 3动画设计 165

6.3.1 关键帧动画——@keyframes规则 165

6.3.2 动画的实现——animation属性 166

6.3.3 实验室：永不停止的风车 170

6.4 CSS 3渐变设计 172

6.4.1 CSS线性渐变 172

6.4.2 CSS径向渐变 175

6.4.3 实验室：设计渐变的按钮 177

6.5 小结 179

6.6 习题 180

第7章 支持多种设备的样式表方案（教学视频：15分钟） 181

7.1 媒体查询 181

7.1.1 @media规则的语法 181

7.1.2 使用Media Queries连结外部样式表档案 185

7.2 实验室：自适应萤幕的样式表方案 185

7.3 小结 191

7.4 习题 191

第3篇 基于HTML 5的Web套用开发实战

第8章 绘製图形如此简单（教学视频：78分钟） 194

8.1 Canvas简介 194

8.2 Canvas基本知识 195

8.2.1 构建Canvas元素 195

8.2.2 使用JavaScript实现绘图的流程 196

8.3 使用Canvas绘图 198

8.3.1 绘製矩形 198

8.3.2 使用路径 201

8.3.3 图形组合 205

8.3.4 绘製曲线 207

8.3.5 使用图像 212

8.3.6 剪裁区域 214

8.3.7 绘製渐变 216

8.3.8 描边属性 219

8.3.9 模式 221

8.3.10 变换 222

8.3.11 使用文本 226

8.3.12 阴影效果 228

8.3.13 状态的保存与恢复 229

8.3.14 操作像素 230

8.4 实验室：在Canvas中实现动画 232

8.5 小结 236

8.6 习题 236

第9章 便捷的音频和视频（教学视频：44分钟） 237

9.1 audio和video基础知识 237

9.1.1 线上多媒体的发展 237

9.1.2 多媒体术语 238

9.1.3 HTML 5多媒体档案格式 239

9.1.4 功能缺陷及未来趋势 240

9.2 使用HTML 5的audio和video元素 241

9.2.1 在网页中使用audio和video 241

9.2.2 audio和video的特性和属性 242

9.2.3 audio和video的方法 246

9.2.4 audio和video的事件 248

9.3 实验室：自定义播放工具条 250

9.4 小结 254

9.5 习题 254