HTML5與CSS3設計模式
本文關鍵詞:HTML5與CSS3設計模式,由筆耕文化傳播整理發(fā)布。
內(nèi)容概要
《HTML5與CSS3設計模式》是一部全面講述用HTML5和CSS3設計網(wǎng)頁的教程。書中含350個即時可用的模式(HTML5和CSS3代碼片段),直接復制粘貼即可使用,更可以組合起來構(gòu)建出無窮的解決方案。每個模式都可在所有主流Web瀏覽器中可靠地運行!禜TML5與CSS3設計模式》系統(tǒng)地介紹了CSS3的每個可用特性,并結(jié)合了HTML5來創(chuàng)建可重用的模式。另外,《HTML5與CSS3設計模式》布局巧妙,各個模式的示例在左邊,說明在右邊,非常便于查找。 《HTML5與CSS3設計模式》適合具有HTML和CSS基礎的讀者學習參考。
作者簡介
Michael Bowers有22年編程生涯的老牌程序員。他從14歲那年就開始自學編程,并一直勤奮不輟,F(xiàn)在他的身份是首席工程師和企業(yè)信息技術架構(gòu)師。他曾在很多項目中擔當過程序員、架構(gòu)師以及數(shù)據(jù)建模師等角色,在開發(fā)網(wǎng)站、構(gòu)建應用程序架構(gòu)和數(shù)據(jù)庫系統(tǒng)方面有豐富的經(jīng)驗。除了開發(fā)過Web應用程序、集成企業(yè)信息系統(tǒng)、構(gòu)建工廠自動化方案之外,他還開發(fā)過編程語言、編譯器及解釋器,并且還管理過軟件團隊。他最喜歡的編程語言包括:CSS、HTML、XML、C#、C++、Visual Basic、Java、JavaScript、SQL及XQuery。另外,Michael在鋼琴上的造詣頗深。他擁有作曲專業(yè)的學士學位、樂理專業(yè)的碩士及準博士學位(ABD PhD)。閑暇時,,他喜歡即興演奏、編排音樂并譜曲。Dionysios Synodinos C4Media的研究平臺團隊主管,同時還是一位自由顧問,關注互聯(lián)網(wǎng)富應用程序、Web應用程序安全性、移動Web以及Web服務等。他還是InfoQ的HTML5及JavaScript方向的首席編輯,定期在網(wǎng)站上撰寫一些有關JVM平臺的文章。游走于服務器端編程與UI設計10余年,他參與過不同的軟件項目,并且參與編寫過多部技術書籍。Victor Sumner LookSmart公司的高級軟件工程師。作為一位自學的Web程序開發(fā)者,在一款Web程序的生命周期中,他要擔負很多角色,從數(shù)據(jù)庫管理員到Web設計師,所有的工作他都做過。他喜歡挑戰(zhàn)并解決棘手的問題。他有很多業(yè)余愛好,包括攝影、騎馬、玩電子游戲等。他和妻子Alicia一起住在加拿大的安大略省。
書籍目錄
第1章設計模式:簡化CSS使用 1.1設計模式——結(jié)構(gòu)化方法 1.2使用設計模式 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下的常用字號 1.19過渡、動畫與2D變換 1.20修復CSS錯誤 1.21樣式表的規(guī)范化 第2章HTML設計模式 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)塊級框 4.6塊級框 4.7表格框 4.8絕對框 4.9浮動框 第5章框模型的范圍 5.1概述 5.2寬度 5.3高度 5.4設定尺寸 5.5收縮適應 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設定位置 7.4最近定位祖先元素 7.5堆疊上下文 7.6原子顯示 7.7靜態(tài)定位 7.8絕對定位 7.9固定定位 7.10相對定位 7.11浮動定位與復位 7.12相對浮動定位 第8章定位方式:縮進、偏移與對齊 8.1概述 8.2縮進 8.3靜態(tài)偏移 8.4靜態(tài)表格偏移與縮進 8.5浮動偏移 8.6絕對偏移與固定偏移 8.7相對偏移 8.8靜態(tài)行內(nèi)對齊 8.9靜態(tài)塊級對齊與偏移 8.10靜態(tài)表格對齊與偏移 8.11絕對對齊與偏移 8.12絕對居中對齊 8.13外部對齊 第9章高級定位 9.1概述 9.2左對齊 9.3左偏移 9.4右對齊 9.5右偏移 9.6居中對齊 9.7居中偏移 9.8上對齊 9.9上偏移 9.10下對齊 9.11下偏移 9.12垂直居中對齊 9.13垂直居中偏移 第10章設置文字樣式 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塊級化 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)容對齊 12.1文字縮進 12.2懸掛縮進 12.3水平對齊內(nèi)容 12.4垂直對齊內(nèi)容 12.5垂直偏移內(nèi)容 12.6下標與上標 12.7嵌套對齊 12.8高級對齊示例 第13章塊級元素 13.1概述 13.2結(jié)構(gòu)含義 13.3可視化結(jié)構(gòu) 13.4節(jié) 13.5列表 13.6項目符號背景 13.7行內(nèi)化 13.8合并外邊距 13.9插入 13.10水平線規(guī)則 13.11塊級分隔區(qū) 13.12塊級間隔刪除器 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垂直對齊數(shù)據(jù) 15.11表格條紋 15.12表格化、行化和單元格化 15.13表格布局 第16章表格列布局 16.1表格布局模型 16.2使用列布局 16.3概述 16.4列寬 16.5收縮適應列 16.6設定尺寸列 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流動布局概述 17.3由外而內(nèi)框 17.4浮動節(jié) 17.5浮動分隔區(qū) 17.6流動布局 17.7兩側(cè)浮動 17.8事件樣式 17.9卷起 17.10選項卡菜單 17.11選項卡 17.12飛出菜單 17.13按鈕 17.14布局鏈接 17.15多列布局 17.16模板布局 17.17布局示例 第18章首字下沉 18.1概述 18.2對齊首字下沉 18.3首字母下沉 18.4懸掛首字下沉 18.5嵌入式圖片下沉 18.6浮動首字下沉 18.7浮動圖片下沉 18.8旁注式首字下沉 18.9旁注式圖片下沉 第19章突出引用與普通引用 19.1概述 19.2左浮動突出引用 19.3右浮動突出引用 19.4居中突出引用 19.5左旁注突出引用 19.6右旁注突出引用 19.7塊級普通引用 19.8行內(nèi)塊級普通引用 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浮動警告框 20.12左旁注警告框 20.13右旁注警告框 20.14表單驗證
章節(jié)摘錄
版權(quán)頁: 插圖: 瀏覽器會根據(jù)表格類型與單元格設置的寬度類型選擇布局算法。換言之,如果單元格設置了auto、100px或20%等不同的值,其結(jié)果會有很大差別。這些寬度值不僅僅在數(shù)值上不相同,而且類型也不相同,它們分別是:自動尺寸、固定尺寸或百分比。不同類型的寬度再組合不同的表格類型,會導致瀏覽器使用不同的列寬設置方法。 將width設置為auto,就得到自動寬度。將width設置為具體寬量值(如像素或em),就得到固定寬度。將width設置為百分數(shù)(如50%)就得到百分比寬度。 最后,瀏覽器會檢查各行中同一列的所有單元格所設置的width,以確定列寬與列寬類型。列寬設計模式將介紹瀏覽器如何調(diào)整同一列中不同的單元格寬度設置。此外,在不同列上設置不同類型的寬度,會使瀏覽器在同一個表格中使用多種布局算法;旌狭胁季衷O計模式將介紹瀏覽器如何組合不同的列布局方式。 即使瀏覽器會檢查非固定尺寸表格中所有單元格的寬度,我們實際卜也只需要設置第一行的單元格寬度。 下面的設計模式是通過組合4種表格類型和3種寬度類型而實現(xiàn)的。 16.2使用列布局 長期以來,設計者和開發(fā)者會使用多種強大的自動列布局特性實現(xiàn)非表格式內(nèi)容的布局。事實上,這種廣泛應用促使瀏覽器供應商對這些功能的擴展要遠多于其他特性。此外,它也促使主流瀏覽器供應商優(yōu)化和完善列布局功能。 雖然可以使用列布局方法設置非表格式數(shù)據(jù)的布局,但是我們并不推薦使用這種方法,因為這種方法會降低內(nèi)容的可訪問性。 本章主要介紹如何實現(xiàn)表格式數(shù)據(jù)的布局。表格式數(shù)據(jù)需要設置樣式和布局。這一章將通過實際例子介紹如何使用瀏覽器內(nèi)置的強大自動算法實現(xiàn)自動化列布局。 16.3概述 列寬(Column Width)介紹不同情況下瀏覽器計算列寬的方法,這些情況包括:各行同一列的單元格設置不同的寬度值、不同類型的寬度、不同的最小內(nèi)容寬度和不同的最大內(nèi)容寬度。這個模式適用于收縮適應型、設定尺寸型和拉伸型表格。 收縮適應列(Shrinkwrapped Columns)介紹如何實現(xiàn)收縮適應列,使之適應內(nèi)容寬度。這個模式適用于收縮適應型表格。 設定尺寸列(Sized Columns)介紹如何設置固定列寬,同時將表格寬度限定在最大值或最小值范圍之內(nèi)。這個模式適用于收縮適應型或固定尺寸型表格。
編輯推薦
本書布局很好。它將模式示例放在左頁,并將其解說放在右邊,因此模式很好查找。本書可幫讀者釋放在Web設計和開發(fā)中的生產(chǎn)力和創(chuàng)造力。讀者完全可以重用并組合其中模塊化的設計模式來實現(xiàn)成功的設計。其中每個模式都有直觀的名字,方便大家查找、記憶和參考。講訴Web開發(fā)最新規(guī)范。零基礎輕松掌握HTML5和CSS3
圖書封面
圖書標簽Tags
無
評論、評分、閱讀與下載
HTML5與CSS3設計模式 PDF格式下載
本文關鍵詞:HTML5與CSS3設計模式,由筆耕文化傳播整理發(fā)布。
本文編號:126129
本文鏈接:http://sikaile.net/wenshubaike/mishujinen/126129.html