第1章 灵活的文字 1
1.1常见的方法 3
1.2为什么这样设计不是无懈可击的 4
1.3权衡我们的选择 6
1.3.1长度单位 6
1.3.2表示“相对大小”的关键字 6
1.3.3百分比值 7
1.3.4表示“绝对大小”的关键字 7
1.4无懈可击的方法 7
1.4.1关键字 8
1.4.2放弃像素级别的精确度 8
1.5为什么这样设计是无懈可击的 9
1.6接下来的操作 9
1.6.1设置基准值 9
1.6.2使用百分比值来获取不同的尺寸 10
1.7结合使用关键字和百分比值 13
1.7.1设定一个中间的关键字基准值 13
1.7.2慎用嵌套百分比值 15
1.7.3百分比值的一致性试验 17
1.8通过em实现灵活的文字 18
1.9 rem单位 19
1.10本章小结 21
第2章 可伸缩的导航栏 23
2.1常见的方法 24
2.1.1功能强大的选项卡 25
2.1.2通常的翻转效果 26
2.2为什么这样设计不是无懈可击的 26
2.2.1堆积如山的代码 26
2.2.2不方便使用 27
2.2.3可伸缩性的问题 27
2.2.4不够灵活 27
2.3无懈可击的方法 27
2.3.1无样式的导航列表 29
2.3.2两幅小图片 29
2.3.3应用样式 30
2.3.4采用浮动来解决问题 31
2.3.5为选项卡定形 32
2.3.6 对齐背景图片 32
2.3.7增加底边 34
2.3.8悬停变换 35
2.3.9选中状态 35
2.4为什么这样设计是无懈可击的 36
2.5使用 CSS 3渐变而不使用图片实现 37
2.6通过em来实现 40
2.7其他示例 42
2.7.1 MOZILLA.ORG 42
2.7.2斜杠 43
2.7.3 ESPN.COM的搜索栏 43
2.8本章小结 45
第3章 可扩展的行 47
3.1常见的方法 48
3.2为什么这样设计不是无懈可击的 50
3.2.1非必要的图片 50
3.2.2固定的行高 50
3.2.3臃肿的代码 51
3.3无懈可击的方法 51
3.3.1 HTML代码结构 51
3.3.2标识出各部分 52
3.3.3没有添加样式时的情形 53
3.3.4添加背景 54
3.3.5安排内容的位置 54
3.3.6消失的背景 55
3.3.7添加更多细节 56
3.3.8四个圆角 58
3.3.9 文本和链接的细节 60
3.3.10最后一步 62
3.3.11针对IE7进行的修改 63
3.4为什么这样设计是无懈可击的 64
3.4.1代码结构与设计效果的分离 65
3.4.2不再有固定不变的高度 65
3.5通过border-radius实现 66
3.6另一个自适应扩展例子 68
3.6.1 HTML代码 69
3.6.2创建两幅图片 69
3.6.3添加CSS 70
3.6.4自动扩展 71
3.7本章小结 72
第4章 巧妙的浮动效果 73
4.1常见的方法 75
4.2为什么这样设计不是无懈可击的 76
4.3无懈可击的方法 77
4.3.1对 HTML代码无止境的抉择 77
4.3.2使用定义列表 78
4.3.3 HTML代码结构 79
4.3.4没有添加样式时的情形 80
4.3.5为外围容器添加样式 80
4.3.6标识图片 81
4.3.7应用基本的样式 82
4.3.8给图片定位 86
4.3.9反向浮动 86
4.3.10为任意长度的说明文字做准备 89
4.3.11浮动自清除 90
4.3.12尾声 92
4.3.13切换浮动方向 94
4.3.14表格效果 96
4.3.15 更换背景图片 99
4.3.16应用box-shadow 101
4.3.17其他清除浮动元素的方法 103
4.3.18通过生成的内容进行清除 104
4.4为什么这样设计是无懈可击的 107
4.5本章小结 108
第5章 牢固的方框 109
5.1常见的方法 111
5.2为什么这样设计不是无懈可击的 113
5.3无懈可击的方法 114
5.3.1 HTML代码结构 115
5.3.2图片策略 115
5.3.3应用样式 117
5.4为什么这样设计是无懈可击的 119
5.5通过CSS 3实现 120
5.6其他圆角实现技术 124
5.7框提示 132
5.7.1单圆角 132
5.7.2圆角提示 135
5.7.3无懈可击的箭头 136
5.7.4 CSS中的限制孕育了技术上的创新 137
5.8本章小结 138
第6章 页面在缺失图片或CSS的情况下仍然易读 139
6.1常见的方法 140
6.2为什么这样设计不是无懈可击的 143
6.3无懈可击的方法 144
6.4为什么这样设计是无懈可击的 146
6.5使用样式或禁用样式 148
6.6常见的方法 149
6.7无懈可击的方法 150
6.8 Dig Dug测试 152
6.9无懈可击的工具 153
6.9.1 Favelet 154
6.9.2 Web Developer Extension 156
6.9.3 Web Accessibility工具栏 158
6.9.4 Firebug 158
6.9.5将验证作为一种工具 159
6.10本章小结 162
第7章 可转换的表格 163
7.1常见的方法 164
7.2为什么这样设计不是无懈可击的 166
7.3无懈可击的方法 167
7.3.1 HTML代码结构 168
7.3.2应用样式 174
7.4为什么这样设计是无懈可击的 186
7.5本章小结 187
第8章 流动布局和弹性布局 189
8.1常见的方法 190
8.2为什么这样设计不是无懈可击的 192
8.2.1大量的代码 192
8.2.2噩梦般的维护工作 193
8.2.3并非最佳的内容顺序 193
8.3无懈可击的方法 194
8.3.1 HTML代码结构 194
8.3.2创建栏：浮动与定位 195
8.3.3应用样式 197
8.3.4 gutter 201
8.3.5栏的内边距 203
8.3.6设置宽度的最大值和最小值 209
8.3.7滑动人造栏 213
8.3.8三栏布局 216
8.4为什么这样设计是无懈可击的 223
8.5基于em的布局 224
8.5.1一个弹性布局的例子 224
8.5.2 HTML代码 226
8.5.3 CSS 228
8.5.4一致性是最理想的 230
8.5.5注意滚动条 230
8.6本章小结 231
第9章 构成一个整体 233
9.1目标 234
9.2为什么这样设计是无懈可击的 235
9.2.1流动的布局 236
9.2.2灵活的文字 237
9.2.3即使没有图片和CSS也可以使用页面 238
9.2.4国际化 240
9.3构建过程 240
9.3.1 HTML代码结构 241
9.3.2基本样式 242
9.3.3布局结构 242
9.3.4灵活的网格 244
9.3.5设置max-width 244
9.3.6页头 247
9.3.7灵活的图片 249
9.3.8侧边栏 251
9.3.9 CSS 3的多栏布局 255
9.3.10媒体查询的魔力 256
9.4本章小结 264