《无懈可击的Web 设计—— 利用XHTML 和CSS 提高网站的灵活性与适应性(第2 版) 》

目    录

第1 章 灵活的文字....................................................... 1
1.1　常见的方法.................................................................................................................2
1.2　权衡我们的选择.........................................................................................................5
1.2.1　长度单位............................................................................................................................. 6
1.2.2　表示“相对大小”的关键字............................................................................................. 6
1.2.3　百分比值............................................................................................................................. 6
1.2.4　表示“绝对大小”的关键字............................................................................................. 7
1.3　无懈可击的方法.........................................................................................................7
1.3.1　关键字................................................................................................................................ 7
1.3.2　放弃像素级别的精确度..................................................................................................... 8
1.3.3　需要解决的两个问题......................................................................................................... 9
1.3.4　简化的Box Model Hack ...................................................................................................11
1.4　为什么说它是无懈可击的.......................................................................................12
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　通过Em 实现灵活的文字........................................................................................21
1.8　本章小结...................................................................................................................23
VI 无懈可击的Web设计(第2 版)
第2 章 可伸缩的导航栏.................................................. 25
2.1　常见的方法...............................................................................................................26
2.1.1　功能强大的选项卡...........................................................................................................27
2.1.2　通常的翻转效果...............................................................................................................28
2.2　为什么这样做不是无懈可击的...............................................................................28
2.2.1　堆积如山的代码...............................................................................................................28
2.2.2　不方便使用.......................................................................................................................29
2.2.3　可伸缩性的问题...............................................................................................................29
2.2.4　缺乏灵活性.......................................................................................................................29
2.3　无懈可击的方法.......................................................................................................29
2.3.1　无样式的导航列表...........................................................................................................30
2.3.2　两幅小图片.......................................................................................................................31
2.3.3　应用样式...........................................................................................................................31
2.3.4　采用浮动来解决问题.......................................................................................................32
2.3.5　为选项卡定形...................................................................................................................33
2.3.6　对齐背景图片....................................................................................................................34
2.3.7　增加底边...........................................................................................................................36
2.3.8　悬停变换............................................................................................................................37
2.3.9　选中状态...........................................................................................................................38
2.4　为什么这样做是无懈可击的...................................................................................38
2.5　通过Em 来实现.......................................................................................................39
2.6　其他示例...................................................................................................................41
2.6.1　MOZILLA.ORG ...............................................................................................................41
2.6.2　斜杠..................................................................................................................................41
2.6.3　的搜索栏......................................................................................................42
2.7　本章小结...................................................................................................................44
第3 章 可扩展的行...................................................... 45
3.1　常见的方法...............................................................................................................46
3.2　为什么这样做不是无懈可击的...............................................................................48
3.2.1　非必要的图片...................................................................................................................48
目 录VII
3.2.2　固定的行高.......................................................................................................................48
3.2.3　臃肿的代码.......................................................................................................................49
3.3　无懈可击的方法.......................................................................................................49
3.3.1　HTML 代码结构...............................................................................................................49
3.3.2　标识出各部分....................................................................................................................50
3.3.3　没有添加样式时的情形....................................................................................................51
3.3.4　设定背景............................................................................................................................52
3.3.5　安排内容的位置................................................................................................................52
3.3.6　消失的背景........................................................................................................................54
3.3.7　添加更多细节....................................................................................................................55
3.3.8　四个圆角............................................................................................................................58
3.3.9　文本和链接的细节............................................................................................................59
3.3.10　最后一步.........................................................................................................................61
3.3.11　针对IE7 进行的修改......................................................................................................63
3.4　为什么这样做是无懈可击的...................................................................................64
3.4.1　代码结构与设计效果的分离............................................................................................64
3.4.2　不再有固定不变的高度....................................................................................................65
3.5　自适应扩展的另一个例子.......................................................................................66
3.5.1　HTML 代码.......................................................................................................................67
3.5.2　创建这两张图片................................................................................................................67
3.5.3　添加CSS ............................................................................................................................68
3.5.4　自动扩展............................................................................................................................70
3.6　本章小结...................................................................................................................70
第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
VIII 无懈可击的Web设计(第2 版)
4.3.4　没有样式时的情形...........................................................................................................81
4.3.5　为外围容器增加样式.......................................................................................................81
4.3.6　标识图片...........................................................................................................................82
4.3.7　应用基本的样式...............................................................................................................83
4.3.8　给图片定位.......................................................................................................................87
4.3.9　反向浮动...........................................................................................................................88
4.3.10　为任意长度的描述文字做准备......................................................................................91
4.3.11　浮动自清除.....................................................................................................................92
4.3.12　尾声................................................................................................................................96
4.3.13　切换浮动方向.................................................................................................................99
4.3.14　表格效果...................................................................................................................... 101
4.3.15　更换背景图片.............................................................................................................. 104
4.3.16　其他清除浮动元素的方法........................................................................................... 107
4.3.17　通过内容生成来轻松处理清除................................................................................... 108
4.4　为什么这样做是无懈可击的.................................................................................112
4.5　本章小结.................................................................................................................112
第5 章 牢固的方框..................................................... 113
5.1　常见的方法.............................................................................................................114
5.2　为什么这样做不是无懈可击的.............................................................................117
5.3　无懈可击的方法.....................................................................................................118
5.3.1　HTML 代码结构........................................................................................................... 118
5.3.2　图片策略........................................................................................................................ 119
5.3.3　应用样式........................................................................................................................ 121
5.4　为什么这样做是无懈可击的.................................................................................124
5.5　其他圆角实现技术.................................................................................................124
5.6　提示框.....................................................................................................................133
5.6.1　圆角提示........................................................................................................................ 136
5.6.2　无懈可击的箭头............................................................................................................ 137
5.6.3　CSS中的限制孕育了技术上的创新............................................................................. 138
5.7　本章小结.................................................................................................................139
目 录IX
第6 章 页面在缺失图片或CSS 的情况下仍然易读........................... 141
6.1　常见的方法.............................................................................................................142
6.2　为什么这样做不是无懈可击的.............................................................................145
6.3　无懈可击的方法.....................................................................................................146
6.4　为什么这样做是无懈可击的.................................................................................147
6.5　使用样式或禁用样式.............................................................................................150
6.5.1　10 秒钟可用性测试法................................................................................................... 150
6.5.2　常见的方法.................................................................................................................... 151
6.5.3　无懈可击的方法............................................................................................................ 152
6.6　Dig Dug 测试..........................................................................................................154
6.7　无懈可击的工具.....................................................................................................155
6.7.1　Favelets .......................................................................................................................... 155
6.7.2　Web Developer Extension ............................................................................................... 157
6.7.3　Web Accessibility工具条............................................................................................... 158
6.7.4　FIREBUB ....................................................................................................................... 158
6.7.5　把检验作为一种工具.................................................................................................... 159
6.8　本章小结.................................................................................................................162
第7 章 可转换的表格................................................... 165
7.1　常见的方法.............................................................................................................166
7.2　为什么这样做不是无懈可击的.............................................................................158
7.3　无懈可击的方法.....................................................................................................169
7.3.1　HTML 代码结构........................................................................................................... 169
7.3.2　应用样式........................................................................................................................ 175
7.4　为什么这样做是无懈可击的.................................................................................191
7.5　本章小结.................................................................................................................192
第8 章 流动布局和弹性布局............................................. 195
8.1　常见的方法.............................................................................................................196
8.2　为什么这样做不是无懈可击的.............................................................................198
8.2.1　大量的代码.................................................................................................................... 199
X 无懈可击的Web设计(第2 版)
8.2.2　噩梦般的维护工作........................................................................................................ 199
8.2.3　并非最佳的内容顺序.................................................................................................... 199
8.3　无懈可击的方法.....................................................................................................200
8.3.1　HTML 代码结构............................................................................................................ 200
8.3.2　创建栏：浮动与定位.................................................................................................... 201
8.3.3　应用样式........................................................................................................................ 203
8.3.4　gutter ............................................................................................................................... 207
8.3.5　栏的留白........................................................................................................................ 210
8.3.6　设置宽度的最大和最小值............................................................................................. 215
8.3.7　滑动人造栏.................................................................................................................... 218
8.3.8　三栏布局........................................................................................................................ 222
8.4　为什么这样做是无懈可击的.................................................................................230
8.5　基于Em 的布局.....................................................................................................230
8.5.1　一个弹性布局的例子.................................................................................................... 231
8.5.2　HTML 代码.................................................................................................................... 232
8.5.3　CSS ................................................................................................................................ 234
8.5.4　一致性是最理想的........................................................................................................ 237
8.5.5　注意滚动条.................................................................................................................... 237
8.6　本章小结.................................................................................................................238
第9 章 构成一个整体................................................... 239
9.1　目标........................................................................................................................240
9.2　为什么这样做是无懈可击的.................................................................................241
9.2.1　流动的布局.................................................................................................................... 241
9.2.2　灵活的文字.................................................................................................................... 242
9.2.3　即使没有图片和(或)CSS，页面也没问题.................................................................. 243
9.2.4　国际化............................................................................................................................ 245
9.3　构建过程.................................................................................................................245
9.3.1　HTML 代码结构............................................................................................................ 246
9.3.2　基本的样式.................................................................................................................... 248
9.3.3　布局结构........................................................................................................................ 248
目 录XI
9.3.4　侧边栏背景.................................................................................................................... 249
9.3.5　页头................................................................................................................................ 251
9.3.6　信息行............................................................................................................................ 254
9.3.7　gutter ............................................................................................................................... 256
9.3.8　内容栏............................................................................................................................ 257
9.3.9　侧边栏............................................................................................................................ 266
9.3.10　页脚.............................................................................................................................. 272
9.4　针对IE 的CSS 调整..............................................................................................273
9.4.1　hack管理........................................................................................................................ 274
9.4.2　页脚补丁........................................................................................................................ 275
9.4.3　自清除问题的补丁........................................................................................................ 275
9.5　本章小结.................................................................................................................276
网友评论精选.......................................................... 277