目  录

第1 章 HTML5 基础 1

视频讲解：27 分钟

1.1 HTML5概述 2

1.2 HTML5设计原则 3

1.2.1 避免不必要的复杂性  3

1.2.2 支持已有内容  4

1.2.3 解决实际问题  4

1.2.4 用户怎么使用就怎么设计规范  5

1.2.5 优雅地降级  5

1.2.6 支持的优先级  6

1.3 HTML5语法特性 6

1.3.1 文档和标记  6

1.3.2 宽松的约定  7

1.4 HTML5基本结构 8

1.4.1 新建HTML5文档  9

1.4.2 网页顶部和头部  10

1.4.3 网页主体  10

1.4.4 认识标签 11

1.4.5 网页文本内容  13

1.4.6 网页非文本内容  13

1.5 案例实战 14

1.5.1 编写第一个HTML5文档  14

1.5.2 比较HTML4与HTML5文档结构  15

1.6 在线练习 16

第2 章 CSS3 基础 17

视频讲解：1 小时1 分钟

2.1 CSS3概述 18

2.2 CSS3基本用法 18

2.2.1 CSS样式  19

2.2.2 引入CSS样式  20

2.2.3 CSS样式表  20

2.2.4 导入外部样式表  21

2.2.5 CSS格式化  21

2.2.6 CSS属性  21

2.2.7 CSS属性值  22

2.3 元素选择器 23

2.3.1 标签选择器  23

2.3.2 类选择器  23

2.3.3 ID选择器  24

2.3.4 通配选择器  25

2.4 关系选择器 25

2.4.1 包含选择器  25

2.4.2 子选择器  26

2.4.3 相邻选择器  27

2.4.4 兄弟选择器  27

2.4.5 分组选择器  28

2.5 属性选择器 28

2.6 伪选择器 31

2.6.1 结构伪类  32

2.6.2 否定伪类  39

2.6.3 状态伪类  39

2.6.4 目标伪类  41

2.7 CSS特性 42

2.7.1 CSS继承性  42

2.7.2 CSS层叠性  43

2.8 在线练习 44

第3 章 设计移动页面结构 45

视频讲解：36 分钟

3.1 头部信息 46

3.1.1 定义网页标题  46

3.1.2 定义网页元信息  47

3.1.3 定义文档视口  48

3.1.4 移动应用的head头信息说明  50

3.2 构建基本结构 50

3.2.1 定义文档结构  50

3.2.2 定义内容标题  51

3.2.3 使用div元素  53

3.2.4 使用id和class 54

3.2.5 使用title  55

3.2.6 HTML注释  56

3.3 构建语义结构 56

3.3.1 定义页眉  56

3.3.2 定义导航  57

3.3.3 定义主要区域  59

3.3.4 定义文章块  59

3.3.5 定义区块  61

3.3.6 定义附栏  63

3.3.7 定义页脚  65

3.3.8 使用role  66

3.4 案例实战 67

3.5 在线练习 70

第4 章 设计移动页面正文 71

视频讲解：1 小时1 分钟

4.1 通用文本 72

4.1.1 标题文本  72

4.1.2 段落文本  72

4.2 描述文本 73

4.2.1 强调文本  73

4.2.2 标记细则  73

4.2.3 特殊格式  74

4.2.4 定义上标和下标  74

4.2.5 定义术语  76

4.2.6 标记代码  77

4.2.7 预定义格式  77

4.2.8 定义缩写词  79

4.2.9 标注编辑或不用文本  79

4.2.10 指明引用或参考  80

4.2.11 引述文本  81

4.2.12 换行显示  82

4.2.13 修饰文本  83

4.2.14 非文本注解  83

4.3 特殊文本 83

4.3.1 标记高亮显示  83

4.3.2 标记进度信息  84

4.3.3 标记刻度信息  86

4.3.4 标记时间信息  87

4.3.5 标记联系信息  88

4.3.6 标记显示方向  89

4.3.7 标记换行断点  89

4.3.8 标记旁注  90

4.4 HTML5全局属性 90

4.4.1 可编辑内容  90

4.4.2 快捷菜单  91

4.4.3 自定义属性  92

4.4.4 定义可拖动操作  93

4.4.5 拖动数据  93

4.4.6 隐藏元素  94

4.4.7 语法检查  94

4.4.8 翻译内容  95

4.5 在线练习 95

第5 章 美化页面文本 96

视频讲解：2 小时6 分钟

5.1 设计字体样式 97

5.1.1 定义字体类型  97

5.1.2 定义字体大小  97

5.1.3 定义字体颜色  98

5.1.4 定义字体粗细  98

5.1.5 定义艺术字体  99

5.1.6 定义修饰线  99

5.1.7 定义字体的变体  101

5.1.8 定义大小字体  101

5.2 设计文本样式 102

5.2.1 定义文本对齐  102

5.2.2 定义垂直对齐  103

5.2.3 定义文本间距  104

5.2.4 定义行高  104

5.2.5 定义首行缩进  105

5.3 CSS3文本模块 107

5.3.1 文本溢出  107

5.3.2 文本换行  108

5.3.3 书写模式 110

5.3.4 initial值 112

5.3.5 inherit值 113

5.3.6 unset值 114

5.3.7 all属性 115

5.4 色彩模式 115

5.4.1 rgba()函数 115

5.4.2 hsl()函数 117

5.4.3 hsla()函数 119

5.4.4 opacity属性  121

5.4.5 transparent值  122

5.4.6 currentColor值  123

5.5 文本阴影 124

5.5.1 定义text-shadow  124

5.5.2 案例：设计特效字  126

5.6 动态内容 130

5.6.1 定义content  130

5.6.2 案例：应用content  131

5.7 网络字体 133

5.7.1 使用@font-face  133

5.7.2 案例：设计字体图标  134

5.8 案例实战 136

5.8.1 设计文本新闻页  136

5.8.2 设计正文内页  138

5.8.3 设计列表文本样式  139

5.8.4 设计黑科技首页  141

5.8.5 设计消息提示框  142

5.9 在线练习 142

第6 章 设计列表结构 143

视频讲解：52 分钟

6.1 定义列表 144

6.1.1 无序列表  144

6.1.2 有序列表  145

6.1.3 项目编号  146

6.1.4 设计CSS样式  147

6.1.5 嵌套列表  148

6.1.6 描述列表  148

6.1.7 菜单列表  150

6.1.8 快捷菜单  152

6.2 定义链接 155

6.2.1 普通链接  155

6.2.2 块链接  156

6.2.3 锚点链接  157

6.2.4 目标链接  158

6.2.5 下载链接  159

6.2.6 图像热点  159

6.2.7 框架链接  161

6.3 案例实战 162

6.3.1 设计导航页面  162

6.3.2 设计热销榜  167

6.3.3 设计品牌墙  169

6.3.4 设计品类引导列表  171

6.3.5 为快捷菜单添加命令  173

6.3.6 设计快捷分享命令  173

6.3.7 设计任务列表命令  173

6.3.8 设计排行榜列表结构  173

6.3.9 设计图文列表栏目  173

6.4 在线练习 174

第7 章 应用多媒体 175

视频讲解：40 分钟

7.1 认识网页图像 176

7.2 使用图像 177

7.2.1 使用img元素  177

7.2.2 定义流内容  178

7.2.3 插入图标  179

7.2.4 定义图像大小  180

7.2.5 案例：图文混排  181

7.3 使用多媒体插件 182

7.3.1 使用embed元素  182

7.3.2 使用object元素  183

7.4 使用HTML5多媒体 185

7.4.1 使用audio元素  185

7.4.2 使用video元素  187

7.5 案例实战 190

7.5.1 设计网页音乐播放器  190

7.5.2 设计MP3播放条  192

7.5.3 设计视频播放器  193

7.6 HTML5多媒体API 196

7.6.1 设置属性  196

7.6.2 设置方法  196

7.6.3 设置事件  196

7.6.4 综合案例  196

7.7 在线练习 200

第8 章 使用CSS3 定义版式 201

视频讲解：40 分钟

8.1 CSS盒模型 202

8.1.1 认识display  202

8.1.2 认识CSS盒模型  202

8.1.3 定义边界  203

8.1.4 定义边框  205

8.1.5 定义补白  206

8.2 设计浮动显示 208

8.2.1 定义float  208

8.2.2 使用clear  210

8.3 设计定位显示 213

8.3.1 定义position  213

8.3.2 设置层叠顺序  218

8.4 案例实战 220

8.4.1 设计两栏页面  220

8.4.2 设计三栏页面  222

8.4.3 设计九宫格版式  223

8.4.4 设计用户管理界面  226

8.4.5 设计侧滑面板  227

8.4.6 设计网格化版式  229

8.4.7 设计音乐列表版式  231

8.5 在线练习 232

第9 章 使用媒体查询 233

视频讲解：21 分钟

9.1 认识媒体查询 234

9.2 使用媒体查询 234

9.2.1 媒体类型和媒体查询  234

9.2.2 使用@media  236

9.2.3 应用@media  238

9.2.4 案例：设计第一个响应式版式  241

9.3 案例实战 243

9.3.1 判断显示屏幕宽度  243

9.3.2 设计响应式版式  244

9.3.3 设计响应式菜单  247

9.3.4 设计自动隐藏布局  248

9.3.5 设计自适应手机页面  251

9.4 在线练习 254

第10 章 设计弹性布局 255

视频讲解：32 分钟

10.1 多列布局 256

10.1.1 设置列宽  256

10.1.2 设置列数  257

10.1.3 设置间距  257

10.1.4 设置列边框  258

10.1.5 设置跨列显示  259

10.1.6 设置列高度  260

10.2 旧版伸缩盒 260

10.2.1 启动伸缩盒  261

10.2.2 设置宽度  261

10.2.3 设置顺序  263

10.2.4 设置方向  264

10.2.5 设置对齐方式  265

10.3 新版伸缩盒 267

10.3.1 认识Flexbox系统  267

10.3.2 启动伸缩盒  268

10.3.3 设置主轴方向  269

10.3.4 设置行数  270

10.3.5 设置对齐方式  271

10.3.6 设置伸缩项目  273

10.4 浏览器支持和伸缩盒版本迭代 276

10.4.1 浏览器对Flexbox的支持  276

10.4.2 比较Flexbox新旧版本  277

10.5 案例实战 280

10.5.1 将固宽页转换为弹性页  280

10.5.2 设计弹性菜单  283

10.5.3 设计多断点弹性菜单  285

10.5.4 设计粘附页脚栏  286

10.5.5 设计3栏页面  287

10.5.6 设计3行3列应用  287

10.6 在线练习 287

第11 章 设计响应式图片 288

11.1 认识响应式图片 289

11.2 使用picture  289

11.2.1 基本用法  290

11.2.2 浏览器支持  290

11.2.3 应用示例  291

11.3 案例实战 292

11.3.1 图片加载  292

11.3.2 针对不同设备调整显示焦点  293

11.3.3 使用媒体查询调整显示焦点  294

11.3.4 图片分辨率处理  295

11.3.5 设计图文版式  295

11.3.6 设计热点景点栏目  297

11.3.7 设计图片分享页面  299

11.3.8 设计图片列表页面  302

11.4 在线练习 304

第12 章 设计移动表单 305

视频讲解：1 小时12 分钟

12.1 认识HTML5表单 306

12.2 定义表单 307

12.3 提交表单 308

12.4 组织表单 309

12.5 定义文本框 310

12.6 定义标签 312

12.7 使用常用控件 313

12.7.1 密码框  313

12.7.2 单选按钮  314

12.7.3 复选框  314

12.7.4 文本区域  315

12.7.5 选择框  316

12.7.6 上传文件  317

12.7.7 隐藏字段  318

12.7.8 提交按钮  319

12.8 HTML5新型输入框 320

12.8.1 定义E-mail框 320

12.8.2 定义URL框  321

12.8.3 定义数字框  321

12.8.4 定义范围框  322

12.8.5 定义日期选择器  323

12.8.6 定义搜索框  327

12.8.7 定义电话号码框  328

12.8.8 定义拾色器  328

12.9 HTML5输入属性 329

12.9.1 定义自动完成  329

12.9.2 定义自动获取焦点  331

12.9.3 定义所属表单  332

12.9.4 定义表单重写  332

12.9.5 定义高和宽  333

12.9.6 定义列表选项  333

12.9.7 定义最小值、最大值和步长  333

12.9.8 定义多选  334

12.9.9 定义匹配模式  335

12.9.10 定义替换文本  335

12.9.11 定义必填  336

12.10 HTML5新表单元素 336

12.10.1 定义数据列表  337

12.10.2 定义密钥对生成器  337

12.10.3 定义输出结果  338

12.11 HTML5表单属性 339

12.11.1 定义自动完成  339

12.11.2 定义禁止验证  339

12.12 案例实战 340

12.12.1 设计注册表单  340

12.12.2 设计登录表单  342

12.12.3 设计反馈表单  344

12.13 在线练习 346

第13 章 设计响应式表格 347

视频讲解：35 分钟

13.1 认识表格结构 348

13.2 新建表格 349

13.2.1 定义普通表格  349

13.2.2 定义列标题  349

13.2.3 定义表格标题  351

13.2.4 表格行分组  351

13.2.5 表格列分组  352

13.3 设置table属性 355

13.3.1 定义单线表格  356

13.3.2 定义分离单元格  357

13.3.3 定义细线边框  357

13.3.4 添加表格说明  358

13.4 设置td和th属性 358

13.4.1 定义跨单元格显示  359

13.4.2 定义表头单元格  360

13.4.3 为单元格指定表头  361

13.4.4 定义信息缩写  361

13.4.5 单元格分类  362

13.5 使用CSS定义表格样式 362

13.5.1 定义表格的基本方法  363

13.5.2 定义边框  364

13.5.3 定义间距  364

13.5.4 定义标题  365

13.5.5 定义空单元格  366

13.6 案例实战 367

13.6.1 设计产品信息列表  367

13.6.2 设计自适应布局表格  368

13.6.3 设计滚动显示表格  371

13.6.4 设计隐藏不重要的数据列  373

13.7 在线练习 374

第14 章 使用CSS3 修饰背景 375

视频讲解：51 分钟

14.1 设计背景图像 376

14.1.1 设置定位原点  376

14.1.2 设置裁剪区域  377

14.1.3 设置背景图像大小  379

14.1.4 设置多重背景图像  380

14.2 设计渐变背景 382

14.2.1 定义线性渐变  383

14.2.2 设计线性渐变样式  385

14.2.3 案例：设计网页渐变色  387

14.2.4 案例：设计条纹背景  389

14.2.5 定义重复线性渐变  391

14.2.6 定义径向渐变  393

14.2.7 设计径向渐变样式  395

14.2.8 定义重复径向渐变  397

14.2.9 案例：设计网页背景色  398

14.2.10 案例：设计图标  399

14.3 案例实战 401

14.3.1 设计优惠券  401

14.3.2 设计桌面纹理背景  401

14.3.3 设计按钮  401

14.3.4 渐变特殊应用场景  402

14.3.5 设计栏目折角效果  402

14.4 在线练习 403

第15 章 使用CSS3 美化界面样式 404

视频讲解：36 分钟

15.1 界面显示 405

15.1.1 显示方式  405

15.1.2 调整尺寸  406

15.1.3 缩放比例  407

15.2 轮廓样式 407

15.2.1 定义轮廓  408

15.2.2 设计轮廓线  410

15.3 边框样式 412

15.3.1 定义边框图像源  412

15.3.2 定义边框图像平铺方式  413

15.3.3 定义边框图像宽度  414

15.3.4 定义边框图像分割方式  414

15.3.5 定义边框图像扩展  415

15.3.6 案例：应用边框图像  417

15.3.7 定义圆角边框  419

15.3.8 案例：设计椭圆图形  421

15.4 盒子阴影 422

15.4.1 定义盒子阴影  422

15.4.2 案例：box-shadow的应用  424

15.4.3 案例：设计翘边阴影  427

15.5 案例实战 429

15.5.1 设计内容页  429

15.5.2 设计应用界面  429

15.6 在线练习 430

第16 章 CSS3 动画 431

视频讲解：1 小时1 分钟

16.1 CSS3变形 432

16.1.1 认识Transform  432

16.1.2 设置原点  432

16.1.3 2D旋转 433

16.1.4 2D缩放 434

16.1.5 2D平移 435

16.1.6 2D倾斜 436

16.1.7 2D矩阵 436

16.1.8 设置变形类型  437

16.1.9 设置透视距离和原点  438

16.1.10 3D平移 441

16.1.11 3D缩放  442

16.1.12 3D旋转 443

16.1.13 透视函数  444

16.1.14 变形原点  445

16.1.15 背景可见  445

16.2 过渡动画 446

16.2.1 设置过渡属性  446

16.2.2 设置过渡时间  447

16.2.3 设置延迟过渡时间  448

16.2.4 设置过渡动画类型  448

16.2.5 设置过渡触发动作  449

16.3 帧动画 454

16.3.1 设置关键帧  454

16.3.2 设置动画属性  456

16.4 案例实战 458

16.4.1 设计图形  458

16.4.2 设计冒泡背景按钮  459

16.4.3 设计动画效果菜单  459

16.4.4 设计照片特效  459

16.4.5 设计立体盒子  460

16.4.6 旋转盒子  460

16.4.7 设计翻转广告  460

16.4.8 设计跑步效果  461

16.4.9 设计折叠面板  461

16.5 在线练习 461

第17 章 综合实战：设计响应式网站 462

17.1 认识响应式Web设计 463

17.2 构建页面 463

17.3 设计基本样式 466

17.3.1 兼容早期浏览器  466

17.3.2 重置默认样式  467

17.4 设计响应式样式 467

17.4.1 创建可伸缩图像  468

17.4.2 创建弹性布局网格  468

17.4.3 实现媒体查询  469

17.4.4 组合样式  472

17.4.5 兼容旧版IE  478

第18 章 案例开发：酒店预订微信wap 网站 480

视频讲解：16 分钟

18.1 设计思路 481

18.1.1 内容  481

18.1.2 结构  481

18.1.3 效果  482

18.2 设计首页 483

18.3 设计登录页 485

18.4 选择城市 487

18.5 选择酒店 490

18.6 预订酒店 491

第19 章 发布网页 496

19.1 Web应用发布基础 497

19.2 下载、安装Cordova 498

19.2.1 安装Java JDK  498

19.2.2 安装Android SDK  499

19.2.3 安装Apache Ant  500

19.2.4 设置用户变量  501

19.2.5 测试工具  502

19.2.6 通过npm安装Cordova  503

19.2.7 设置Android模拟器  504

19.3 将网页转换成Android APP  506