第1章 Web标准布局概述 1
1.1 从闪客帝国网站改版说起 1
1.2 表格布局的神话与没落 2
1.2.1 表格为谁而生 3
1.2.2 表格为什么要没落 3
1.3 从Table到CSS——坎坷的历程 8
1.3.1 现实的无奈 8
1.3.2 勇敢的挑战 9
1.4 认识Web标准 10
1.4.1 结构标准语言 10
1.4.2 表现标准语言 11
1.4.3 行为标准语言 11
1.5 CSS布局的基本思路 12
1.6 我能学好CSS布局吗 14
1.7 制作你的第一个XHTML+CSS页面 16
1.7.1 传统表格布局 16
1.7.2 表格布局存在的问题 19
1.7.3 XHTML+CSS标准布局 19
第2章 CSS布局基础 24
2.1 标准网页结构 24
2.1.1 XHTML文档结构 24
2.1.2 XHTML基本语法 26
2.1.3 XHTML元素分类 27
2.1.4 XHTML常用元素简介 28
2.1.5 XHTML结构语义化研究 32
2.1.6 XHTML结构化应用案例分析 33
2.2 CSS基本语法 35
2.3 CSS选择符 36
2.3.1 类型选择符 37
2.3.2 id选择符 38
2.3.3 class选择符 40
2.3.4 通用选择符 42
2.3.5 伪类和伪对象 42
2.3.6 伪类选择符 45
2.3.7 伪对象选择符 46
2.3.8 分组选择符 47
2.3.9 包含选择符 48
2.3.10 元素指定选择符 49
2.3.11 子对象选择符 50
2.3.12 属性选择符 51
2.3.13 相邻选择符 55
2.4 CSS属性 55
2.5 CSS属性值 58
2.5.1 颜色值 58
2.5.2 绝对单位 59
2.5.3 相对单位 59
2.5.4 百分比 60
2.5.5 URL 60
2.6 在网页中应用CSS 61
2.6.1 内联样式 61
2.6.2 内部样式 62
2.6.3 外部样式 62
2.7 CSS的继承、层叠和特殊性 64
2.7.1 继承 64
2.7.2 层叠 65
2.7.3 特殊性 66
2.8 div和span深入研究 70
2.8.1 通用元素div和span 70
2.8.2 使用div元素 74
2.8.3 关于div元素嵌套的思考 76
2.8.4 使用span元素 79
2.9 id和class深入研究 81
2.9.1 使用id 81
2.9.2 关于id和name 83
2.9.3 使用class 85
2.9.4 关于id和class 88
第3章 CSS布局工具 89
3.1 TopStyle 89
3.1.1 认识TopStyle界面 89
3.1.2 创建样式 90
3.1.3 编辑样式 92
3.1.4 应用样式 95
3.1.5 环境设置及使用技巧 96
3.1.6 测试样式 97
3.2 Dreamweaver 98
3.2.1 CSS样式面板 98
3.2.2 属性面板 103
3.2.3 CSS可视化助理 104
3.2.4 CSS样式呈现 108
3.2.5 CSS视图辅助工具 112
3.2.6 浏览器检查 113
3.2.7 验证标记 114
第4章 CSS盒模型 116
4.1 盒模型基础 116
4.1.1 为什么要提出盒模型 116
4.1.2 盒模型结构 117
4.1.3 关于元素宽和高的计算 118
4.1.4 关于元素并列间距的计算 121
4.1.5 关于元素间垂直间距的计算 124
4.1.6 关于空盒模型 127
4.2 边框 127
4.2.1 边框宽度 129
4.2.2 边框颜色 129
4.2.3 边框样式 130
4.2.4 关于内联元素的边框 132
4.3 边界 134
4.3.1 边界值 134
4.3.2 边界重叠 140
4.3.3 内联元素的边界 147
4.4 补白 148
4.5 盒模型兼容性应用 151
4.5.1 解决IE元素浮动时边界误差问题 151
4.5.2 解决非IE父元素不能自适应子元素高度问题 152
4.5.3 解决IE子元素底边界不被解析问题 154
4.5.4 解决IE子元素溢出问题 155
第5章 CSS格式化排版 157
5.1 排版是个细活 157
5.2 文字排版 159
5.2.1 关于字体 159
5.2.2 关于字体大小 162
5.2.3 增强字体大小的灵活性和可读性 166
5.2.4 关于字体颜色 167
5.2.5 关于字体样式 168
5.3 段落排版 170
5.3.1 缩进 170
5.3.2 对齐 172
5.3.3 行距 175
5.3.4 分栏 176
5.3.5 列表版式基础 178
5.3.6 列表版式实战 180
5.3.7 列表项行内显示 184
5.3.8 列表符号的个性显示 185
5.3.9 字距 188
5.3.10 文本行控制 188
5.3.11 空白 192
5.3.12 文本流控制 193
5.3.13 文本转换 197
5.3.14 文本修饰 197
5.4 图文混排 199
5.4.1 构建图文混排结构 199
5.4.2 图文规则混排 202
5.4.3 背景图像应用 204
5.4.4 图文不规则混排 206
5.4.5 不规则图文混排的再研究 209
第6章 CSS布局模型 212
6.1 关于CSS布局 212
6.1.1 从网友的求帖说起 212
6.1.2 关于盒模型补充 213
6.1.3 盒模型的类型 214
6.1.4 包含块 216
6.1.5 布局模型 220
6.2 流动布局模型 221
6.2.1 流动布局模型的特征 222
6.2.2 相对定位流动 223
6.3 浮动布局模型 225
6.3.1 浮动布局模型的特征 225
6.3.2 浮动清除 230
6.3.3 浮动嵌套 233
6.3.4 浮动与流动嵌套 234
6.3.5 浮动与流动混合布局应用 236
6.3.5.1 调整左右栏之间的空隙 236
6.3.5.2 调整上下栏之间的空隙 238
6.3.5.3 混合布局沙盘推演 242
6.4 层布局模型 246
6.4.1 定位类型 246
6.4.2 绝对定位包含块 246
6.4.3 绝对定位元素的边距 251
6.4.4 相对定位 253
6.4.5 混合定位 253
6.5 层叠等级 255
6.6 高度自适应 259
6.7 CSS基本布局类型 261
6.7.1 单行单列 262
6.7.2 单行两列 262
6.7.3 单行三列 265
6.7.4 多行多列 268
6.7.5 伪列布局 272
第7章 CSS浏览器兼容解决方案 275
7.1 关于网页浏览器 275
7.2 CSS Bug、Hack和Filter简介 276
7.3 过滤样式表文件 278
7.3.1 IE条件注释 279
7.3.2 @import规则过滤器 280
7.4 过滤规则和声明 283
7.4.1 !important关键字过滤器 283
7.4.2 下划线属性过滤器 283
7.4.3 转义属性过滤器 284
7.4.4 ＊html选择符过滤器 285
7.4.5 属性选择符过滤器 285
7.4.6 子对象选择符过滤器 286
7.4.7 相邻选择符过滤器 286
7.4.8 转义选择符过滤器 286
7.4.9 注释反斜杠过滤器 287
7.5 在IE/Windows中隐藏规则和声明 287
7.5.1 隐藏单个声明 287
7.5.2 隐藏多个声明 289
7.5.3 隐藏规则 289
7.6 网页Bug解决方案 290
7.6.1 W3C CSS验证服务 290
7.6.2 Web Developcr工具插件 291
7.6.3 浏览器显示模式 293
7.6.4 代码隔离与验证 296
7.7 常见Bug及其修复 297
7.7.1 盒模型Bug 297
7.7.2 双倍浮向Bug 298
7.7.3 多出3像素Bug 299
7.7.4 高度不适应Bug 301
7.7.5 多余字符Bug 303
7.7.6 定位Bug 304
7.7.7 捉迷藏Bug 305
7.7.8 部分区域隐藏Bug 306
7.7.9 百分比Bug 308
7.7.10 项目符号隐藏Bug 309
7.8 HTML默认样式与浏览器解析差异 311
7.8.1 HTML 4默认样式 311
7.8.2 浏览器默认样式 313
7.9 IE 7浏览器兼容解决方案 315
7.9.1 盒模型溢出兼容解决方案 315
7.9.2 IE 7不再支持的过滤器小结 317
7.9.3 推荐使用的过滤器 318
第8章 CSS文档统筹与编码规范 320
8.1 CSS文档统筹 320
8.1.1 根据页面类型分离文件 321
8.1.2 根据功能模块分离文件 321
8.1.3 根据标签类型分离文件 321
8.1.4 根据设备类型分离文件 322
8.1.5 根据代码规模综合分离文件 322
8.2 规则的组织 322
8.3 属性的组织 325
8.4 CSS命名艺术 327
8.4.1 经典命名三法 327
8.4.2 CSS命名规则 328
8.4.3 CSS命名方法 329
8.5 CSS代码缩写规则 331
8.5.1 盒模型代码简写 331
8.5.2 列表和背景缩写 334
8.5.3 颜色值缩写 335
8.5.4 字体缩写 335
8.6 CSS代码书写格式 336
8.6.1 CSS代码常用书写格式 336
8.6.2 CSS代码清道夫 339
8.7 CSS代码注释艺术 340
8.7.1 怎样写好注释 340
8.7.2 预防CSS中文注释Bug 342
8.7.3 CSS注释清除 343
8.8 CSS代码优化技巧 344
8.8.1 利用继承性优化代码 344
8.8.2 利用默认值优化代码 345
8.8.3 利用公共类优化代码 345
8.8.4 利用选择符分组优化代码 346
8.8.5 利用层叠覆盖优化代码 347
第9章 个人Blog网站布局 348
9.1 关于Veerle's blog的研究 348
9.2 网站配色 351
9.3 全局属性设置 351
9.4 控制模块显示宽度 353
9.5 关于兼容性的解决方案 356
9.6 滑动门技术研究 358
9.6.1 什么是滑动门 359
9.6.2 滑动导航菜单 362
9.7 欣赏与研究背景图像的应用 365
9.7.1 主背景图像、艺术图像和图标的使用 365
9.7.2 日历背景图像的使用 366
9.7.3 背景图像应用的思考 367
9.7.3.1 隐藏法 367
9.7.3.2 躲避法 368
9.7.3.3 覆盖法 368
9.8 圆角研究 369
9.8.1 不带背景图像的圆角 369
9.8.2 关于圆角的高级探讨 376
9.8.3 纯CSS圆角代码优化 381
9.8.4 用背景图像设计圆角 383
9.8.4.1 完全固定的圆角布局 383
9.8.4.2 高度固定的圆角布局 384
9.8.4.3 宽度固定的圆角布局 385
9.8.4.4 完全自适应圆角布局 387
9.8.4.5 优化完全自适应圆角布局代码 390
9.8.5 关于圆角解决方案的更多参考信息 391
9.9 阴影研究 393
9.9.1 定位法 393
9.9.2 浮动法 394
9.9.3 洋葱皮 395
第10章 公司宣传网站的布局 396
10.1 关于Layout的研究 396
10.2 全局属性设置 399
10.3 页面框架控制 400
10.4 关于列表布局的深入研究 403
10.4.1 图片切换技术 403
10.4.2 选项卡切换技术 406
10.5 导航菜单研究 408
10.5.1 水平菜单 409
10.5.2 垂直菜单 411
10.5.3 多级菜单 413
10.5.4 CSS Tab Designer 420
10.5.5 获取更多的导航菜单 421
第11章 技术门户网站布局 423
11.1 关于CSS Beauty的研究 423
11.2 全局属性设置 426
11.3 页面框架控制 429
11.4 关于CSS Beauty导航条的研究 432
11.5 关于CSS Beauty数据表格的研究 434
11.5.1 Upcoming Events数据表格 434
11.5.2 Current Job Openings数据表格 436
11.6 数据表格深入研究 438
11.6.1 数据列分组 440
11.6.2 数据行分组 442
11.6.3 表格中重要的排版属性 443
11.7 数据表格的CSS布局研究 445
11.7.1 边框控制 445
11.7.2 改善数据表格的视觉效果 449
第12章 Web 2.0网站布局 457
12.1 关于Web 2.0的技术探析 457
12.2 关于读客网的研究 462
12.3 全局属性设置 465
12.4 页面框架控制 470
第13章 网上商城网站布局 475
13.1 关于阿里巴巴 475
13.2 关于阿里巴巴中国网站的研究 476
13.3 全局属性设置 481
13.4 页面框架控制 483
13.5 网页换肤技术研究 486
13.5.1 构思与准备 487
13.5.2 设计皮肤 488
13.5.3 用JavaScript控制皮肤 490
13.5.4 记忆皮肤 492
13.5.5 恢复皮肤记忆 494
13.5.6 分析阿里巴巴中国网站首页皮肤 495
13.6 Tab切换技术 502
13.7 表单研究 504
13.7.1 表单及其框架 504
13.7.2 表单版式 510
13.7.3 表单布局 518