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

目錄

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