第1部分 Web标准 2
第1章 Web标准概述 2
1.1 Web标准概述 3
1.2表现与结构的分离 3
1.3易用性 4
1.4难点所在 5
1.4.1 DIV＋CSS不等于Web标准 5
1.4.2正确使用XHTML标签 5
1.4.3表格本身并没有被抛弃 6
1.4.4善于利用CSS 6
1.4.5不要滥用class 6
1.4.6应对浏览器 6
1.4.7.通过验证”并不是最终目的 7
1.5 SEO简介 7
第2章 结构XHTML 9
2.1理解结构与表现 10
2.1.1内容 10
2.1.2结构（Structure） 11
2.1.3表现（Presentation） 11
2.1.4行为（Behavior） 12
2.2从HTML到XHTML 12
2.2.1 HTML简史 12
2.2.2 HTML的缺点 13
2.2.3从HTML到XHTML 14
2.3理解（X）HTML标签的语义 18
2.3.1（X）HTML与浏览器默认样式 18
2.3.2常用的XHTML标签和属性 19
2.3.3（X）HTML各个元素对搜索引擎的权重比例 27
2.4网站整体制作基本流程 27
2.4.1总体流程与分工 27
2.4.2静态页面制作 28
第2部分 层叠样式表CSS 31
第3章 CSS入门 31
3.1 CSS简介 32
3.1.1起源 32
3.1.2神奇的CSS 32
3.1.3 CSS与HTML 33
3.14 CSS与浏览器 34
3.15 CSS 2.1与CSS2 34
3.2 CSS的使用方法 34
3.2.1行内式样式（linlin style） 35
3.2.2嵌入式样式表（Embedded style sheets） 35
3.2.3外部样式表（Link style sheets） 35
3.2.4导入式样式表 37
3.2.5应用 38
3.2.6维护和组织样式表 38
3.3基本样式规则 39
3.3.1基本语法 39
3.3.2继承与层叠 40
3.3.3分组 40
3.3.4注释 41
3.3.5缩写 41
3.3.6注意事项 43
3.4元素类型 43
3.4.1替换和不可替换元素 44
3.4.2显示元素 44
3.5媒体类型 45
3.5.1指定媒体相关的样式表 45
3.5.2媒体组 45
第4章 文档结构与选择器 47
4.1文档结构 48
4.2 CSS选择器 49
4.21通配选择器（Universal selector） 49
4.2.2类型选择器（Type selectors 49
4.2.3 ID选择器（ID Selectors） 50
4.2.4类选择器（Class selectors） 50
4.2.5包含选择器（Descendant selectors） 51
4.2.6子元素选择器（Child selectors） 52
4.2.7相邻兄弟选择器（Adjacent sibling selectors） 52
4.2.8属性选择器（Attribute selectors） 53
4.3伪类与伪元素 56
4.3.1伪类（Pseudo-Classes） 56
4.3.2伪元素（Pseudo-Elements） 59
4.3.3注意 61
4.4指定值、计算值和实际值 62
4.5继承 63
4.5.1值的继承 62
4.5.2 “inherit”值 63
4.5.3继承的局限性 63
4.6层叠 64
4.6.1层叠的顺序 64
4.6.2特殊性的计算 65
4.6.3继承和特殊性 65
4.6.4重要性 66
4.6.5非CSS的表现类内容 66
4.7 CSS 3新增选择器前瞻 67
4.7.1更多的属性选择器 67
4.7.2普通兄弟选择器 68
4.7.3结构伪类（Structural Pseudo-Classes） 69
4.7.4 UI元素伪类和伪元素 70
4.7.5其他伪类 70
4.8命名规范 71
4.9选择器综合运用 72
第5章 单位和值 74
5.1颜色＜Color＞ 75
5.1.1颜色关键字 75
5.1.2 RGB颜色 75
5.1.3关键字transparent 77
5.1.4网页安全色（Web-safe Colors ） 77
5.2整数值＜integer＞和实数值＜number＞ 78
5.3长度＜length＞ 78
5.3.1格式 78
5.3.2长度单位 78
5.3.3应用 80
5.4百分比＜percentage＞ 80
5.5关键字 81
5.6字符串＜string＞ 81
5.7 URL＋URN＝URI 81
5.8其他值 82
5.8.1记数器＜counter＞ 82
5.8.2角度＜angle＞ 82
5.8.3时间＜time＞ 83
5.8.4频率＜frequency＞ 83
5.9不支持的值的处理 83
第6章 字体 84
6.1字体集：font-family属性 85
6.1.1语法 85
6.1.2常用字体系列 85
6.2字体尺寸：font-size属性 87
6.2.1语法 87
6.2.2绝对尺寸 88
6.2.3相对尺寸 89
6.2.4百分比和em 89
6.2.5尺寸的继承与浏览器的显示 90
6.2.6分辨率与弹性设计 91
6.3字体磅值：font-weight属性 91
6.3.1语法 92
6.3.2继承 92
6.3.3浏览器显示原理 93
6.4字体样式：font-style属性 94
6.5字体变形：font-variant属性 95
6.6缩写的字体属性：font属性 95
6.6.1语法 95
6.6.2注意 96
6.6.3系统字体 97
6.7调整与拉伸 98
6.7.1字体调整：font-size-adiust属性 98
6.7.2字体伸展：font-stretch属性 99
6.8字体匹配原理 99
6.8.1字体的匹配步骤 99
6.8.2设定字体集的注意事项 100
6.8.3字体的选择 100
6.8.4@font-face规则 101
第7章 文本 102
7.1文本水平对齐：text-align属性 103
7.1.1语法 103
7.1.2适用于：块级元素 103
7.1.3继承 104
7.1.4应用：整体居中 104
7.2文本缩进：text-indent属性 105
7.2.1 语法 106
7.2.2 正值缩进 107
7.2.3 负值缩进 107
7.2.4 应用:隐藏单行文字 107
7.3 行高line-heightl属性 108
7.3.1语法 108
7.3.2内容区域、行内框和行框 109
7.3.3行高的计算与继承 110
7.3.4济览器的差别与错误 111
7.3.5应用：单行文字在垂直方向居中 112
7.4垂直对齐：vertical-align属性 112
7.4.1语法 112
7.4.2属性值详解 113
7.4.3奇怪的IE 116
7.4.4文档类型与纯图片内容的垂直对齐 116
7.4.5单元格的垂直对齐 118
7.5单词间隔（word-spacing）和字母间隔（letter-spacing） 119
7.5.1单词间隔：word-spacing属性 119
7.5.2字母间隔：letter-spacing属性 120
7.5.3水平对齐的影响和继承 120
7.6文本转换：text-transform属性 121
7.7文本装饰：text-decoration属性 121
7.8空白：white-space属性 123
7.8.1语法 123
7.8.2属性值详解 123
7.8.3应用：显示不回行文本 124
7.9文本阴影：text-shadow属性 125
7.10文字方向direction和编码方式unicode-bidi 126
第8章 框模型 128
8.1 框模型（Box Model） 129
8.2包含块（Containing Block） 131
8.2.1视口（viewport） 131
8.2.2包含块 131
8.3宽度：width属性 133
8.3.1语法 133
8.3.2行内元素的宽度 134
8.3.3长度和百分比 135
8.4最大宽度（max-width）和最小宽度（min-width） 136
8.5高度：height属性 137
8.5.1语法 137
8.5.2行内元素的高度 138
8.6最大高度 （max-height）和最小高度（min-height） 138
8.7补白:padding属性 140
8.7.1 缩写属性: padding 140
8.7.2 补白宽度和高度 141
8.7.3 百分比值补白 141
8.8边框：border属性 142
8.8.1边框颜色 142
8.8.2边框宽度 143
8.8.3边框样式 144
8.8.4不同方向的边框属性缩写 146
8.8.5缩写属性border 146
8.8.6行内元素的边框 147
8.8.7应用：文字链接的装饰 147
8.9边距：margin属性 148
8.9.1水平方向的边距：margin-left属性和margin-right属性 149
8.9.2垂直方向的边距：margin-top属性和margin-bottom属性 150
8.9.3百分比值边距 153
8.9.4负值边距 154
8.9.5应用：元素水平居中 155
8.10常规流向中的视觉格式化 156
8.10.1块级元素的水平格式化 156
8.10.2应用：宽度自适应的布局 160
8.10.3块级元素的垂直格式化 161
8.10.4应用：高度自适应浏览器窗口 163
8.10.5行内元素的格式化 164
第9章 浮动、定位与视觉格式化模型 167
9.1视觉格式化模型控制框的生成 168
9.1.1块框的生成（block box） 168
9.1.2行内框（inline box） 169
9.1.3插入框（run-in box） 170
9.2显示类型：display属性 170
9.2.1语法 171
9.2.2应用：显示或隐藏元素 173
9.3定位 174
9.3.1选择定位方式：position属性 174
9.3.2设定框偏移：top、right、bottom、left属性 174
9.3.3相对定位 176
9.3.4绝对定位 178
9.3.5堆叠顺序：z-index属性 191
9.3.6 IE中的position 194
9.3.7应用：显示提示内容 195
9.4浮动与清除 197
9.4.1设定浮动：float属性 197
9.4.2浮动元素的视觉格式化内容 198
9.4.3清除浮动：clear属性 204
9.4.4 应用：3行3列布局设计 207
9.5 display、float和position 209
9.6 溢出和剪切 209
9.6.1 溢出：Overflow属性 210
9.6.2剪切：clip属性 212
9.6.3clip 与overflow属性的关系 214
9.7可视性：visibility属性 215
9.7.1属性值详解 215
9.7.2应用：显示及隐藏元素 216
第10章 颜色与背景 217
10.1颜色基础 218
10.2前景色：color属性 219
10.2.1链接 220
10.2.2边框 221
10.2.3表单元素 221
10.3背景 222
10.3.1背景颜色：background-color属性 222
10.3.2背景图片：background-image属性 223
10.3.3背景图片重复：background-repeat属性 224
10.3.4背景图片附属：background-attachment属性 225
10.3.5背景图片定位：background-position属性 226
10.3.6缩写属性：background 230
10.3.7 ＜html＞元素的背景 231
10.4应用 232
10.4.1灵活使用背景 232
10.4.2模拟边框 233
10.4.3简单的链接背景替换 237
10.4.4导航菜单的滑动门效果 239
第11章 表格 244
11.1表格的标签与属性 245
11.1.1标签概览 245
11.1.2 （X）HTML属性 248
11.2 CSS的表格模型 251
11.2.1表格模型概述 251
11.2.2 display属性 251
11.2.3匿名表格对象 253
11.2.4列 253
11.3表格的视觉格式化 254
11.3.1匿名框、标题框与表格框 254
11.3.2标题＜caption＞的定位：caption-side属性 254
11.3.3表格内容的视觉布局 255
11.3.4表格的层和透明性 256
11.3.5表格宽度算法：table-layout属性 258
11.3.6表格高度 263
11.3.7 单元格内要容的对齐 264
11.4单元格边框:border-collapse属性 266
11.4.1 分离的边框模型 267
11.4.2重台的边框模型 269
11.4.3边框样式 272
第12章 列表和生成的内容 273
12.1列表 274
12.1.1列表样式类型：list-style-type属性 274
12.1.2列表样式图片：list-style-image属性 276
12.1.3列表样式定位：list-style-position属性 277
12.1.4列表样式缩写：list-style属性 278
12.1.5浏览器对列表的表现与样式的继承 278
12.2生成的内容 280
12.2.1 :before和：after伪元素 281
12.2.2生成内容：content属性 281
12.2.3自动记数和编号 285
第13章 用户界面 291
13.1鼠标指针：cursor属性 292
13.1.1关键字 292
13.1.2图片鼠标指针 293
13.2系统字体和颜色 294
13.2.1系统字体 294
13.2.2系统颜色 295
13.3动态的外廓：outline属性 296
13.3.1外廓与边框的区别 296
13.3.2外廓宽度：outline-width属性 297
13.3.3外廓样式：outline-style属性 297
13.3.4外廓颜色：outline-color属性 298
13.3.5缩写：outline属性 298
13.3.6外廓与焦点 299
第14章 页面媒体 300
14.1页面媒体简介 301
14.2指定媒体类型 301
14.3页框：＠page规则 302
14.3.1页边柜 302
14.3.2页面选择器 303
14.4分页 304
14.4.1元素前后分页：page-break-berfore和page-break-after属性 304
14.4.2元素内部分页：Page-break-inside属性 306
14.4.3元素内的分割：Orphans和windows属性 306
14.4.4分页的规则 308
14.5 CSS2中的属性 309
14.5.1页框尺寸：size属性 309
14.5.2裁切标记：marks属性 310
14.5.3使用命名的页：page属性 310
14.6显示器、打印机和投影 310
14.6.1设备特点 311
14.6.2设计要点 311
第15章 听觉样式表 313
15.1听觉（aural）类型与语音（speech）类型 314
15.1.1链接听觉样式的特点 314
15.1.2与听觉属性相关的值 314
15.2音量属性：volume属性 314
15.3发音：speak属性 315
15.4暂停：pause-before、pause-after和pause属性 316
15.5提示：cue-before、cue-after和cue属性 317
15.6混音：play-during属性 318
15.7空间：azimuth和elevation属性 318
15.8语音特征属性 320
15.9语音：speak-punctuation和speak-numeral属性 323
15.10叙述表头：speak-header属性 323
第16章 济览器与Hack 325
16.1浏览器简介 326
16.1.1浏览器的发展 326
16.1.2浏览器的解释引擎 326
16.1.3浏览器的工作模式 327
16.2 Windows IE 329
16.2.1 hasLayout属性 329
16.2.2条件注释 338
16.3常用的CSS Hack 339
16.3.1 CSSHack原理 339
16.3.2 CSS Hack不是必须的 340
16.3.3常用的CSSHack 340
16.4发现与解决问题 343
16.4.1 排查问题 343
16.4.2 常见的非Bug问题 344
16.4.3 Windows IE常见Bug 347
第3部分 结构化实例 356
第17章 旅游网站 356
17.1结构化 357
17.1.1分析内容结构 357
17.1.2基本结构 358
17.1.3页首部分的结构化 359
17.1.4中间部分的结构化 361
17.1.5页脚部分的结构化 368
17.2图片格式与网络基础知识 369
17.2.1图片格式 369
17.2.2图片与优化 370
17.3 CSS美化 371
17.3.1整体分析 371
17.3.2 header层 377
17.3.3 logo层 378
17.3.4 mainNav层 378
17.3.5 login层 381
17.3.6 controlMenu层 385
17.3.7 main层 394
17.3.8 travels层 395
17.3.9 hot层 399
17.3.10 adl层 403
17.3.11 photos层 402
17.3.12 forumList层 404
17.3.13 forumHot层 405
17.3.14 club层 410
17.3.15 vote层和community层 412
17.3.16 footer层 413
17.4版式与结构 415
17.5小结 416