《回響式Web設計：HTML5和CSS3實戰（第2版）》是2020年3月人民郵電出版社出版的圖書，作者是【英】本·弗萊恩（Ben Frain）。
基本介紹
- 書名：回響式Web設計：HTML5和CSS3實戰（第2版）
- 作者：【英】本·弗萊恩（Ben Frain）
- ISBN：9787115446558
- 頁數：220頁
- 定價：59元
- 出版社：人民郵電出版社
- 出版時間：2020年3月
- 裝幀：平裝
- 開本：16開
內容簡介,圖書目錄,
內容簡介
本書將當前Web 設計中熱門的回響式設計技術與HTML5 和CSS3 結合起來，為讀者全面深入地講解了針對各種螢幕大小設計和開發現代網站的各種技術。書中不僅討論了媒體查詢、彈性布局、回響式圖片，更將新的和有用的HTML5 和CSS3 技術一併講解，是學習新Web 設計技術****的佳作。
圖書目錄
第 1 章 回響式Web 設計基礎 1
1.1 定義需求 1
1.2 什麼是回響式Web 設計 2
1.3 瀏覽器支持 2
1.4 第 一個回響式的例子 4
1.4.1 HTML 5
1.4.2 圖片 8
1.4.3 媒體查詢 10
1.5 示例的不足之處 14
1.6 小結 15
第 2 章 媒體查詢 16
2.1 為什麼回響式Web 設計需要媒體查詢 17
2.2 媒體查詢的語法 18
2.3 組合媒體查詢 19
2.3.1 @import 與媒體查詢 20
2.3.2 在CSS 中使用媒體查詢 20
2.3.3 媒體查詢可以測試哪些特性 20
2.4 通過媒體查詢修改設計 21
2.4.1 任何CSS 都可以放在媒體查詢里 23
2.4.2 針對高解析度設備的媒體查詢 23
2.5 組織和編寫媒體查詢的注意事項 24
2.5.1 使用媒體查詢連結不同的CSS檔案 24
2.5.2 分隔媒體查詢的利弊 25
2.5.3 把媒體查詢寫在常規樣式表中 25
2.6 組合媒體查詢還是把它們寫在需要的地方 25
2.7 關於視口的meta 標籤 27
2.8 媒體查詢4 級 28
2.8.1 可程式的媒體特性 29
2.8.2 互動媒體特性 30
2.8.3 懸停媒體特性 30
2.8.4 環境媒體特性 31
2.9 小結 31
第3 章 彈性布局與回響式圖片 32
3.1 將固定像素大小轉換為彈性比例大小 33
3.1.1 為什麼需要Flexbox 36
3.1.2 行內塊與空白 37
3.1.3 浮動 37
3.1.4 表格與表元 37
3.2 Flexbox 概述 38
3.2.1 Flexbox 三級跳 38
3.2.2 瀏覽器對Flexbox 的支持 38
3.3 使用Flexbox 39
3.3.1 **垂直居中文本 40
3.3.2 偏移 41
3.3.3 反序 42
3.3.4 不同媒體查詢中的不同Flexbox 布局 43
3.3.5 行內伸縮 44
3.3.6 Flexbox 的對齊 45
3.3.7 flex 50
3.3.8 簡單的粘附頁腳 52
3.3.9 改變原始次序 53
3.3.10 Flexbox 小結 57
3.4 回響式圖片 58
3.4.1 回響式圖片的固有問題 58
3.4.2 通過srcset 切換解析度 59
3.4.3 srcset 及sizes 聯合切換 59
3.4.4 picture 元素 60
3.5 小結 61
第4 章 HTML5 與回響式Web 設計 62
4.1 得到普遍支持的HTML5 標記 63
4.2 開始寫HTML5 網頁 63
4.2.1 doctype 64
4.2.2 HTML 標籤與lang 屬性 64
4.2.3 指定替代語言 64
4.2.4 字元編碼 64
4.3 寬容的HTML5 65
4.3.1 理性編寫HTML5 66
4.3.2 向標籤致敬 66
4.4 HTML5 的新語義元素 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 文本級元素 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 回響式HTML5 視頻與內嵌框架 79
4.11 關於“離線優先” 80
4.12 小結 81
第5 章 CSS3 新特性 82
5.1 沒人無所不知 82
5.2 剖析CSS 規則 83
5.3 便捷的CSS 技巧 83
5.4 斷字 86
5.4.1 截短文本 86
5.4.2 創建水平滾動面板 87
5.5 在CSS 中創建分支 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 屬性選擇符的注意事項 95
5.6.4 屬性選擇符選擇以數值開頭的ID 和類 96
5.7 CSS3 結構化偽類 96
5.7.1 :last-child 96
5.7.2 nth-child 97
5.7.3 理解nth 97
5.7.4 基於nth 的選擇與回響式設計 100
5.7.5 :not 102
5.7.6 :empty 103
5.7.7 :first-line 104
5.8 CSS 自定義屬性和變數 104
5.9 CSS calc 105
5.10 CSS Level 4 選擇符 105
5.10.1 :has 偽類 105
5.10.2 相對視口的長度 106
5.11 Web 排版 106
5.11.1 @font-face 107
5.11.2 通過@font-face 實現Web字型 107
5.11.3 注意事項 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 小結 112
第6 章 CSS3 **技術 113
6.1 CSS3 的文字陰影特效 113
6.1.1 省略blur 值 114
6.1.2 多文字陰影 115
6.2 盒陰影 115
6.2.1 內陰影 115
6.2.2 多重陰影 116
6.2.3 陰影尺寸 116
6.3 背景漸變 117
6.3.1 線性漸變語法 118
6.3.2 徑向漸變背景 120
6.3.3 為回響式而生的關鍵字 120
6.4 重複漸變 121
6.5 使用漸變背景創造圖案 122
6.6 多張背景圖片 123
6.6.1 背景大小 124
6.6.2 背景位置 124
6.6.3 背景屬性的縮寫 125
6.7 高解析度背景圖像 126
6.8 CSS 濾鏡 126
6.8.1 可用的CSS 濾鏡 127
6.8.2 使用多個CSS 濾鏡 132
6.9 CSS 性能的警告 132
6.10 小結 134
第7 章 SVG 與回響式Web 設計 135
7.1 SVG 的歷史 137
7.2 用文檔表示的圖像 137
7.2.1 SVG 的根元素 138
7.2.2 命名空間 139
7.2.3 標題和描述標籤 139
7.2.4 defs 標籤 139
7.2.5 元素g 140
7.2.6 SVG 形狀元素 140
7.2.7 SVG 路徑 140
7.3 使用流行的圖像編輯工具和服務創建SVG 140
7.4 在Web 頁面中插入SVG 142
7.4.1 使用img 標籤 142
7.4.2 使用object 標籤 142
7.4.3 把SVG 作為背景圖像插入 143
7.4.4 關於data URI 的簡短介紹 144
7.4.5 生成圖像精靈 145
7.5 內聯SVG 145
7.5.1 利用符號復用圖形對象 146
7.5.2 根據上下文改變內聯SVG顏色 147
7.5.3 復用外部圖形對象資源 148
7.6 不同插入方式下可以使用的功能 149
7.7 SVG 的怪癖 150
7.7.1 SMIL 動畫 150
7.7.2 使用外部樣式表為SVG 添加樣式 152
7.7.3 使用內聯樣式為SVG 添加樣式 152
7.7.4 用CSS 為SVG 添加動畫 153
7.8 使用JavaScript 添加SVG 動畫 154
7.9 最佳化SVG 156
7.10 把SVG 作為濾鏡 157
7.11 SVG 中媒體查詢的注意事項 159
7.11.1 實現技巧 160
7.11.2 更多資料 160
7.12 小結 161
第8 章 CSS3 過渡、變形和動畫 162
8.1 什麼是CSS3 過渡以及如何使用它 162
8.1.1 過渡相關的屬性 164
8.1.2 過渡的簡寫語法 165
8.1.3 在不同時間段內過渡不同屬性 165
8.1.4 理解過渡調速函式 166
8.1.5 回響式網站中的有趣過渡 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 動畫效果 180
8.5 小結 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 及對應的datalist元素 188
9.3 HTML5 的新輸入類型 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 日期和時間輸入類型 196
9.3.9 範圍值 198
9.4 如何給不支持新特性的瀏覽器打補丁 199
9.5 使用CSS 美化HTML5 表單 200
9.5.1 顯示必填項 202
9.5.2 創造一個背景填充效果 204
9.6 小結 205
第 10 章 實現回響式Web 設計 206
10.1 儘快讓設計在瀏覽器和真實設備上運行起來 207
10.2 在真實設備上觀察和使用設計 207
10.3 擁抱漸進增強 208
10.4 確定需要支持的瀏覽器 209
10.4.1 等價的功能，而不是等價的外觀 209
10.4.2 選擇要支持的瀏覽器 209
10.5 分層的用戶體驗 210
10.6 將CSS 斷點與JavaScript 聯繫起來 211
10.7 避免在生產中使用CSS 框架 212
10.8 採用務實的解決方案 213
10.9 儘可能使用**簡單的代碼 215
10.10 根據視口隱藏、展示和載入內容 215
10.11 驗證器和代碼檢測工具 217
10.12 性能 218
10.13 下一個劃時代的產物 219
10.14 小結 219
