| 章节 | 案例代码 | 实例代码 | 部分释例代码、例图代码 |
| 1 | Case-01 彩色个人简历（代码紧凑格式） | 1-1 互联网因特网万维网的关系 | |
| Case-01 彩色个人简历（代码标准格式） | 1-1 互联网因特网万维网的关系（UTF-8） | ||
| Case-02 登鹳雀楼（宽度限制） | 1-2 春晓（HTML代码 + CSS代码） | ||
| Case-02 登鹳雀楼（宽度未设置） | 1-2 春晓（两个CSS代码的格式对比） |
| 2 | Case-03 网页模板 | 2-1 边框、背景与对齐设置 | |
| 2-2 HTML5 网页文档典型结构 |
| 4 | Case-08 观沧海 | 4-1 应用外部样式表 | |
| 4-2 伪类与伪元素应用实例 | |||
| 4-3 行内样式的优先级 | |||
| 4-3 section-优先级 | |||
| 4-3 section-原始 | |||
| 4-4 多级选择器优先级 | |||
| 4-5 内边距合并-有问题(空白间距) | |||
| 4-5 内边距合并-正确(border: 1px) | |||
| 4-5 内边距合并-正确(padding: 1px) |
| 8 | Case-12 简单的拼图游戏 | 8-1 拖放过程 | |
| Case-12 珠峰拼图（有bug） | |||
| 8-4 获取用户的地理位置 | |||
| 8-5 在百度地图上显示地理位置 | |||
| 8-6-绘制五角星与同心圆 | |||