響應(yīng)式Web設(shè)計(jì) HTML5和CSS3實(shí)戰(zhàn)（第2版）

第1 章 響應(yīng)式Web 設(shè)計(jì)基礎(chǔ) 1
1．1　定義需求　1
1．2　什么是響應(yīng)式Web 設(shè)計(jì)　2
1．3　瀏覽器支持　2
1．4　第一個(gè)響應(yīng)式的例子　4
1．4．1　HTML　5
1．4．2　圖片　8
1．4．3　媒體查詢　10
1．5　示例的不足之處　14
1．6　小結(jié)　15
第2　章 媒體查詢　16
2．1　為什么響應(yīng)式Web 設(shè)計(jì)需要媒體查詢　17
2．2　媒體查詢的語(yǔ)法　18
2．3　組合媒體查詢　19
2．3．1　@import 與媒體查詢　20
2．3．2　在CSS 中使用媒體查詢　20
2．3．3　媒體查詢可以測(cè)試哪些特性　20
2．4　通過(guò)媒體查詢修改設(shè)計(jì)　21
2．4．1　任何CSS 都可以放在媒體查詢里　23
2．4．2　針對(duì)高分辨率設(shè)備的媒體查詢　23
2．5　組織和編寫(xiě)媒體查詢的注意事項(xiàng)　24
2．5．1　使用媒體查詢鏈接不同的CSS文件　24
2．5．2　分隔媒體查詢的利弊　25
2．5．3　把媒體查詢寫(xiě)在常規(guī)樣式表中　25
2．6　組合媒體查詢還是把它們寫(xiě)在需要的地方　25
2．7　關(guān)于視口的meta 標(biāo)簽　27
2．8　媒體查詢4 級(jí)　28
2．8．1　可編程的媒體特性　29
2．8．2　交互媒體特性　30
2．8．3　懸停媒體特性　30
2．8．4　環(huán)境媒體特性　31
2．9　小結(jié)　31
第3　章 彈性布局與響應(yīng)式圖片　32
3．1　將固定像素大小轉(zhuǎn)換為彈性比例大小　33
3．1．1　為什么需要Flexbox　36
3．1．2　行內(nèi)塊與空白　37
3．1．3　浮動(dòng)　37
3．1．4　表格與表元　37
3．2　Flexbox 概述　38
3．2．1　Flexbox 三級(jí)跳　38
3．2．2　瀏覽器對(duì)Flexbox 的支持　38
3．3　使用Flexbox　39
3．3．1　完美垂直居中文本　40
3．3．2　偏移　41
3．3．3　反序　42
3．3．4　不同媒體查詢中的不同F(xiàn)lexbox 布局　43
3．3．5　行內(nèi)伸縮　44
3．3．6　Flexbox 的對(duì)齊　45
3．3．7　flex　50
3．3．8　簡(jiǎn)單的粘附頁(yè)腳　52
3．3．9　改變?cè)即涡颉?3
3．3．10　Flexbox 小結(jié)　57
3．4　響應(yīng)式圖片　58
3．4．1　響應(yīng)式圖片的固有問(wèn)題　58
3．4．2　通過(guò)srcset 切換分辨率　59
3．4．3　srcset 及sizes 聯(lián)合切換　59
3．4．4　picture 元素　60
3．5　小結(jié)　61
第4　章 HTML5 與響應(yīng)式Web 設(shè)計(jì)　62
4．1　得到普遍支持的HTML5 標(biāo)記　63
4．2　開(kāi)始寫(xiě)HTML5 網(wǎng)頁(yè)　63
4．2．1　doctype　64
4．2．2　HTML 標(biāo)簽與lang 屬性　64
4．2．3　指定替代語(yǔ)言　64
4．2．4　字符編碼　64
4．3　寬容的HTML5　65
4．3．1　理性編寫(xiě)HTML5　66
4．3．2　向標(biāo)簽致敬　66
4．4　HTML5 的新語(yǔ)義元素　67
4．4．1　
元素　67
4．4．2　
元素　68
4．4．3　
元素　68
4．4．4　
元素　68
4．4．5　
元素　69
4．4．6　
和
元素　69
4．4．7　和
元素　69
4．4．8　
元素　71
4．4．9　
元素　71
4．4．10　
元素　71
4．4．11　h1 到h6　72
4．5　HTML5 文本級(jí)元素　72
4．5．1　元素　72
4．5．2　元素　73
4．5．3　元素　73
4．6　作廢的HTML 特性　73
4．7　使用HTML5 元素　74
4．8　WCAG 和WAI-ARIA　75
4．8．1　WCAG　75
4．8．2　WAI-ARIA　75
4．8．3　如果你只能記住一件事　76
4．8．4　ARIA 的更多用途　76
4．9　在HTML5 中嵌入媒體　77
4．9．1　使用HTML5 視頻和音頻　77
4．9．2　audio 與video 幾乎一樣　79
4．10　響應(yīng)式HTML5 視頻與內(nèi)嵌框架　79
4．11　關(guān)于“離線優(yōu)先”　80
4．12　小結(jié)　81
第5　章 CSS3 新特性　82
5．1　沒(méi)人無(wú)所不知　82
5．2　剖析CSS 規(guī)則　83
5．3　便捷的CSS 技巧　83
5．4　斷字　86
5．4．1　截短文本　86
5．4．2　創(chuàng)建水平滾動(dòng)面板　87
5．5　在CSS 中創(chuàng)建分支　89
5．5．1　特性查詢　89
5．5．2　組合條件　90
5．5．3　Modernizr　91
5．6　新CSS3 選擇符　93
5．6．1　CSS3 屬性選擇符　93
5．6．2　CSS3 子字符串匹配屬性選擇符　93
5．6．3　屬性選擇符的注意事項(xiàng)　95
5．6．4　屬性選擇符選擇以數(shù)值開(kāi)頭的ID 和類(lèi)　96
5．7　CSS3 結(jié)構(gòu)化偽類(lèi)　96
5．7．1?。簂ast-child　96
5．7．2　nth-child　97
5．7．3　理解nth　97
5．7．4　基于nth 的選擇與響應(yīng)式設(shè)計(jì)　100
5．7．5?。簄ot　102
5．7．6?。篹mpty　103
5．7．7?。篺irst-line　104
5．8　CSS 自定義屬性和變量　104
5．9　CSS calc　105
5．10　CSS Level 4 選擇符　105
5．10．1?。篽as 偽類(lèi)　105
5．10．2　相對(duì)視口的長(zhǎng)度　106
5．11　Web 排版　106
5．11．1　@font-face　107
5．11．2　通過(guò)@font-face 實(shí)現(xiàn)Web字體　107
5．11．3　注意事項(xiàng)　109
5．12　CSS3 的新顏色格式及透明度　109
5．12．1　RGB　109
5．12．2　HSL　110
5．12．3　alpha 通道　111
5．12．4　CSS Color Module Level 4的顏色操作　112
5．13　小結(jié)　112
第6　章 CSS3 高級(jí)技術(shù)　113
6．1　CSS3 的文字陰影特效　113
6．1．1　省略blur 值　114
6．1．2　多文字陰影　115
6．2　盒陰影　115
6．2．1　內(nèi)陰影　115
6．2．2　多重陰影　116
6．2．3　陰影尺寸　116
6．3　背景漸變　117
6．3．1　線性漸變語(yǔ)法　118
6．3．2　徑向漸變背景　120
6．3．3　為響應(yīng)式而生的關(guān)鍵字　120
6．4　重復(fù)漸變　121
6．5　使用漸變背景創(chuàng)造圖案　122
6．6　多張背景圖片　123
6．6．1　背景大小　124
6．6．2　背景位置　124
6．6．3　背景屬性的縮寫(xiě)　125
6．7　高分辨率背景圖像　126
6．8　CSS 濾鏡　126
6．8．1　可用的CSS 濾鏡　127
6．8．2　使用多個(gè)CSS 濾鏡　132
6．9　CSS 性能的警告　132
6．10　小結(jié)　134
第7　章 SVG 與響應(yīng)式Web 設(shè)計(jì)　135
7．1　SVG 的歷史　137
7．2　用文檔表示的圖像　137
7．2．1　SVG 的根元素　138
7．2．2　命名空間　139
7．2．3　標(biāo)題和描述標(biāo)簽　139
7．2．4　defs 標(biāo)簽　139
7．2．5　元素g　140
7．2．6　SVG 形狀元素　140
7．2．7　SVG 路徑　140
7．3　使用流行的圖像編輯工具和服務(wù)創(chuàng)建SVG　140
7．4　在Web 頁(yè)面中插入SVG　142
7．4．1　使用img 標(biāo)簽　142
7．4．2　使用object 標(biāo)簽　142
7．4．3　把SVG 作為背景圖像插入　143
7．4．4　關(guān)于data URI 的簡(jiǎn)短介紹　144
7．4．5　生成圖像精靈　145
7．5　內(nèi)聯(lián)SVG　145
7．5．1　利用符號(hào)復(fù)用圖形對(duì)象　146
7．5．2　根據(jù)上下文改變內(nèi)聯(lián)SVG顏色　147
7．5．3　復(fù)用外部圖形對(duì)象資源　148
7．6　不同插入方式下可以使用的功能　149
7．7　SVG 的怪癖　150
7．7．1　SMIL 動(dòng)畫(huà)　150
7．7．2　使用外部樣式表為SVG 添加樣式　152
7．7．3　使用內(nèi)聯(lián)樣式為SVG 添加樣式　152
7．7．4　用CSS 為SVG 添加動(dòng)畫(huà)　153
7．8　使用JavaScript 添加SVG 動(dòng)畫(huà)　154
7．9　優(yōu)化SVG　156
7．10　把SVG 作為濾鏡　157
7．11　SVG 中媒體查詢的注意事項(xiàng)　159
7．11．1　實(shí)現(xiàn)技巧　160
7．11．2　更多資料　160
7．12　小結(jié)　161
第8　章 CSS3 過(guò)渡、變形和動(dòng)畫(huà)　162
8．1　什么是CSS3 過(guò)渡以及如何使用它　162
8．1．1　過(guò)渡相關(guān)的屬性　164
8．1．2　過(guò)渡的簡(jiǎn)寫(xiě)語(yǔ)法　165
8．1．3　在不同時(shí)間段內(nèi)過(guò)渡不同屬性　165
8．1．4　理解過(guò)渡調(diào)速函數(shù)　166
8．1．5　響應(yīng)式網(wǎng)站中的有趣過(guò)渡　167
8．2　CSS 的2D 變形　167
8．2．1　scale　168
8．2．2　translate　168
8．2．3　rotate　171
8．2．4　skew　171
8．2．5　matrix　172
8．2．6　transform-origin 屬性　173
8．3　CSS3 的3D 變形　174
8．4　CSS3 動(dòng)畫(huà)效果　180
8．5　小結(jié)　183
第9　章 表單　184
9．1　HTML5 表單　184
9．2　理解HTML5 表單中的元素　185
9．2．1　placeholder　186
9．2．2　required　186
9．2．3　autofocus　187
9．2．4　autocomplete　188
9．2．5　list 及對(duì)應(yīng)的datalist元素　188
9．3　HTML5 的新輸入類(lèi)型　190
9．3．1　email　190
9．3．2　number　191
9．3．3　url　192
9．3．4　tel　193
9．3．5　search　194
9．3．6　pattern　195
9．3．7　color　196
9．3．8　日期和時(shí)間輸入類(lèi)型　196
9．3．9　范圍值　198
9．4　如何給不支持新特性的瀏覽器打補(bǔ)丁　199
9．5　使用CSS 美化HTML5 表單　200
9．5．1　顯示必填項(xiàng)　202
9．5．2　創(chuàng)造一個(gè)背景填充效果　204
9．6　小結(jié)　205
第10　章 實(shí)現(xiàn)響應(yīng)式Web 設(shè)計(jì)　206
10．1　盡快讓設(shè)計(jì)在瀏覽器和真實(shí)設(shè)備上運(yùn)行起來(lái)　207
10．2　在真實(shí)設(shè)備上觀察和使用設(shè)計(jì)　207
10．3　擁抱漸進(jìn)增強(qiáng)　208
10．4　確定需要支持的瀏覽器　209
10．4．1　等價(jià)的功能，而不是等價(jià)的外觀　209
10．4．2　選擇要支持的瀏覽器　209
10．5　分層的用戶體驗(yàn)　210
10．6　將CSS 斷點(diǎn)與JavaScript 聯(lián)系起來(lái)　211
10．7　避免在生產(chǎn)中使用CSS 框架　212
10．8　采用務(wù)實(shí)的解決方案　213
10．9　盡可能使用最簡(jiǎn)單的代碼　215
10．10　根據(jù)視口隱藏、展示和加載內(nèi)容　215
10．11　驗(yàn)證器和代碼檢測(cè)工具　217
10．12　性能　218
10．13　下一個(gè)劃時(shí)代的產(chǎn)物　219
10．14　小結(jié)　219