響應式Web設計 pdf epub mobi txt 電子書 下載2025

第1章 　HTML5、CSS3及響應式設計入門　　1
1.1 　為什麼智能手機很重要（而老版的IE不再重要）　　2
1.2 　響應式設計一定是最佳選擇嗎　　3
1.3 　響應式網頁設計的定義　　3
1.4 　為什麼要在響應式設計上停滯不前　　4
1.5 　響應式網頁設計示例　　4
1.5.1 　下載視口調試工具　　4
1.5.2 　在綫創意源泉　　11
1.6 　為什麼HTML5很優秀　　12
1.6.1 　省時省力　　12
1.6.2 　新增瞭語義化標簽元素　　13
1.7 　CSS3為響應式設計和更多創新奠定瞭基礎　　13
1.7.1 　底綫：CSS3不破壞任何東西　　14
1.7.2 　CSS3如何解決日常設計問題　　14
1.8 　看呐，不用圖片　　17
1.9 　HTML5和CSS3現在就能用嗎　　20
1.10 　響應式網頁設計不是靈丹妙藥　　20
1.11 　引導客戶：網站不必在所有瀏覽器中錶現一緻　　21
1.12 　小結　　22
第2章 　媒體查詢：支持不同的視口　　23
2.1 　現在就能使用媒體查詢　　23
2.2 　為什麼響應式設計需要媒體查詢　　24
2.2.1 　媒體查詢語法　　24
2.2.2 　 媒體查詢能檢測那些特性　　26
2.2.3 　用媒體查詢改造我們的設計　　27
2.2.4 　加載媒體查詢的最佳方法　　27
2.3 　我們的第一個響應式設計　　27
2.3.1 　我們的設計是固定寬度的，不要驚訝　　28
2.3.2 　響應式設計中要保證圖片盡可能精簡　　32
2.3.3 　小視口下的內容剪切　　33
2.4 　阻止移動瀏覽器自動調整頁麵大小　　34
2.5 　針對不同視口寬度修正設計　　37
2.6 　響應式設計中內容始終優先　　38
2.7 　媒體查詢隻是必要條件之一　　42
2.8 　小結　　42
第3章 　擁抱流式布局　　43
3.1 　固定布局經不起未來考驗　　43
3.2 　為什麼響應式設計需要百分比布局　　44
3.3 　將網頁從固定布局修改為百分比布局　　44
3.3.1 　需要牢記的公式　　45
3.3.2 　設置百分比元素的上下文　　47
3.3.3 　必須時刻牢記上下文　　52
3.4 　用em替換px　　54
3.5 　彈性圖片　　56
3.5.1 　讓圖片隨視口縮放　　56
3.5.2 　為特定圖片指定特定規則　　58
3.5.3 　給彈性圖片設置閾值　　59
3.5.4 　超級全能的max-width屬性　　61
3.6 　為不同的屏幕尺寸提供不同的圖片　　61
3.7 　流動網格布局和媒體查詢的默契配閤　　66
3.8 　CSS網格係統　　66
3.9 　小結　　72
第4章 　響應式設計中的HTML5　　73
4.1 　HTML5的哪些部分現在就能用　　73
4.1.1 　大多數網站可以用HTML5編寫　　74
4.1.2 　膩子腳本和Modernizr　　74
4.2 　如何編寫HTML5網頁　　75
4.2.1 　HTML5的精簡之道　　76
4.2.2 　HTML5標簽的閤理寫法　　76
4.2.3 　偉大的<a>標簽萬歲　　77
4.2.4 　HTML的廢棄零件　　77
4.3 　HTML5的全新語義化元素　　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結構元素的實際用法　　81
4.5 　HTML5的文本級語義元素　　87
4.5.1 　<b>　　88
4.5.2 　<em>　　88
4.5.3 　<i>　　88
4.5.4 　在頁麵中應用文本層語義元素　　88
4.6 　遵循WAI-ARIA實現無障礙站點　　90
4.7 　在HTML5中嵌入媒體　　93
4.8 　用HTML5的方法為頁麵添加視頻或音頻　　93
4.8.1 　提供備用的媒體源文件　　95
4.8.2 　針對老版本瀏覽器的備用方案　　95
4.8.3 　和標簽的用法基本一緻　　96
4.9 　響應式視頻　　96
4.10 　離綫Web應用　　99
4.10.1 　離綫Web應用概述　　99
4.10.2 　讓網頁可離綫使用　　99
4.10.3 　理解manifest文件　　100
4.10.4 　頁麵被自動加載到離綫緩存　　101
4.10.5 　版本注釋的用途　　101
4.10.6 　離綫訪問網站　　101
4.10.7 　離綫Web應用的故障診斷　　102
4.11 　小結　　103
第5章 　CSS3：選擇器、字體和顔色模式　　104
5.1 　CSS3給前端開發人員帶來瞭什麼　　104
5.1.1 　Internet Explorer 6到8對CSS3的支持　　105
5.1.2 　使用CSS3設計和開發頁麵　　105
5.2 　CSS規則解析　　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結構僞類　　113
5.5.3 　對僞元素的修正　　122
5.6 　自定義網頁字體　　123
5.6.1 　@font-face規則　　124
5.6.2 　使用@font-face嵌入網頁字體　　124
5.7 　幫幫我，標題模糊怎麼辦　　127
5.8 　新的CSS3顔色格式和透明度　　129
5.8.1 　RGB顔色　　130
5.8.2 　HSL顔色　　131
5.8.3 　針對IE6、IE7和IE8提供備用顔色值　　132
5.8.4 　透明通道　　132
5.9 　小結　　134
第6章 　用CSS3創造令人驚艷的美　　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 　內陰影　　141
6.2.2 　多重陰影　　142
6.3 　背景漸變　　143
6.3.1 　綫性背景漸變　　144
6.3.2 　徑嚮背景漸變　　147
6.3.3 　重復漸變　　149
6.4 　背景漸變圖案　　151
6.5 　CSS3的響應性　　153
6.6 　組閤使用CSS3屬性　　155
6.7 　多重背景圖片　　159
6.7.1 　背景圖片大小　　161
6.7.2 　背景圖片位置　　161
6.7.3 　背景屬性的縮寫語法　　161
6.8 　更多CSS特性　　162
6.9 　可縮放圖標：響應式設計中的完美選擇　　162
6.10 　小結　　163
第7章 　CSS3過渡、變形和動畫　　164
7.1 　什麼是CSS3過渡以及如何使用它　　164
7.1.1 　過渡相關的屬性　　166
7.1.2 　響應式網站中的有趣過渡　　168
7.2 　CSS3的2D變形　　169
7.3 　嘗試CSS3的3D變形　　174
7.3.1 　分析3D變形效果　　176
7.3.2 　3D變形尚未成熟　　178
7.4 　CSS3動畫效果　　179
7.5 　小結　　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（及對應的datalist元素）　　191
8.1.7 　HTML5的新輸入類型　　192
8.1.8 　日期和時間輸入類型　　198
8.2 　如何給不支持新特性的瀏覽器打補丁　　203
8.3 　使用CSS3美化HTML5錶單　　204
8.4 　小結　　210
第9章 　解決跨瀏覽器問題　　211
9.1 　漸進增強與優雅降級　　215
9.2 　該不該修復老版本IE　　216
9.2.1 　統計數據（再看看世界的變化）　　216
9.2.2 　個人選擇　　216
9.3 　前端的瑞士軍刀：Modernizr　　217
9.3.1 　使用Modernizr輔助修正樣式問題　　219
9.3.2 　使用Modernizr讓老版本IE支持HTML5元素　　221
9.3.3 　給IE6、7、8追加min/max媒體查詢功能　　222
9.3.4 　使用Modernizr按需加載資源　　223
9.4 　必要時將導航鏈接轉換為下拉菜單　　225
9.5 　高分辨率設備（未來趨勢）　　228
9.6 　小結　　231
· · · · · · (收起)