所在位置：
首頁 >
營銷資訊 >
營銷百科 > 響應式Web設計：HTML5和CSS3實戰(zhàn)作品目錄
響應式Web設計：HTML5和CSS3實戰(zhàn)作品目錄
時間：2023-02-21 04:54:01 | 來源：營銷百科
時間：2023-02-21 04:54:01 來源：營銷百科
響應式Web設計：HTML5和CSS3實戰(zhàn)作品目錄：
版權聲明Copyright?2012PacktPublishing.FirstpublishedintheEnglishlanguageunderthetitleResponsiveWebDesignwithHTML5andCSS3.SimplifiedChine……
譯者序蒂姆·伯納斯-李在1991年制作并發(fā)布了第一個網(wǎng)站，如今剛剛過去21個年頭。在這21年里，計算機和互聯(lián)網(wǎng)快速發(fā)展，這個世界的面貌也日新月異。在這個過程中，網(wǎng)頁設計從無到有，從簡單漸至專業(yè)，從可有可無變?yōu)閺V受關注。網(wǎng)頁設計方法也在跟隨時代不斷創(chuàng)新，從最初簡單的文字排版，到表格布局，再到DIV CSS，……
前言前言如果你想給自己的網(wǎng)站做一個單獨的'手機版'，請三思而后行！響應式網(wǎng)頁設計提供了一種設計方法，可以使同一網(wǎng)站在智能手機、桌面電腦，以及介于這兩者之間的任意設備上完美顯示。這種方法能夠根據(jù)用戶的屏幕尺寸，合理地為現(xiàn)有及將來的各種設備提供最佳的瀏覽體驗。本書提供了一整套方法，用來將一個現(xiàn)有的固定……
致謝致謝首先要感謝網(wǎng)絡社區(qū)。沒有大家集思廣益的才智、慷慨大方的文檔和開放共享的解決方案，我不可能在互聯(lián)網(wǎng)行業(yè)做出現(xiàn)在這點還稍稍令我自豪的事情。其次，我要感謝響應式網(wǎng)頁設計之父EthanMarcotte。他和我從未謀面或交談過，但他的方法論現(xiàn)在每時每刻都在影響著我制作網(wǎng)頁的方法。毫無疑問，假如有哪……
第1章HTML5、CSS3及響應式設計入門……
1.1為什么智能手機很重要（而老版的IE不再重要）
1.2響應式設計一定是最佳選擇嗎
1.3響應式網(wǎng)頁設計的定義
1.4為什么要在響應式設計上停滯不前
1.5響應式網(wǎng)頁設計示例
1.5.1下載視口調(diào)試工具
1.5.2在線創(chuàng)意源泉
1.6為什么HTML5很優(yōu)秀
1.6.1省時省力
1.6.2新增了語義化標簽元素
1.7CSS3為響應式設計和更多創(chuàng)新奠定了基礎
1.7.1底線：CSS3不破壞任何東西
1.7.2CSS3如何解決日常設計問題
1.8看吶，不用圖片
1.9HTML5和CSS3現(xiàn)在就能用嗎
1.10響應式網(wǎng)頁設計不是靈丹妙藥
1.11引導客戶：網(wǎng)站不必在所有瀏覽器中表現(xiàn)一致
1.12小結
第2章媒體查詢：支持不同的視口……
2.1現(xiàn)在就能使用媒體查詢
2.2為什么響應式設計需要媒體查詢
2.2.1媒體查詢語法
2.2.2媒體查詢能檢測那些特性
2.2.3用媒體查詢改造我們的設計
2.2.4加載媒體查詢的最佳方法
2.3我們的第一個響應式設計
2.3.1我們的設計是固定寬度的，不要驚訝
2.3.2響應式設計中要保證圖片盡可能精簡
2.3.3小視口下的內(nèi)容剪切
2.4阻止移動瀏覽器自動調(diào)整頁面大小
2.5針對不同視口寬度修正設計
2.6響應式設計中內(nèi)容始終優(yōu)先
2.7媒體查詢只是必要條件之一
2.8小結
第3章?lián)肀Я魇讲季?/b>
20世紀90年代末，我剛學習做網(wǎng)頁的時候，頁面布局結構都是基于表格的。通常，屏幕上顯示的各部分元素都是百分比寬度。例如，左側的導航欄可能占據(jù)20%的屏幕寬度，主內(nèi)容區(qū)占據(jù)80%。那時的瀏覽器視口還沒有像今天這樣天差地別，所以表格式布局在有限范圍的視口中表現(xiàn)良好且能自由伸縮。沒人太在意某些句子在不同大……
3.1固定布局經(jīng)不起未來考驗
3.2為什么響應式設計需要百分比布局
3.3將網(wǎng)頁從固定布局修改為百分比布局
3.3.1需要牢記的公式
3.3.2設置百分比元素的上下文
3.3.3必須時刻牢記上下文
3.4用em替換px
3.5彈性圖片
3.5.1讓圖片隨視口縮放
3.5.2為特定圖片指定特定規(guī)則
3.5.3給彈性圖片設置閾值
3.5.4超級全能的max-width屬性
3.6為不同的屏幕尺寸提供不同的圖片
3.7流動網(wǎng)格布局和媒體查詢的默契配合
3.8CSS網(wǎng)格系統(tǒng)
3.9小結
第4章響應式設計中的HTML5
HTML5是從WebApplications1.0項目發(fā)展而來的，由網(wǎng)頁超文本技術工作小組（WHATWG）發(fā)起，后被W3C采納。HTML5規(guī)范的大部分內(nèi)容都偏重于處理Web應用程序。就算你不創(chuàng)建Web應用程序，也并不意味著HTML5對你制作響應式設計就沒有太大價值。所以，HTML5的一部分特性與制……
4.1HTML5的哪些部分現(xiàn)在就能用
4.1.1大多數(shù)網(wǎng)站可以用HTML5編寫
4.1.2膩子腳本和Modernizr
4.2如何編寫HTML5網(wǎng)頁
4.2.1HTML5的精簡之道
4.2.2HTML5標簽的合理寫法
4.2.3偉大的標簽萬歲
4.2.4HTML的廢棄零件
4.3HTML5的全新語義化元素
4.3.1
4.3.2
4.3.3
4.3.4
4.3.5
4.3.6
4.3.7
4.3.8
4.4HTML5結構元素的實際用法
4.5HTML5的文本級語義元素
4.5.1
4.5.2
4.5.3
4.5.4在頁面中應用文本層語義元素
4.6遵循WAI-ARIA實現(xiàn)無障礙站點
4.7在HTML5中嵌入媒體
4.8用HTML5的方法為頁面添加視頻或音頻
4.8.1提供備用的媒體源文件
4.8.2針對老版本瀏覽器的備用方案
4.8.3和標簽的用法基本一致
4.9響應式視頻
4.10離線Web應用
4.10.1離線Web應用概述
4.10.2讓網(wǎng)頁可離線使用
4.10.3理解manifest文件
4.10.4頁面被自動加載到離線緩存
4.10.5版本注釋的用途
4.10.6離線訪問網(wǎng)站
4.10.7離線Web應用的故障診斷
4.11小結
第5章CSS3：選擇器、字體和顏色模式
第1章我們提到過，通過移動通信網(wǎng)絡來瀏覽網(wǎng)頁的人越來越多。當前電信網(wǎng)絡的速度差異很大，所以我們需要考慮帶寬限制和網(wǎng)站的加載時間。這就像回到了當年使用56K調(diào)制解調(diào)器的時代，不得不考慮頁面及其中包含的圖片和多媒體文件需要加載多長時間。現(xiàn)在，我們得面對與之類似的加載時間問題。正如表格布局技術中的百分比規(guī)……
5.1CSS3給前端開發(fā)人員帶來了什么
5.1.1InternetExplorer6到8對CSS3的支持
5.1.2使用CSS3設計和開發(fā)頁面
5.2CSS規(guī)則解析
5.3私有前綴及其用法
5.4快速而有效的CSS技巧
5.4.1CSS3多欄布局
5.4.2文字換行
5.5CSS3的新增選擇器及其用法
5.5.1CSS3屬性選擇器
5.5.2CSS3結構偽類
5.5.3對偽元素的修正
5.6自定義網(wǎng)頁字體
5.6.1@font-face規(guī)則
5.6.2使用@font-face嵌入網(wǎng)頁字體
5.7幫幫我，標題模糊怎么辦
5.8新的CSS3顏色格式和透明度
5.8.1RGB顏色
5.8.2HSL顏色
5.8.3針對IE6、IE7和IE8提供備用顏色值
5.8.4透明通道
5.9小結
第6章用CSS3創(chuàng)造令人驚艷的美
上一章，我們學習了一些簡捷有效的CSS3技巧，対制作響應式設計很有幫助。另外還使用CSS3的@font-face規(guī)則為網(wǎng)頁添加了自定義字體，使其視覺效果大大提升。此外還學習了CSS3中選擇DOM元素的工具。在學習了這些基礎知識之后，我們來看看CSS3的一些高級特性，這些特性能給我們的響應式設計帶來顯……
6.1文字陰影
6.1.1HEX、HSL或RGB顏色都可以
6.1.2px、em或rem都行
6.1.3取消文字陰影
6.1.4制作浮雕文字陰影效果
6.1.5多重文字陰影
6.2盒陰影
6.2.1內(nèi)陰影
6.2.2多重陰影
6.3背景漸變
6.3.1線性背景漸變
6.3.2徑向背景漸變
6.3.3重復漸變
6.4背景漸變圖案
6.5CSS3的響應性
6.6組合使用CSS3屬性
6.7多重背景圖片
6.7.1背景圖片大小
6.7.2背景圖片位置
6.7.3背景屬性的縮寫語法
6.8更多CSS特性
6.9可縮放圖標：響應式設計中的完美選擇
6.10小結
第7章CSS3過渡、變形和動畫
在前面兩章中，我們學習了一些CSS3的新特性和新功能。不過到目前為止，我們看到的所有效果都是靜態(tài)的。其實CSS3能做的遠不止于此。目前的情況是，如果頁面上需要一些動畫效果，要么你自己編寫JavaScript，要么使用JavaScript框架（如jQuery）來提高效率。但是，一些熟悉CSS3的同志……
7.1什么是CSS3過渡以及如何使用它
7.1.1過渡相關的屬性
7.1.2響應式網(wǎng)站中的有趣過渡
7.2CSS3的2D變形
7.3嘗試CSS3的3D變形
7.3.1分析3D變形效果
7.3.23D變形尚未成熟
7.4CSS3動畫效果
7.5小結
第8章用HTML5和CSS3征服表單
過去，想要讓表單風格跨瀏覽器保持一致是很困難的。而且還需要JavaScript來驗證表單輸入，此外，也缺少一些處理日常信息（如電話號碼、電子郵箱以及URL）的輸入類型。好消息是HTML5基本上解決了這些常見的問題。接下來我們來熟悉一下新的HTML5表單特性，來看看它們?nèi)绾螠p輕我們的負擔。在響應式……
8.1HTML5表單
8.1.1理解HTML5表單中的元素
8.1.2placeholder
8.1.3required
8.1.4autofocus
8.1.5autocomplete
8.1.6list（及對應的datalist元素）
8.1.7HTML5的新輸入類型
8.1.8日期和時間輸入類型
8.2如何給不支持新特性的瀏覽器打補丁
8.3使用CSS3美化HTML5表單
8.4小結
第9章解決跨瀏覽器問題
在最后一章，我們將學習以下內(nèi)容漸進增強和優(yōu)雅降級之間的根本區(qū)別如何讓老版本InternetExplorer支持響應式設計何如使用Modernizr按需加載CSS文件何如使用Modernizr按需加載JavaScript補丁文件如何將超長導航列表在小視口中轉換為選擇菜單如何為高分辨率（視……
9.1漸進增強與優(yōu)雅降級
9.2該不該修復老版本IE
9.2.1統(tǒng)計數(shù)據(jù)（再看看世界的變化）
9.2.2個人選擇
9.3前端的瑞士軍刀：Modernizr
9.3.1使用Modernizr輔助修正樣式問題
9.3.2使用Modernizr讓老版本IE支持HTML5元素
9.3.3給IE6、7、8追加min/max媒體查詢功能
9.3.4使用Modernizr按需加載資源
9.4必要時將導航鏈接轉換為下拉菜單
9.5高分辨率設備（未來趨勢）
9.6小結
在線咨詢