HTML5與CSS3設(shè)計(jì)模式

內(nèi)容概要

　　《HTML5與CSS3設(shè)計(jì)模式》是一部全面講述用HTML5和CSS3設(shè)計(jì)網(wǎng)頁的教程。書中含350個(gè)即時(shí)可用的模式（HTML5和CSS3代碼片段），直接復(fù)制粘貼即可使用，更可以組合起來構(gòu)建出無窮的解決方案。每個(gè)模式都可在所有主流Web瀏覽器中可靠地運(yùn)行?！禜TML5與CSS3設(shè)計(jì)模式》系統(tǒng)地介紹了CSS3的每個(gè)可用特性，并結(jié)合了HTML5來創(chuàng)建可重用的模式。另外，《HTML5與CSS3設(shè)計(jì)模式》布局巧妙，各個(gè)模式的示例在左邊，說明在右邊，非常便于查找。　　《HTML5與CSS3設(shè)計(jì)模式》適合具有HTML和CSS基礎(chǔ)的讀者學(xué)習(xí)參考。

作者簡介

Michael Bowers有22年編程生涯的老牌程序員。他從14歲那年就開始自學(xué)編程，并一直勤奮不輟?，F(xiàn)在他的身份是首席工程師和企業(yè)信息技術(shù)架構(gòu)師。他曾在很多項(xiàng)目中擔(dān)當(dāng)過程序員、架構(gòu)師以及數(shù)據(jù)建模師等角色，在開發(fā)網(wǎng)站、構(gòu)建應(yīng)用程序架構(gòu)和數(shù)據(jù)庫系統(tǒng)方面有豐富的經(jīng)驗(yàn)。除了開發(fā)過Web應(yīng)用程序、集成企業(yè)信息系統(tǒng)、構(gòu)建工廠自動(dòng)化方案之外，他還開發(fā)過編程語言、編譯器及解釋器，并且還管理過軟件團(tuán)隊(duì)。他最喜歡的編程語言包括：CSS、HTML、XML、C#、C++、Visual Basic、Java、JavaScript、SQL及XQuery。另外，Michael在鋼琴上的造詣?lì)H深。他擁有作曲專業(yè)的學(xué)士學(xué)位、樂理專業(yè)的碩士及準(zhǔn)博士學(xué)位（ABD PhD）。閑暇時(shí)，他喜歡即興演奏、編排音樂并譜曲。Dionysios Synodinos C4Media的研究平臺(tái)團(tuán)隊(duì)主管，同時(shí)還是一位自由顧問，關(guān)注互聯(lián)網(wǎng)富應(yīng)用程序、Web應(yīng)用程序安全性、移動(dòng)Web以及Web服務(wù)等。他還是InfoQ的HTML5及JavaScript方向的首席編輯，定期在網(wǎng)站上撰寫一些有關(guān)JVM平臺(tái)的文章。游走于服務(wù)器端編程與UI設(shè)計(jì)10余年，他參與過不同的軟件項(xiàng)目，并且參與編寫過多部技術(shù)書籍。Victor Sumner LookSmart公司的高級(jí)軟件工程師。作為一位自學(xué)的Web程序開發(fā)者，在一款Web程序的生命周期中，他要擔(dān)負(fù)很多角色，從數(shù)據(jù)庫管理員到Web設(shè)計(jì)師，所有的工作他都做過。他喜歡挑戰(zhàn)并解決棘手的問題。他有很多業(yè)余愛好，包括攝影、騎馬、玩電子游戲等。他和妻子Alicia一起住在加拿大的安大略省。

書籍目錄

第1章設(shè)計(jì)模式：簡化CSS使用 1.1設(shè)計(jì)模式——結(jié)構(gòu)化方法 1.2使用設(shè)計(jì)模式 1.3使用樣式表 1.4CSS語法 1.4.1CSS語法詳解 1.4.2在CSS中使用空白字符 1.4.3使用屬性值 1.5使用層疊順序 1.6簡化層疊順序 1.7CSS和HTML鏈接 1.8CSS常用屬性 1.9CSS屬性與值：常用 1.10CSS屬性與值：內(nèi)容 1.11CSS屬性與值：布局 1.12CSS屬性與值：專用 1.13選擇器 1.14媒體查詢 1.15靈活尺寸單位 1.16固定度量單位 1.1796dpi下度量單位的換算 1.1896dpi下的常用字號(hào) 1.19過渡、動(dòng)畫與2D變換 1.20修復(fù)CSS錯(cuò)誤 1.21樣式表的規(guī)范化 第2章HTML設(shè)計(jì)模式 2.1概述 2.2HTML結(jié)構(gòu) 2.3HTML結(jié)構(gòu)（續(xù)） 2.4XHTML 2.5DOCTYPE 2.6頁頭元素 2.7條件樣式表 2.8結(jié)構(gòu)塊元素 2.9終止塊元素 2.10多功能塊元素 2.11行內(nèi)元素 2.12類和ID屬性 2.13HTML空白字符 第3章CSS選擇器與繼承 3.1概述 3.2類型、類和ID選擇器 3.3位置選擇器和選擇器分組 3.4屬性選擇器 3.5偽元素選擇器 3.6偽類選擇器 3.7子類選擇器 3.8繼承 3.9可視化繼承 第4章框模型 4.1概述 4.2Display 4.3框模型 4.4行內(nèi)框 4.5行內(nèi)塊級(jí)框 4.6塊級(jí)框 4.7表格框 4.8絕對(duì)框 4.9浮動(dòng)框 第5章框模型的范圍 5.1概述 5.2寬度 5.3高度 5.4設(shè)定尺寸 5.5收縮適應(yīng) 5.6拉伸 第6章框模型屬性 6.1概述 6.2外邊距 6.3邊框 6.4內(nèi)邊距 6.5背景 6.6溢出 6.7可見性 6.8分頁符 第7章定位模型 7.1概述 7.2定位模型 7.3設(shè)定位置 7.4最近定位祖先元素 7.5堆疊上下文 7.6原子顯示 7.7靜態(tài)定位 7.8絕對(duì)定位 7.9固定定位 7.10相對(duì)定位 7.11浮動(dòng)定位與復(fù)位 7.12相對(duì)浮動(dòng)定位 第8章定位方式：縮進(jìn)、偏移與對(duì)齊 8.1概述 8.2縮進(jìn) 8.3靜態(tài)偏移 8.4靜態(tài)表格偏移與縮進(jìn) 8.5浮動(dòng)偏移 8.6絕對(duì)偏移與固定偏移 8.7相對(duì)偏移 8.8靜態(tài)行內(nèi)對(duì)齊 8.9靜態(tài)塊級(jí)對(duì)齊與偏移 8.10靜態(tài)表格對(duì)齊與偏移 8.11絕對(duì)對(duì)齊與偏移 8.12絕對(duì)居中對(duì)齊 8.13外部對(duì)齊 第9章高級(jí)定位 9.1概述 9.2左對(duì)齊 9.3左偏移 9.4右對(duì)齊 9.5右偏移 9.6居中對(duì)齊 9.7居中偏移 9.8上對(duì)齊 9.9上偏移 9.10下對(duì)齊 9.11下偏移 9.12垂直居中對(duì)齊 9.13垂直居中偏移 第10章設(shè)置文字樣式 10.1概述 10.2字體 10.3高亮顯示 10.4文字修飾 10.5文字陰影 10.6使用圖片替換文字 10.7使用Canvas和VML替換文字 10.8嵌入字體 10.9不可見文字 10.10僅供屏幕閱讀器讀取 第11章內(nèi)容間隔 11.1間隔 11.2塊級(jí)化 11.3不換行 11.4保留空格 11.5代碼 11.6填充內(nèi)容 11.7行內(nèi)分隔區(qū) 11.8行內(nèi)裝飾 11.9換行 11.10行內(nèi)水平線規(guī)則 第12章內(nèi)容對(duì)齊 12.1文字縮進(jìn) 12.2懸掛縮進(jìn) 12.3水平對(duì)齊內(nèi)容 12.4垂直對(duì)齊內(nèi)容 12.5垂直偏移內(nèi)容 12.6下標(biāo)與上標(biāo) 12.7嵌套對(duì)齊 12.8高級(jí)對(duì)齊示例 第13章塊級(jí)元素 13.1概述 13.2結(jié)構(gòu)含義 13.3可視化結(jié)構(gòu) 13.4節(jié) 13.5列表 13.6項(xiàng)目符號(hào)背景 13.7行內(nèi)化 13.8合并外邊距 13.9插入 13.10水平線規(guī)則 13.11塊級(jí)分隔區(qū) 13.12塊級(jí)間隔刪除器 13.13左旁注 13.14右旁注 第14章圖片 14.1概述 14.2圖片 14.3圖片地圖 14.4淡出 14.5半透明 14.6替換文字 14.7內(nèi)容覆蓋圖片 14.8內(nèi)容覆蓋背景圖片 14.9CSS精靈圖 14.10CSS精靈圖（續(xù)） 14.11基本陰影圖片 14.12陰影圖片 14.13陰影圖片（續(xù)） 14.14陰影圖片（再續(xù)） 14.15圓角 14.16圓角（續(xù)） 14.17圖片示例 第15章表格 15.1概述 15.2表格 15.3行組與列組 15.4表格選擇器 15.5拆分邊框 15.6合并邊框 15.7合并邊框樣式 15.8隱藏與刪除單元格 15.9刪除與隱藏行和列 15.10垂直對(duì)齊數(shù)據(jù) 15.11表格條紋 15.12表格化、行化和單元格化 15.13表格布局 第16章表格列布局 16.1表格布局模型 16.2使用列布局 16.3概述 16.4列寬 16.5收縮適應(yīng)列 16.6設(shè)定尺寸列 16.7按內(nèi)容比例劃分列 16.8按寬度比例劃分列 16.9按百分比比例劃分列 16.10按反比例劃分列 16.11最小等寬列 16.12等寬列 16.13小尺寸列 16.14彈性列 16.15混合列布局 第17章布局 17.1概述 17.2流動(dòng)布局概述 17.3由外而內(nèi)框 17.4浮動(dòng)節(jié) 17.5浮動(dòng)分隔區(qū) 17.6流動(dòng)布局 17.7兩側(cè)浮動(dòng) 17.8事件樣式 17.9卷起 17.10選項(xiàng)卡菜單 17.11選項(xiàng)卡 17.12飛出菜單 17.13按鈕 17.14布局鏈接 17.15多列布局 17.16模板布局 17.17布局示例 第18章首字下沉 18.1概述 18.2對(duì)齊首字下沉 18.3首字母下沉 18.4懸掛首字下沉 18.5嵌入式圖片下沉 18.6浮動(dòng)首字下沉 18.7浮動(dòng)圖片下沉 18.8旁注式首字下沉 18.9旁注式圖片下沉 第19章突出引用與普通引用 19.1概述 19.2左浮動(dòng)突出引用 19.3右浮動(dòng)突出引用 19.4居中突出引用 19.5左旁注突出引用 19.6右旁注突出引用 19.7塊級(jí)普通引用 19.8行內(nèi)塊級(jí)普通引用 19.9行內(nèi)普通引用 第20章警告框 20.1概述 20.2JavaScript警告框 20.3工具提示警告框 20.4彈出式警告框 20.5彈出式警告框（續(xù)） 20.6警告框 20.7行內(nèi)警告框 20.8懸掛式警告框 20.9圖片警告框 20.10插入警告框 20.11浮動(dòng)警告框 20.12左旁注警告框 20.13右旁注警告框 20.14表單驗(yàn)證

章節(jié)摘錄

版權(quán)頁：   插圖：   瀏覽器會(huì)根據(jù)表格類型與單元格設(shè)置的寬度類型選擇布局算法。換言之，如果單元格設(shè)置了auto、100px或20％等不同的值，其結(jié)果會(huì)有很大差別。這些寬度值不僅僅在數(shù)值上不相同，而且類型也不相同，它們分別是：自動(dòng)尺寸、固定尺寸或百分比。不同類型的寬度再組合不同的表格類型，會(huì)導(dǎo)致瀏覽器使用不同的列寬設(shè)置方法。 將width設(shè)置為auto，就得到自動(dòng)寬度。將width設(shè)置為具體寬量值（如像素或em），就得到固定寬度。將width設(shè)置為百分?jǐn)?shù)（如50％）就得到百分比寬度。 最后，瀏覽器會(huì)檢查各行中同一列的所有單元格所設(shè)置的width，以確定列寬與列寬類型。列寬設(shè)計(jì)模式將介紹瀏覽器如何調(diào)整同一列中不同的單元格寬度設(shè)置。此外，在不同列上設(shè)置不同類型的寬度，會(huì)使瀏覽器在同一個(gè)表格中使用多種布局算法。混合列布局設(shè)計(jì)模式將介紹瀏覽器如何組合不同的列布局方式。 即使瀏覽器會(huì)檢查非固定尺寸表格中所有單元格的寬度，我們實(shí)際卜也只需要設(shè)置第一行的單元格寬度。 下面的設(shè)計(jì)模式是通過組合4種表格類型和3種寬度類型而實(shí)現(xiàn)的。 16.2使用列布局 長期以來，設(shè)計(jì)者和開發(fā)者會(huì)使用多種強(qiáng)大的自動(dòng)列布局特性實(shí)現(xiàn)非表格式內(nèi)容的布局。事實(shí)上，這種廣泛應(yīng)用促使瀏覽器供應(yīng)商對(duì)這些功能的擴(kuò)展要遠(yuǎn)多于其他特性。此外，它也促使主流瀏覽器供應(yīng)商優(yōu)化和完善列布局功能。 雖然可以使用列布局方法設(shè)置非表格式數(shù)據(jù)的布局，但是我們并不推薦使用這種方法，因?yàn)檫@種方法會(huì)降低內(nèi)容的可訪問性。 本章主要介紹如何實(shí)現(xiàn)表格式數(shù)據(jù)的布局。表格式數(shù)據(jù)需要設(shè)置樣式和布局。這一章將通過實(shí)際例子介紹如何使用瀏覽器內(nèi)置的強(qiáng)大自動(dòng)算法實(shí)現(xiàn)自動(dòng)化列布局。 16.3概述 列寬（Column Width）介紹不同情況下瀏覽器計(jì)算列寬的方法，這些情況包括：各行同一列的單元格設(shè)置不同的寬度值、不同類型的寬度、不同的最小內(nèi)容寬度和不同的最大內(nèi)容寬度。這個(gè)模式適用于收縮適應(yīng)型、設(shè)定尺寸型和拉伸型表格。 收縮適應(yīng)列（Shrinkwrapped Columns）介紹如何實(shí)現(xiàn)收縮適應(yīng)列，使之適應(yīng)內(nèi)容寬度。這個(gè)模式適用于收縮適應(yīng)型表格。 設(shè)定尺寸列（Sized Columns）介紹如何設(shè)置固定列寬，同時(shí)將表格寬度限定在最大值或最小值范圍之內(nèi)。這個(gè)模式適用于收縮適應(yīng)型或固定尺寸型表格。

編輯推薦

本書布局很好。它將模式示例放在左頁，并將其解說放在右邊，因此模式很好查找。本書可幫讀者釋放在Web設(shè)計(jì)和開發(fā)中的生產(chǎn)力和創(chuàng)造力。讀者完全可以重用并組合其中模塊化的設(shè)計(jì)模式來實(shí)現(xiàn)成功的設(shè)計(jì)。其中每個(gè)模式都有直觀的名字，方便大家查找、記憶和參考。講訴Web開發(fā)最新規(guī)范。零基礎(chǔ)輕松掌握HTML5和CSS3

圖書封面

圖書標(biāo)簽Tags

無

評(píng)論、評(píng)分、閱讀與下載

---

    HTML5與CSS3設(shè)計(jì)模式 PDF格式下載

---