響應(yīng)式web設(shè)計(jì)是一種統(tǒng)一的解決方案,可以讓web作品適配手機(jī),平板和桌面電腦。但如何才能更好的學(xué)習(xí)和入門呢?響應(yīng)式web設(shè)計(jì)html5和css3實(shí)戰(zhàn)第2版將為用戶提供最全面的講解,是一本html和css3的實(shí)戰(zhàn)手冊,由英國程序員本·弗萊恩編著。
本書涵蓋響應(yīng)式web設(shè)計(jì)的所有相關(guān)內(nèi)容,不僅如此,通過介紹最新和最有用的html5和css3技術(shù),還擴(kuò)充了響應(yīng)式設(shè)計(jì)的方法庫,讓設(shè)計(jì)變得更簡單,更好維護(hù)。此外,本書還討論了編寫和交付代碼、圖片、文件的最佳實(shí)踐,適用于所有Web開發(fā)和設(shè)計(jì)人員,歡迎免費(fèi)下載閱讀。
內(nèi)容介紹
響應(yīng)式Web設(shè)計(jì) HTML5和CSS3實(shí)戰(zhàn)(第2版)將當(dāng)前Web 設(shè)計(jì)中熱門的響應(yīng)式設(shè)計(jì)技術(shù)與HTML5 和CSS3 結(jié)合起來,為讀者全面深入地講解了針對各種屏幕大小設(shè)計(jì)和開發(fā)現(xiàn)代網(wǎng)站的各種技術(shù)。書中不僅討論了媒體查詢、彈性布局、響應(yīng)式圖片,更將新的和有用的HTML5 和CSS3 技術(shù)一并講解,是學(xué)習(xí)新Web 設(shè)計(jì)技術(shù)不可多得的佳作。
全書具體內(nèi)容如下:
第1章,“響應(yīng)式Web設(shè)計(jì)基礎(chǔ)”,簡要介紹響應(yīng)式Web設(shè)計(jì)相關(guān)的技術(shù)。
第2章,“媒體查詢”,系統(tǒng)講解CSS媒體查詢,包括它的能力、語法,以及各種使用方式。
第3章,“彈性布局與響應(yīng)式圖片”,展示如何設(shè)計(jì)比例縮放布局和響應(yīng)式圖片,并對Flexbox布局進(jìn)行全方位介紹。
第4章,“HTML5與響應(yīng)式Web設(shè)計(jì)”,探討HTML5中的語義元素、文本級語義,以及無障礙方面的考慮,還介紹了如何在網(wǎng)頁中添加視頻和音頻。
第5章,“CSS3新特性”,探討CSS選擇符、HSLA及RGBA顏色、Web排版、視口相對單位,等等。
第6章,“CSS3高級技術(shù)”,探討CSS濾鏡、盒陰影、線性與放射漸變、多背影,以及如何為高分辨率設(shè)備提供背景圖片。
第7章,“SVG與響應(yīng)式Web設(shè)計(jì)”,講述在文檔中使用SVG、將SVG作為背影圖片,以及通過JavaScript添加交互。
第8章,“CSS3過渡、變形和動畫”,看一看使用CSS能夠做出哪些交互與動畫效果。
第9章,“表單”,在HTML5和CSS3之前,表單一直是個難題,現(xiàn)在不同了。
第10章,“實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)”,闡述在著手實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)時(shí)需要考慮的重要因素,
并給大家提供一些實(shí)用的建議。
響應(yīng)式web設(shè)計(jì)html5和css3實(shí)戰(zhàn)第2版章節(jié)目錄
第1 章 響應(yīng)式Web 設(shè)計(jì)基礎(chǔ) 1
1.1 定義需求 1
1.2 什么是響應(yīng)式Web 設(shè)計(jì) 2
1.3 瀏覽器支持 2
1.4 第一個響應(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 媒體查詢的語法 18
2.3 組合媒體查詢 19
2.3.1 @import 與媒體查詢 20
2.3.2 在CSS 中使用媒體查詢 20
2.3.3 媒體查詢可以測試哪些特性 20
2.4 通過媒體查詢修改設(shè)計(jì) 21
2.4.1 任何CSS 都可以放在媒體查詢里 23
2.4.2 針對高分辨率設(shè)備的媒體查詢 23
2.5 組織和編寫媒體查詢的注意事項(xiàng) 24
2.5.1 使用媒體查詢鏈接不同的CSS文件 24
2.5.2 分隔媒體查詢的利弊 25
2.5.3 把媒體查詢寫在常規(guī)樣式表中 25
2.6 組合媒體查詢還是把它們寫在需要的地方 25
2.7 關(guān)于視口的meta 標(biāo)簽 27
2.8 媒體查詢4 級 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 浮動 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 不同媒體查詢中的不同F(xiàn)lexbox 布局 43
3.3.5 行內(nèi)伸縮 44
3.3.6 Flexbox 的對齊 45
3.3.7 flex 50
3.3.8 簡單的粘附頁腳 52
3.3.9 改變原始次序 53
3.3.10 Flexbox 小結(jié) 57
3.4 響應(yīng)式圖片 58
3.4.1 響應(yīng)式圖片的固有問題 58
3.4.2 通過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 開始寫HTML5 網(wǎng)頁 63
4.2.1 doctype 64
4.2.2 HTML 標(biāo)簽與lang 屬性 64
4.2.3 指定替代語言 64
4.2.4 字符編碼 64
4.3 寬容的HTML5 65
4.3.1 理性編寫HTML5 66
4.3.2 向標(biāo)簽致敬 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 響應(yīng)式HTML5 視頻與內(nèi)嵌框架 79
4.11 關(guān)于“離線優(yōu)先” 80
4.12 小結(jié) 81
第5 章 CSS3 新特性 82
5.1 沒人無所不知 82
5.2 剖析CSS 規(guī)則 83
5.3 便捷的CSS 技巧 83
5.4 斷字 86
5.4.1 截短文本 86
5.4.2 創(chuà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ù)值開頭的ID 和類 96
5.7 CSS3 結(jié)構(gòu)化偽類 96
5.7.1 :last-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 :has 偽類 105
5.10.2 相對視口的長度 106
5.11 Web 排版 106
5.11.1 @font-face 107
5.11.2 通過@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 高級技術(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 線性漸變語法 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 背景屬性的縮寫 125
6.7 高分辨率背景圖像 126
6.8 CSS 濾鏡 126
6.8.1 可用的CSS 濾鏡 127
6.8.2 使用多個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 頁面中插入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 的簡短介紹 144
7.4.5 生成圖像精靈 145
7.5 內(nèi)聯(lián)SVG 145
7.5.1 利用符號復(fù)用圖形對象 146
7.5.2 根據(jù)上下文改變內(nèi)聯(lián)SVG顏色 147
7.5.3 復(fù)用外部圖形對象資源 148
7.6 不同插入方式下可以使用的功能 149
7.7 SVG 的怪癖 150
7.7.1 SMIL 動畫 150
7.7.2 使用外部樣式表為SVG 添加樣式 152
7.7.3 使用內(nèi)聯(lián)樣式為SVG 添加樣式 152
7.7.4 用CSS 為SVG 添加動畫 153
7.8 使用JavaScript 添加SVG 動畫 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 過渡、變形和動畫 162
8.1 什么是CSS3 過渡以及如何使用它 162
8.1.1 過渡相關(guān)的屬性 164
8.1.2 過渡的簡寫語法 165
8.1.3 在不同時(shí)間段內(nèi)過渡不同屬性 165
8.1.4 理解過渡調(diào)速函數(shù) 166
8.1.5 響應(yīng)式網(wǎng)站中的有趣過渡 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 小結(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 及對應(yīng)的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 日期和時(shí)間輸入類型 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)造一個背景填充效果 204
9.6 小結(jié) 205
第10 章 實(shí)現(xiàn)響應(yīng)式Web 設(shè)計(jì) 206
10.1 盡快讓設(shè)計(jì)在瀏覽器和真實(shí)設(shè)備上運(yùn)行起來 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)系起來 211
10.7 避免在生產(chǎn)中使用CSS 框架 212
10.8 采用務(wù)實(shí)的解決方案 213
10.9 盡可能使用最簡單的代碼 215
10.10 根據(jù)視口隱藏、展示和加載內(nèi)容 215
10.11 驗(yàn)證器和代碼檢測工具 217
10.12 性能 218
10.13 下一個劃時(shí)代的產(chǎn)物 219
10.14 小結(jié) 219
使用說明
1、下載并解壓,得出pdf文件
2、如果打不開本文件,請務(wù)必下載pdf閱讀器
3、安裝后,在打開解壓得出的pdf文件
4、雙擊進(jìn)行閱讀
- 下載地址
- 本地下載通道:
- 浙江電信下載
- 北京聯(lián)通下載
- 江蘇電信下載
- 廣東電信下載
有問題? 點(diǎn)此報(bào)錯
發(fā)表評論
0條評論軟件排行榜
熱門推薦
- 南方Plus電腦版 v11.8.027.22M / 簡體中文
- 得間免費(fèi)小說電腦版 v5.2.7.172.56M / 簡體中文
- 網(wǎng)易新聞電腦版 v112.697.63M / 簡體中文
- 瀟湘書院電腦版 v2.3.11.888官方版49.65M / 簡體中文
- 吉利博瑞用戶手冊 pdf高清版57.89M / 簡體中文
- 京東讀書電腦版 v1.13.4官方版1.98M / 簡體中文
- linux常用命令大全 chm版1.48M / 簡體中文
- 本草綱目 5.34M / 簡體中文
- docker入門實(shí)戰(zhàn) pdf完整版1.38M / 簡體中文
- Scala程序設(shè)計(jì)第二版 pdf高清完整版15.83M / 簡體中文