无懈可击的Web设计

第1章　灵活的文字1
11　常见的方法3
12　为什么这样设计不是无懈可击的4
13　权衡我们的选择6
131　长度单位6
132　表示“相对大小”的关键字6
· · · · · · (更多)

第1章　灵活的文字1
11　常见的方法3
12　为什么这样设计不是无懈可击的4
13　权衡我们的选择6
131　长度单位6
132　表示“相对大小”的关键字6
133　百分比值7
134　表示“绝对大小”的关键字7
14　无懈可击的方法7
141　关键字8
142　放弃像素级别的精确度8
15　为什么这样设计是无懈可击的9
16　接下来的操作9
161　设置基准值9
162　使用百分比值来获取不同的尺寸10
17　结合使用关键字和百分比值13
171　设定一个中间的关键字基准值13
172　慎用嵌套百分比值15
173　百分比值的一致性试验17
18　通过em实现灵活的文字18
19　rem单位19
110　本章小结21
第2章　可伸缩的导航栏23
21　常见的方法24
211　功能强大的选项卡25
目　　录
X 无懈可击的Web设计——使用HTML 5和CSS 3提高网站的灵活性与适应性(第3版)
212　通常的翻转效果 26
22　为什么这样设计不是无懈可击的 26
221　堆积如山的代码 26
222　不方便使用 27
223　可伸缩性的问题 27
224　不够灵活 27
23　无懈可击的方法 27
231　无样式的导航列表 29
232　两幅小图片 29
233　应用样式 30
234　采用浮动来解决问题 31
235　为选项卡定形 32
236　对齐背景图片 32
237　增加底边 34
238　悬停变换 35
239　选中状态35
24　为什么这样设计是无懈可击的 36
25　使用CSS 3渐变而不使用图片实现 37
26　通过eｍ来实现 40
27　其他示例 42
271　MOZILLAORG 42
272　斜杠 43
273　ESPNCOM的搜索栏 43
28　本章小结 45
第3章　可扩展的行47
31　常见的方法 48
32　为什么这样设计不是无懈可击的 50
321　非必要的图片 50
322　固定的行高 50
323　臃肿的代码 51
33　无懈可击的方法 51
331　HTML 代码结构 51
目　　录XI
332　标识出各部分 52
333　没有添加样式时的情形 53
334　添加背景 54
335　安排内容的位置 54
336　消失的背景 55
337　添加更多细节 56
338　四个圆角 58
339　文本和链接的细节 60
3310　最后一步 62
3311　针对IE7进行的修改63
34　为什么这样设计是无懈可击的 64
341　代码结构与设计效果的分离 65
342　不再有固定不变的高度 65
35　通过border-radius实现 66
36　另一个自适应扩展例子 68
361　HTML 代码 69
362　创建两幅图片 69
363　添加 CSS 70
364　自动扩展 71
37　本章小结 72
第4章　巧妙的浮动效果73
41　常见的方法 75
42　为什么这样设计不是无懈可击的 76
43　无懈可击的方法 77
431　对HTML代码无止境的抉择 77
432　使用定义列表 78
433　HTML代码结构 79
434　没有添加样式时的情形 80
435　为外围容器添加样式 80
436　标识图片 81
437　应用基本的样式 82
438　给图片定位 86
XII 无懈可击的Web设计——使用HTML 5和CSS 3提高网站的灵活性与适应性(第3版)
439　反向浮动 86
4310　为任意长度的说明文字做准备 89
4311　浮动自清除 90
4312　尾声 92
4313　切换浮动方向 94
4314　表格效果 96
4315　更换背景图片 99
4316　应用box-shadow 101
4317　其他清除浮动元素的方法 103
4318　通过生成的内容进行清除 104
44　为什么这样设计是无懈可击的 107
45　本章小结 108
第5章　牢固的方框109
51　常见的方法 111
52　为什么这样设计不是无懈可击的 113
53　无懈可击的方法 114
531　HTML 代码结构 115
532　图片策略 115
533　应用样式 117
54　为什么这样设计是无懈可击的 119
55　通过CSS 3实现 120
56　其他圆角实现技术 124
57　框提示 132
571　单圆角 132
572　圆角提示 135
573　无懈可击的箭头 136
574　CSS 中的限制孕育了技术上的创新 137
58　本章小结 138
第6章　页面在缺失图片或CSS的情况下仍然易读139
61　常见的方法 140
62　为什么这样设计不是无懈可击的 143
目　　录XIII
63　无懈可击的方法 144
64　为什么这样设计是无懈可击的 146
65　使用样式或禁用样式 148
66　常见的方法 149
67　无懈可击的方法 150
68　Dig Dug 测试 152
69　无懈可击的工具 153
691　Favelet 154
692　Web Developer Extension 156
693　Web Accessibility 工具栏 158
694　Firebug 158
695　将验证作为一种工具 159
610　本章小结 162
第7章　可转换的表格 163
71　常见的方法 164
72　为什么这样设计不是无懈可击的 166
73　无懈可击的方法 167
731　HTML 代码结构 168
732　应用样式 174
74　为什么这样设计是无懈可击的 186
75　本章小结 187
第8章　流动布局和弹性布局 189
81　常见的方法 190
82　为什么这样设计不是无懈可击的 192
821　大量的代码 192
822　噩梦般的维护工作 193
823　并非最佳的内容顺序 193
83　无懈可击的方法 194
831　HTML 代码结构 194
832　创建栏：浮动与定位 195
833　应用样式 197
XIV 无懈可击的Web设计——使用HTML 5和CSS 3提高网站的灵活性与适应性(第3版)
834　gutter 201
835　栏的内边距 203
836　设置宽度的最大值和最小值 209
837　滑动人造栏 213
838　三栏布局 216
84　为什么这样设计是无懈可击的 223
85　基于eｍ的布局 224
851　一个弹性布局的例子 224
852　HTML 代码 226
853　CSS 228
854　一致性是最理想的 230
855　注意滚动条 230
86　本章小结 231
第9章　构成一个整体 233
91　目标 234
92　为什么这样设计是无懈可击的 235
921　流动的布局 236
922　灵活的文字 237
923　即使没有图片和CSS也可以使用页面 238
924　国际化 240
93　构建过程 240
931　HTML 代码结构 241
932　基本样式 242
933　布局结构 242
934　灵活的网格 244
935　 设置max-width 244
936　页头 247
937　灵活的图片 249
938　侧边栏 251
939　CSS 3的多栏布局 255
9310　媒体查询的魔力 256
94　本章小结 264附录D Excel快捷键 745
· · · · · · (收起)