目 錄
譯者序
CSS3歡迎你
致 謝
第1章 CSS3和現(xiàn)代Web設(shè)計 / 1
1.1 為什么要使用CSS3 / 2
1.2 現(xiàn)代Web設(shè)計理念 / 3
1.2.1 可訪問性第一 / 3
1.2.2 可用性其次 / 5
1.2.3 優(yōu)雅降級和漸進增強 / 5
1.3 對內(nèi)容的思考過程 / 6
1.4 本書中的CSS3模塊 / 7
1.5 常用CSS3特性 / 9
1.5.1 廠商前綴 / 9
1.5.2 CSS3顏色 / 11
1.5.3 用rem調(diào)整文本大小 / 13
1.5.4 CSS3選擇器 / 15
小結(jié) / 24
第2章 利用HTML5與JavaScript構(gòu)建堅實的跨瀏覽器模板 / 25
2.1 從HTML5語義開始 / 26
2.1.1 為什么用HTML5 / 26
2.1.2 HTML5錯誤處理 / 27
2.2 建立模板 / 28
2.2.1 HTML5的DOCTYPE / 28
2.2.2 語言和基本文檔綱要 / 29
2.2.3 定義文檔字符集 / 29
2.2.4 XHTML5和代碼風(fēng)格 / 30
2.2.5 為HTML5語義元素添加跨瀏覽器支持性 / 30
2.3 校驗HTML5 / 32
2.4 探索HTML5元素 / 33
2.4.1 <audio>與<video> / 34
2.4.2 <article>與<section> / 36
2.4.3 <header>與<footer> / 38
2.4.4 <aside> / 38
2.4.5 <nav> / 39
2.4.6 <hgroup> / 39
2.4.7 <figure>與<figcaption> / 40
2.4.8 <time> / 40
2.4.9 <mark> / 42
2.4.10 HTML5表單元素 / 42
2.4.11 <canvas> / 44
2.5 CSS重置和normalize.css / 45
2.6 JavaScript庫綜述 / 46
2.6.1 css3-mediaqueries-js / 46
2.6.2 CSS3PIE / 47
2.6.3 Modernizr / 48
2.6.4 Selectivizr / 48
2.7 IE條件注釋 / 48
小結(jié) / 50
第3章 讓字體和文本變得有趣 / 51
3.1 蟒蛇來啦 / 52
3.2 使用Web字體 / 53
3.2.1 給示例使用Web字體 / 54
3.2.2 Web-Font問題 / 56
3.2.3 Windows渲染問題 / 59
3.2.4 商用字體服務(wù) / 62
3.3 CSS3文本爭執(zhí) / 64
3.3.1 文本陰影 / 65
3.3.2 控制文本溢出 / 67
3.3.3 word-wrap打破長單詞 / 68
3.3.4 控制斷字 / 69
3.4 CSS3排版 / 70
3.4.1 基于Web的連寫和文本渲染優(yōu)化 / 71
3.4.2 啟用Web高級的字體特性font-feature-settings / 72
3.4.3 連寫和自由連寫 / 73
3.4.4 數(shù)字、分數(shù)和序數(shù) / 73
3.4.5 小型大寫字母和小號大寫字母 / 75
3.4.6 字距調(diào)整 / 76
3.4.7 樣式集和其他組合效果 / 76
3.4.8 font-feature用途的小貼士 / 77
小結(jié) / 78
第4章 CSS3修飾的增強盒子 / 79
4.1 CSS3修飾的光明前景 / 80
4.2 border-radius：圓角的福音 / 82
4.3 使用box-shadow添加立體效果 / 85
4.4 用CSS漸變來修飾 / 88
4.4.1 線性漸變 / 88
4.4.2 徑向漸變 / 92
4.4.3 為舊版IE提供漸變支持 / 98
4.5 多重背景 / 99
4.6 構(gòu)思巧妙的盒子：border-image / 101
4.7 box-decoration-break / 106
4.8 給橫幅廣告添加修飾 / 107
4.8.1 構(gòu)建基礎(chǔ) / 107
4.8.2 添加CSS3火花 / 109
4.8.3 支持舊版瀏覽器 / 110
4.8.4 改進廣告 / 110
小結(jié) / 111
第5章 用CSS3制作動畫效果 / 112
5.1 CSS動畫 / 113
5.2 變形 / 114
5.2.1 2D變形 / 115
5.2.2 3D變形 / 121
5.3 過渡 / 134
5.3.1 選擇過渡的元素 / 135
5.3.2 選擇過渡持續(xù)時間 / 136
5.3.3 過渡延遲時間 / 136
5.3.4 過渡的速率變化 / 136
5.3.5 過渡簡寫及多重過渡 / 141
5.4 動畫 / 142
5.4.1 建立基本動畫 / 142
5.4.2 給元素應(yīng)用動畫 / 144
5.4.3 設(shè)置動畫持續(xù)時間 / 145
5.4.4 調(diào)整動畫的速率 / 146
5.4.5 增加延遲時間 / 147
5.4.6 選擇animation-direction:back還是forth / 147
5.4.7 animation-fill-mode / 148
5.4.8 簡寫和多重動畫 / 148
5.5 用動畫提升橫幅廣告 / 149
5.6 用Modernizr提供備選方案 / 153
5.6.1 給頁面添加Modernizr / 154
5.6.2 提供替換樣式 / 155
5.6.3 動畫和腳本 / 157
小結(jié) / 163
第6章 使用CSS生成圖標(biāo) / 164
6.1 翻滾吧，圖標(biāo) / 165
6.2 在頁面上使用圖標(biāo) / 165
6.3 何時使用圖標(biāo) / 167
6.4 生成圖標(biāo)的基礎(chǔ) / 168
6.4.1 內(nèi)容生成圖標(biāo) / 170
6.4.2 CSS Sprite圖 / 170
6.4.3 更“防彈式”的圖標(biāo) / 171
6.4.4 多背景圖片的修飾圖標(biāo) / 172
6.5 Web字體作為圖標(biāo) / 173
6.6 獨特的純CSS圖標(biāo) / 176
小結(jié) / 179
第7章 CSS3布局排版 / 180
7.1 CSS3布局模塊簡介 / 181
7.2 多欄布局 / 182
7.2.1 設(shè)置分欄的數(shù)量 / 183
7.2.2 根據(jù)寬度分欄而非數(shù)量 / 184
7.2.3 定義分欄空隙 / 185
7.2.4 定義分欄內(nèi)容的填充方式 / 185
7.2.5 內(nèi)容的跨欄目布置 / 187
7.2.6 控制欄目的劃分 / 188
7.2.7 實戰(zhàn)多欄布局 / 189
7.2.8 多欄布局的問題 / 189
7.3 使用Flexbox / 191
7.3.1 控制Flexbox的子項伸縮流的方向 / 192
7.3.2 自定義子元素的顯示順序 / 195
7.3.3 對齊Flexbox子項 / 195
7.3.4 彈性的Flexbox / 197
7.3.5 用Modernizr實現(xiàn)跨瀏覽器Flexbox / 201
7.4 探索網(wǎng)格 / 201
7.4.1 定義網(wǎng)格結(jié)構(gòu) / 202
7.4.2 將內(nèi)容嵌套在網(wǎng)格上 / 203
7.4.3 一個真實的網(wǎng)格例子 / 204
7.4.4 網(wǎng)格問題 / 205
7.5 值得一提的其他布局模塊 / 206
7.5.1 區(qū)域 / 206
7.5.2 排除 / 208
7.5.3 GCPM / 210
小結(jié) / 211
第8章 響應(yīng)式和自適應(yīng)設(shè)計 / 212
8.1 網(wǎng)絡(luò)瀏覽器簡史 / 213
8.2 響應(yīng)式設(shè)計策略 / 214
8.2.1 不做任何特殊處理 / 215
8.2.2 不同的設(shè)備提供不同的內(nèi)容 / 215
8.2.3 為不同瀏覽器/設(shè)備優(yōu)化網(wǎng)站 / 218
8.3 彈性布局技術(shù) / 219
8.3.1 可伸縮的容器 / 219
8.3.2 響應(yīng)式媒體布局 / 220
8.4 媒介查詢 / 223
8.4.1 一些媒介查詢的例子 / 225
8.4.2 移動設(shè)備優(yōu)先 / 230
8.5 媒介查詢補丁 / 231
8.6 提供響應(yīng)式圖片 / 232
8.7 移動瀏覽器是個騙子 / 233
8.8 高保真設(shè)備 / 237
8.9 一個響應(yīng)式的重金屬橫幅廣告 / 239
8.9.1 第一種選擇：800px或者更小 / 239
8.9.2 第二種選擇：480px或者更小 / 239
小結(jié) / 241
鄂公網(wǎng)安備 42010302001612號 