热门排行
简介
无懈可击的Web设计(第3版)将指导您采用标准设计策略来满足以各种方式浏览网页的各类用户的需要。每章首先列举一个沿用传统HTML技术的实例,然后指出该实例的局限性,并利用XHTML和CSS对其进行重构。从中您将学会如何用简洁高效的HTML标记和CSS来取代臃肿的代码,从而创建加载速度极快、能供所有用户使用的网站。本书最后将前面各章讨论的所有页面组件珠联璧合地结合在一起,制作了一个页面模板。这一版全面润色和更新了上一版本,介绍了CSS 3和HTML 5方法,并重新设计了“新响应设计”等多个案例。
目录
第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 通过em来实现 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 基于em的布局 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