無(wú)懈可擊的Web設(shè)計(jì)(第3版)將指導(dǎo)您采用標(biāo)準(zhǔn)設(shè)計(jì)策略來(lái)滿足以各種方式瀏覽網(wǎng)頁(yè)的各類用戶的需要。每章首先列舉一個(gè)沿用傳統(tǒng)HTML技術(shù)的實(shí)例，然后指出該實(shí)例的局限性，并利用XHTML和CSS對(duì)其進(jìn)行重構(gòu)。從中您將學(xué)會(huì)如何用簡(jiǎn)潔高效的HTML標(biāo)記和CSS來(lái)取代臃腫的代碼，從而創(chuàng)建加載速度極快、能供所有用戶使用的網(wǎng)站。本書(shū)最后將前面各章討論的所有頁(yè)面組件珠聯(lián)璧合地結(jié)合在一起，制作了一個(gè)頁(yè)面模板。這一版全面潤(rùn)色和更新了上一版本，介紹了CSS 3和HTML 5方法，并重新設(shè)計(jì)了“新響應(yīng)設(shè)計(jì)”等多個(gè)案例。

目錄

第1章　靈活的文字1
11　常見(jiàn)的方法3
12　為什么這樣設(shè)計(jì)不是無(wú)懈可擊的4
13　權(quán)衡我們的選擇6
131　長(zhǎng)度單位6
132　表示“相對(duì)大小”的關(guān)鍵字6
133　百分比值7
134　表示“絕對(duì)大小”的關(guān)鍵字7
14　無(wú)懈可擊的方法7
141　關(guān)鍵字8
142　放棄像素級(jí)別的精確度8
15　為什么這樣設(shè)計(jì)是無(wú)懈可擊的9
16　接下來(lái)的操作9
161　設(shè)置基準(zhǔn)值9
162　使用百分比值來(lái)獲取不同的尺寸10
17　結(jié)合使用關(guān)鍵字和百分比值13
171　設(shè)定一個(gè)中間的關(guān)鍵字基準(zhǔn)值13
172　慎用嵌套百分比值15
173　百分比值的一致性試驗(yàn)17
18　通過(guò)em實(shí)現(xiàn)靈活的文字18
19　rem單位19
110　本章小結(jié)21
第2章　可伸縮的導(dǎo)航欄23
21　常見(jiàn)的方法24
211　功能強(qiáng)大的選項(xiàng)卡25
目　　錄
X 無(wú)懈可擊的Web設(shè)計(jì)——使用HTML 5和CSS 3提高網(wǎng)站的靈活性與適應(yīng)性(第3版)
212　通常的翻轉(zhuǎn)效果 26
22　為什么這樣設(shè)計(jì)不是無(wú)懈可擊的 26
221　堆積如山的代碼 26
222　不方便使用 27
223　可伸縮性的問(wèn)題 27
224　不夠靈活 27
23　無(wú)懈可擊的方法 27
231　無(wú)樣式的導(dǎo)航列表 29
232　兩幅小圖片 29
233　應(yīng)用樣式 30
234　采用浮動(dòng)來(lái)解決問(wèn)題 31
235　為選項(xiàng)卡定形 32
236　對(duì)齊背景圖片 32
237　增加底邊 34
238　懸停變換 35
239　選中狀態(tài)35
24　為什么這樣設(shè)計(jì)是無(wú)懈可擊的 36
25　使用CSS 3漸變而不使用圖片實(shí)現(xiàn) 37
26　通過(guò)eｍ來(lái)實(shí)現(xiàn) 40
27　其他示例 42
271　MOZILLAORG 42
272　斜杠 43
273　ESPNCOM的搜索欄 43
28　本章小結(jié) 45
第3章　可擴(kuò)展的行47
31　常見(jiàn)的方法 48
32　為什么這樣設(shè)計(jì)不是無(wú)懈可擊的 50
321　非必要的圖片 50
322　固定的行高 50
323　臃腫的代碼 51
33　無(wú)懈可擊的方法 51
331　HTML 代碼結(jié)構(gòu) 51
目　　錄XI
332　標(biāo)識(shí)出各部分 52
333　沒(méi)有添加樣式時(shí)的情形 53
334　添加背景 54
335　安排內(nèi)容的位置 54
336　消失的背景 55
337　添加更多細(xì)節(jié) 56
338　四個(gè)圓角 58
339　文本和鏈接的細(xì)節(jié) 60
3310　最后一步 62
3311　針對(duì)IE7進(jìn)行的修改63
34　為什么這樣設(shè)計(jì)是無(wú)懈可擊的 64
341　代碼結(jié)構(gòu)與設(shè)計(jì)效果的分離 65
342　不再有固定不變的高度 65
35　通過(guò)border-radius實(shí)現(xiàn) 66
36　另一個(gè)自適應(yīng)擴(kuò)展例子 68
361　HTML 代碼 69
362　創(chuàng)建兩幅圖片 69
363　添加 CSS 70
364　自動(dòng)擴(kuò)展 71
37　本章小結(jié) 72
第4章　巧妙的浮動(dòng)效果73
41　常見(jiàn)的方法 75
42　為什么這樣設(shè)計(jì)不是無(wú)懈可擊的 76
43　無(wú)懈可擊的方法 77
431　對(duì)HTML代碼無(wú)止境的抉擇 77
432　使用定義列表 78
433　HTML代碼結(jié)構(gòu) 79
434　沒(méi)有添加樣式時(shí)的情形 80
435　為外圍容器添加樣式 80
436　標(biāo)識(shí)圖片 81
437　應(yīng)用基本的樣式 82
438　給圖片定位 86
XII 無(wú)懈可擊的Web設(shè)計(jì)——使用HTML 5和CSS 3提高網(wǎng)站的靈活性與適應(yīng)性(第3版)
439　反向浮動(dòng) 86
4310　為任意長(zhǎng)度的說(shuō)明文字做準(zhǔn)備 89
4311　浮動(dòng)自清除 90
4312　尾聲 92
4313　切換浮動(dòng)方向 94
4314　表格效果 96
4315　更換背景圖片 99
4316　應(yīng)用box-shadow 101
4317　其他清除浮動(dòng)元素的方法 103
4318　通過(guò)生成的內(nèi)容進(jìn)行清除 104
44　為什么這樣設(shè)計(jì)是無(wú)懈可擊的 107
45　本章小結(jié) 108
第5章　牢固的方框109
51　常見(jiàn)的方法 111
52　為什么這樣設(shè)計(jì)不是無(wú)懈可擊的 113
53　無(wú)懈可擊的方法 114
531　HTML 代碼結(jié)構(gòu) 115
532　圖片策略 115
533　應(yīng)用樣式 117
54　為什么這樣設(shè)計(jì)是無(wú)懈可擊的 119
55　通過(guò)CSS 3實(shí)現(xiàn) 120
56　其他圓角實(shí)現(xiàn)技術(shù) 124
57　框提示 132
571　單圓角 132
572　圓角提示 135
573　無(wú)懈可擊的箭頭 136
574　CSS 中的限制孕育了技術(shù)上的創(chuàng)新 137
58　本章小結(jié) 138
第6章　頁(yè)面在缺失圖片或CSS的情況下仍然易讀139
61　常見(jiàn)的方法 140
62　為什么這樣設(shè)計(jì)不是無(wú)懈可擊的 143
目　　錄XIII
63　無(wú)懈可擊的方法 144
64　為什么這樣設(shè)計(jì)是無(wú)懈可擊的 146
65　使用樣式或禁用樣式 148
66　常見(jiàn)的方法 149
67　無(wú)懈可擊的方法 150
68　Dig Dug 測(cè)試 152
69　無(wú)懈可擊的工具 153
691　Favelet 154
692　Web Developer Extension 156
693　Web Accessibility 工具欄 158
694　Firebug 158
695　將驗(yàn)證作為一種工具 159
610　本章小結(jié) 162
第7章　可轉(zhuǎn)換的表格 163
71　常見(jiàn)的方法 164
72　為什么這樣設(shè)計(jì)不是無(wú)懈可擊的 166
73　無(wú)懈可擊的方法 167
731　HTML 代碼結(jié)構(gòu) 168
732　應(yīng)用樣式 174
74　為什么這樣設(shè)計(jì)是無(wú)懈可擊的 186
75　本章小結(jié) 187
第8章　流動(dòng)布局和彈性布局 189
81　常見(jiàn)的方法 190
82　為什么這樣設(shè)計(jì)不是無(wú)懈可擊的 192
821　大量的代碼 192
822　噩夢(mèng)般的維護(hù)工作 193
823　并非最佳的內(nèi)容順序 193
83　無(wú)懈可擊的方法 194
831　HTML 代碼結(jié)構(gòu) 194
832　創(chuàng)建欄：浮動(dòng)與定位 195
833　應(yīng)用樣式 197
XIV 無(wú)懈可擊的Web設(shè)計(jì)——使用HTML 5和CSS 3提高網(wǎng)站的靈活性與適應(yīng)性(第3版)
834　gutter 201
835　欄的內(nèi)邊距 203
836　設(shè)置寬度的最大值和最小值 209
837　滑動(dòng)人造欄 213
838　三欄布局 216
84　為什么這樣設(shè)計(jì)是無(wú)懈可擊的 223
85　基于eｍ的布局 224
851　一個(gè)彈性布局的例子 224
852　HTML 代碼 226
853　CSS 228
854　一致性是最理想的 230
855　注意滾動(dòng)條 230
86　本章小結(jié) 231
第9章　構(gòu)成一個(gè)整體 233
91　目標(biāo) 234
92　為什么這樣設(shè)計(jì)是無(wú)懈可擊的 235
921　流動(dòng)的布局 236
922　靈活的文字 237
923　即使沒(méi)有圖片和CSS也可以使用頁(yè)面 238
924　國(guó)際化 240
93　構(gòu)建過(guò)程 240
931　HTML 代碼結(jié)構(gòu) 241
932　基本樣式 242
933　布局結(jié)構(gòu) 242
934　靈活的網(wǎng)格 244
935　 設(shè)置max-width 244
936　頁(yè)頭 247
937　靈活的圖片 249
938　側(cè)邊欄 251
939　CSS 3的多欄布局 255
9310　媒體查詢的魔力 256
94　本章小結(jié) 264附錄D Excel快捷鍵 745