第 1 章 灵活的文字.........................................1

1.1　常见的方法................................................... 2

1.2　权衡我们的选择......................................................... 5

1 .2 .1 　长度单位 ................................................... 5

1.2.2　表示“相对大小”的关键字 ................................................... 6

1 .2 .3 　百分比值 ................................................... 6

1.2 .4　表示“绝对大小”的关键字 ................................................... 6

1.3　无懈可击的方法......................................................... 7

1 .3 .1 　关键字 ....................................................... 7

1.3.2　放弃像素级别的精确度 ........................................................... 8

1.3 .3　两个需要克服的障碍 .................................................. 8

1.3.4　简化的 Box Model Hack ......................................................... 11

1.4　为什么说它是无懈可击的 ...................................................... 11

1.5　有了灵活基础后的操作............................................ 12

1.5.1　设置基准值 ............................................. 12

1.5 .2　使用百分比值来获取和基准值不同的尺寸 ......................................................... 13

1.6　结合使用关键字和百分比值 .................................................. 16

1 .6.1 　设定一个中间的关键字基准值 ............................................. 16

1.6.2　谨慎使用嵌套百分比值 ......................................................... 18

1 .6.3 　百分比值的一致性试验 ......................................................... 20

1.7　本章小结...................................................... 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　无样式 ...................................................... 28

2.3.2　两张小图片 .............................................. 29

2.3.3　应用样式 .................................................. 29

2.3.4　用浮动来解决 ............................................................ 30

2.3.5　为选项卡定形 ............................................................ 31

2.3.6　对齐背景图片 .......................................... 32

2.3.7　增加底边 .................................................. 34

2.3.8　悬停变换 .................................................. 35

2.3.9　选中状态 .................................................. 36

2.4　为什么这样做是无懈可击的 .................................................. 36

2.5　其他示例...................................................... 37

2.5.1　MOZILLA.ORG ........................................................ 37

2.5.2　斜杠 .......................................................... 38

2.5.3　ESPN.COM 的搜索栏 ............................................................ 38

2.6　本章小结...................................................... 40

第 3 章 可扩展的行......................................................43

3.1　常见的方法.................................................. 44

3.2　为什么这样做不是无懈可击的 .............................................. 46

3.2 .1　非必要的图片 ............................................................ 46

3.2.2　固定的行高 ............................................. 46

3.2.3　臃肿的代码 ............................................. 47

3.3　无懈可击的方法........................................................ 47

3.3.1　HTML 代码结构 ........................................................ 47

3.3.2　标识出各部分 .......................................... 48

3.3.3　没有添加样式时的情形 .......................................................... 49

3.3.4　设定背景 .................................................. 49

3.3.5　安排内容的位置 ......................................................... 50

3.3.6　消失的背景 .............................................. 51

3.3.7　添加更多细节 .......................................... 53

3.3.8　四个圆角 .................................................. 55

3.3.9　文本和链接的细节 .................................................... 56

3.3.10　最后一步 ................................................ 58

3.4　为什么这样做是无懈可击的 .................................................. 60

3.4.1　代码结构与设计效果的分离 ................................................. 60

3.4.2　不再有固定不变的高度 .......................................................... 61

3.5　自适应扩展的另一个例子 ...................................................... 62

3.5.1　HTML 代码 ............................................. 63

3.5.2　创建这两张图片 ......................................................... 63

3.5.3　添加CSS ................................................... 64

3.5.4　EXPAND-O-MATIC ............................................ 66

3.6　本章小结...................................................... 66

第 4 章 巧妙的浮动...................................................... 69

4.1　常见的方法.................................................. 71

4.2　无懈可击的方法........................................................ 73

4.2.1　对 HTML 代码的无止境抉择 ................................................ 73

4.2.2　使用定义列表 .......................................... 74

4.2.3　HTML 代码结构 ........................................................ 75

4.2.4　没有样式时的情形 .................................................... 77

4.2.5　为外围容器增加样式 ........................................... 78

4.2.6　标识图片 .................................................. 79

4.2.7　应用基本的样式 ......................................................... 80

4.2.8　给图片定位 .............................................. 84

4.2.9　反向浮动 ................................................. 85

4.2.10　为任意长度的描述文字开路 ............................................... 88

4.2.11　尾声 ........................................................ 93

4.2.12　切换浮动方向 .......................................................... 95

4.2.13　栏式效果 ............................................... 97

4.2.14　一个替代用的背景 ........................................... 101

4.3　为什么这样做是无懈可击的 ................................................ 104

4.4　本章小结.................................................... 104

第 5 章 牢固的方框..................................................... 105

5.1　常见的方法........................................... 106

5.2　为什么这样做不是无懈可击的 ............................................ 109

5.3　无懈可击的方法...................................................... 110

5 .3 .1 　HTML 代码结构 ..................................................... 110

5 .3 .2 　图片策略 ............................................... 111

5 .3 .3 　应用样式 ............................................... 113

5.4　为什么这样做是无懈可击的 ................................................ 116

5.5　其他圆角实现技术.................................................. 116

5.6　本章小结.................................................... 125

第 6 章 页面在缺失图片或 CSS 的情况下仍然易读........................... 127

6.1　常见的方法........................................... 128

6.2　为什么这样做不是无懈可击的 ............................................ 131

6.3　无懈可击的方法...................................................... 132

6.4　为什么这样做是无懈可击的 ................................................ 133

6.5　有或者没有样式...................................................... 136

6 .5 .1 　10 秒钟可用性测试法 .......................................................... 136

6 .5 .2 　常见的方法 ........................................... 137

6 .5 .3 　无懈可击的方法 ...................................................... 138

6.6　无懈可击的工具...................................................... 140

6 .6.1 　Favelets .................................................. 140

6.6.2　Web Developer Extension(Web 开发者扩展) ....................................................... 142

6.6.3　Web Accessibility 工具条 ...................................................... 143

6.6.4　把校验作为一种工具 ............................................................ 143

6.7　本章小结.................................................... 146

第 7 章 可转换的表格................................................... 147

7.1　常见的方法........................................... 148

7.2　为什么这样做不是无懈可击的 ............................................ 150

7.3　无懈可击的方法...................................................... 151

7.3 .1　HTML 代码结构 ..................................................... 151

7.3.2　应用样式 ............................................... 158

7.4　为什么这样做是无懈可击的 ................................................ 173

7.5　本章小结.................................................... 174

第 8 章 流动的布局..................................................... 177

8.1　常见的方法........................................... 178

8.2　为什么这样做不是无懈可击的 ............................................ 180

8.2.1　大量的代码 ........................................... 181

8.2.2　维护的噩梦 ............................................ 181

8.2.3　并非最佳的内容顺序 ............................................................ 181

8.3　无懈可击的方法...................................................... 182

8.3.1　HTML 代码结构 ...................................................... 182

8.3.2　创建栏：浮动与定位 ........................................................... 183

8.3.3　应用样式 ................................................ 185

8.3.4　Gutters .................................................... 189

8.3.5　栏的 padding .......................................... 192

8.3.6　设置宽度的最大和最小值 .................................................... 197

8.3.7　滑动伪分栏 ............................................ 200

8.3.8　三栏布局 ................................................ 203

8.4　为什么这样做是无懈可击的 ................................................ 210

8.5　本章小结.................................................... 210

第 9 章 构成一个整体................................................... 213

9.1　目标......................................... 214

9.2　为什么这样做是无懈可击的 ................................................ 215

9.2.1　流动的布局 ........................................... 216

9.2.2　灵活的文字 ............................................ 217

9.2.3　没有图片？没有 CSS？也没问题 ...................................................... 217

9.3　构建过程.................................................... 219

9.3.1　HTML 结构 ........................................... 219

9.3.2　基本的样式 ............................................ 221

9.3.3　布局结构 ................................................ 221

9.3.4　侧边栏背景 ............................................ 223

9.3.5　页头 ........................................................ 225

9.3.6　信息行 .................................................... 227

9.3.7　栏间空白(gutter) ...................................................... 229

9.3.8　内容栏 .................................................... 230

9.3.9　侧边栏 .................................................... 239

9.3.10　页脚 ...................................................... 245

9.4　针对 IE 的 CSS 调整 ............................................... 246

9.4.1　Hack 管理 .............................................. 247

9.4.2　页脚补丁 ............................................... 247

9.4.3　自清除问题的补丁 .................................................. 248

9.5　本章小结.................................................... 249