響應(yīng)式Web設(shè)計(jì)(HTML5和CSS3實(shí)戰(zhàn))pdf高清完整版【無(wú)水印】

關(guān)于響應(yīng)式Web設(shè)計(jì)：HTML5和CSS3實(shí)戰(zhàn)這本書(shū)，小編看到不少讀者這樣評(píng)價(jià)——前半部分講解responsive design，后面都是一些對(duì)html5、css3功能的羅列，沒(méi)總結(jié)學(xué)習(xí)過(guò)的同學(xué)可以讀一下，實(shí)際5~8章是可以略過(guò)，直接跳到最后一章吧！——其實(shí)不用這么絕對(duì)嘛！因?yàn)檫�有另外一撥讀者表示——前半段介紹RWD得蠻好的，后面有點(diǎn)湊了，講CSS3和HTML5新特性，比較離譜的還分析HTML5 表單的新屬性�！�—好了，言歸正傳，本節(jié)內(nèi)容東坡小編為大家整理帶來(lái)的是一份pdf格式高清完整版無(wú)水印響應(yīng)式web設(shè)計(jì)電子書(shū)，以下是相關(guān)介紹，希望對(duì)大家有所幫助！

響應(yīng)式web設(shè)計(jì)電子書(shū)目錄

第1章 　HTML5、CSS3及響應(yīng)式設(shè)計(jì)入門(mén)　　1

1.1 　為什么智能手機(jī)很重要（而老版的IE不再重要）　　2

1.2 　響應(yīng)式設(shè)計(jì)一定是最佳選擇嗎　　3

1.3 　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的定義　　3

1.4 　為什么要在響應(yīng)式設(shè)計(jì)上停滯不前　　4

1.5 　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)示例　　4

1.5.1 　下載視口調(diào)試工具　　4

1.5.2 　在線創(chuàng)意源泉　　11

1.6 　為什么HTML5很優(yōu)秀　　12

1.6.1 　省時(shí)省力　　12

1.6.2 　新增了語(yǔ)義化標(biāo)簽元素　　13

1.7 　CSS3為響應(yīng)式設(shè)計(jì)和更多創(chuàng)新奠定了基礎(chǔ)　　13

1.7.1 　底線：CSS3不破壞任何東西　　14

1.7.2 　CSS3如何解決日常設(shè)計(jì)問(wèn)題　　14

1.8 　看吶，不用圖片　　17

1.9 　HTML5和CSS3現(xiàn)在就能用嗎　　20

1.10 　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)不是靈丹妙藥　　20

1.11 　引導(dǎo)客戶：網(wǎng)站不必在所有瀏覽器中表現(xiàn)一致　　21

1.12 　小結(jié)　　22

第2章 　媒體查詢：支持不同的視口　　23

2.1 　現(xiàn)在就能使用媒體查詢　　23

2.2 　為什么響應(yīng)式設(shè)計(jì)需要媒體查詢　　24

2.2.1 　媒體查詢語(yǔ)法　　24

2.2.2 　 媒體查詢能檢測(cè)那些特性　　26

2.2.3 　用媒體查詢改造我們的設(shè)計(jì)　　27

2.2.4 　加載媒體查詢的最佳方法　　27

2.3 　我們的第一個(gè)響應(yīng)式設(shè)計(jì)　　27

2.3.1 　我們的設(shè)計(jì)是固定寬度的，不要驚訝　　28

2.3.2 　響應(yīng)式設(shè)計(jì)中要保證圖片盡可能精簡(jiǎn)　　32

2.3.3 　小視口下的內(nèi)容剪切　　33

2.4 　阻止移動(dòng)瀏覽器自動(dòng)調(diào)整頁(yè)面大小　　34

2.5 　針對(duì)不同視口寬度修正設(shè)計(jì)　　37

2.6 　響應(yīng)式設(shè)計(jì)中內(nèi)容始終優(yōu)先　　38

2.7 　媒體查詢只是必要條件之一　　42

2.8 　小結(jié)　　42

第3章 　擁抱流式布局　　43

3.1 　固定布局經(jīng)不起未來(lái)考驗(yàn)　　43

3.2 　為什么響應(yīng)式設(shè)計(jì)需要百分比布局　　44

3.3 　將網(wǎng)頁(yè)從固定布局修改為百分比布局　　44

3.3.1 　需要牢記的公式　　45

3.3.2 　設(shè)置百分比元素的上下文　　47

3.3.3 　必須時(shí)刻牢記上下文　　52

3.4 　用em替換px　　54

3.5 　彈性圖片　　56

3.5.1 　讓圖片隨視口縮放　　56

3.5.2 　為特定圖片指定特定規(guī)則　　58

3.5.3 　給彈性圖片設(shè)置閾值　　59

3.5.4 　超級(jí)全能的max-width屬性　　61

3.6 　為不同的屏幕尺寸提供不同的圖片　　61

3.7 　流動(dòng)網(wǎng)格布局和媒體查詢的默契配合　　66

3.8 　CSS網(wǎng)格系統(tǒng)　　66

3.9 　小結(jié)　　72

第4章 　響應(yīng)式設(shè)計(jì)中的HTML5　　73

4.1 　HTML5的哪些部分現(xiàn)在就能用　　73

4.1.1 　大多數(shù)網(wǎng)站可以用HTML5編寫(xiě)　　74

4.1.2 　膩?zhàn)幽_本和Modernizr　　74

4.2 　如何編寫(xiě)HTML5網(wǎng)頁(yè)　　75

4.2.1 　HTML5的精簡(jiǎn)之道　　76

4.2.2 　HTML5標(biāo)簽的合理寫(xiě)法　　76

4.2.3 　偉大的<a>標(biāo)簽萬(wàn)歲　　77

4.2.4 　HTML的廢棄零件　　77

4.3 　HTML5的全新語(yǔ)義化元素　　78

4.3.1 　<section>　　78

4.3.2 　<nav>　　79

4.3.3 　<article>　　79

4.3.4 　<aside>　　79

4.3.5 　<hgroup>　　79

4.3.6 　<header>　　81

4.3.7 　<footer>　　81

4.3.8 　<address>　　81

4.4 　HTML5結(jié)構(gòu)元素的實(shí)際用法　　81

4.5 　HTML5的文本級(jí)語(yǔ)義元素　　87

4.5.1 　<b>　　88

4.5.2 　<em>　　88

4.5.3 　<i>　　88

4.5.4 　在頁(yè)面中應(yīng)用文本層語(yǔ)義元素　　88

4.6 　遵循WAI-ARIA實(shí)現(xiàn)無(wú)障礙站點(diǎn)　　90

4.7 　在HTML5中嵌入媒體　　93

4.8 　用HTML5的方法為頁(yè)面添加視頻或音頻　　93

4.8.1 　提供備用的媒體源文件　　95

4.8.2 　針對(duì)老版本瀏覽器的備用方案　　95

4.8.3 　和標(biāo)簽的用法基本一致　　96

4.9 　響應(yīng)式視頻　　96

4.10 　離線Web應(yīng)用　　99

4.10.1 　離線Web應(yīng)用概述　　99

4.10.2 　讓網(wǎng)頁(yè)可離線使用　　99

4.10.3 　理解manifest文件　　100

4.10.4 　頁(yè)面被自動(dòng)加載到離線緩存　　101

4.10.5 　版本注釋的用途　　101

4.10.6 　離線訪問(wèn)網(wǎng)站　　101

4.10.7 　離線Web應(yīng)用的故障診斷　　102

4.11 　小結(jié)　　103

第5章 　CSS3：選擇器、字體和顏色模式　　104

5.1 　CSS3給前端開(kāi)發(fā)人員帶來(lái)了什么　　104

5.1.1 　Internet Explorer 6到8對(duì)CSS3的支持　　105

5.1.2 　使用CSS3設(shè)計(jì)和開(kāi)發(fā)頁(yè)面　　105

5.2 　CSS規(guī)則解析　　105

5.3 　私有前綴及其用法　　106

5.4 　快速而有效的CSS技巧　　108

5.4.1 　CSS3多欄布局　　108

5.4.2 　文字換行　　110

5.5 　CSS3的新增選擇器及其用法　　111

5.5.1 　CSS3屬性選擇器　　111

5.5.2 　CSS3結(jié)構(gòu)偽類(lèi)　　113

5.5.3 　對(duì)偽元素的修正　　122

5.6 　自定義網(wǎng)頁(yè)字體　　123

5.6.1 　@font-face規(guī)則　　124

5.6.2 　使用@font-face嵌入網(wǎng)頁(yè)字體　　124

5.7 　幫幫我，標(biāo)題模糊怎么辦　　127

5.8 　新的CSS3顏色格式和透明度　　129

5.8.1 　RGB顏色　　130

5.8.2 　HSL顏色　　131

5.8.3 　針對(duì)IE6、IE7和IE8提供備用顏色值　　132

5.8.4 　透明通道　　132

5.9 　小結(jié)　　134

第6章 　用CSS3創(chuàng)造令人驚艷的美　　135

6.1 　文字陰影　　136

6.1.1 　HEX、HSL或RGB顏色都可以　　136

6.1.2 　px、em或rem都行　　136

6.1.3 　取消文字陰影　　138

6.1.4 　制作浮雕文字陰影效果　　139

6.1.5 　多重文字陰影　　140

6.2 　盒陰影　　140

6.2.1 　內(nèi)陰影　　141

6.2.2 　多重陰影　　142

6.3 　背景漸變　　143

6.3.1 　線性背景漸變　　144

6.3.2 　徑向背景漸變　　147

6.3.3 　重復(fù)漸變　　149

6.4 　背景漸變圖案　　151

6.5 　CSS3的響應(yīng)性　　153

6.6 　組合使用CSS3屬性　　155

6.7 　多重背景圖片　　159

6.7.1 　背景圖片大小　　161

6.7.2 　背景圖片位置　　161

6.7.3 　背景屬性的縮寫(xiě)語(yǔ)法　　161

6.8 　更多CSS特性　　162

6.9 　可縮放圖標(biāo)：響應(yīng)式設(shè)計(jì)中的完美選擇　　162

6.10 　小結(jié)　　163

第7章 　CSS3過(guò)渡、變形和動(dòng)畫(huà)　　164

7.1 　什么是CSS3過(guò)渡以及如何使用它　　164

7.1.1 　過(guò)渡相關(guān)的屬性　　166

7.1.2 　響應(yīng)式網(wǎng)站中的有趣過(guò)渡　　168

7.2 　CSS3的2D變形　　169

7.3 　嘗試CSS3的3D變形　　174

7.3.1 　分析3D變形效果　　176

7.3.2 　3D變形尚未成熟　　178

7.4 　CSS3動(dòng)畫(huà)效果　　179

7.5 　小結(jié)　　185

第8章 　用HTML5和CSS3征服表單　　186

8.1 　HTML5表單　　186

8.1.1 　理解HTML5表單中的元素　　188

8.1.2 　placeholder　　189

8.1.3 　required　　189

8.1.4 　autofocus　　190

8.1.5 　autocomplete　　191

8.1.6 　list（及對(duì)應(yīng)的datalist元素）　　191

8.1.7 　HTML5的新輸入類(lèi)型　　192

8.1.8 　日期和時(shí)間輸入類(lèi)型　　198

8.2 　如何給不支持新特性的瀏覽器打補(bǔ)丁　　203

8.3 　使用CSS3美化HTML5表單　　204

8.4 　小結(jié)　　210

第9章 　解決跨瀏覽器問(wèn)題　　211

9.1 　漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)　　215

9.2 　該不該修復(fù)老版本IE　　216

9.2.1 　統(tǒng)計(jì)數(shù)據(jù)（再看看世界的變化）　　216

9.2.2 　個(gè)人選擇　　216

9.3 　前端的瑞士軍刀：Modernizr　　217

9.3.1 　使用Modernizr輔助修正樣式問(wèn)題　　219

9.3.2 　使用Modernizr讓老版本IE支持HTML5元素　　221

9.3.3 　給IE6、7、8追加min/max媒體查詢功能　　222

9.3.4 　使用Modernizr按需加載資源　　223

9.4 　必要時(shí)將導(dǎo)航鏈接轉(zhuǎn)換為下拉菜單　　225

9.5 　高分辨率設(shè)備（未來(lái)趨勢(shì)）　　228

9.6 　小結(jié)　　231

響應(yīng)式web設(shè)計(jì)電子書(shū)簡(jiǎn)介

本書(shū)堪稱(chēng)學(xué)習(xí)響應(yīng)式Web設(shè)計(jì)的難得佳作。它不僅全面、細(xì)致、圖文并茂地介紹了響應(yīng)式設(shè)計(jì)相關(guān)的技術(shù)，比如媒體查詢、流式布局、彈性媒體和彈性字體等，還把近幾年來(lái)Web設(shè)計(jì)領(lǐng)域公認(rèn)的最佳設(shè)計(jì)理念有機(jī)地融入到了實(shí)例當(dāng)中，比如移動(dòng)先行（Mobile First）、漸進(jìn)增強(qiáng)、平穩(wěn)退化、無(wú)障礙設(shè)計(jì)等。

響應(yīng)式web設(shè)計(jì)電子書(shū)內(nèi)容截圖