滿額折
商品簡介
作者簡介
名人/編輯推薦
序
目次
商品簡介
CSS布局是目前最流行的網頁制作技術。本書通過實例講解了CSS各個屬性的使用方法和怎樣使用CSS進行頁面的制作。全書內容包括Web標準布局的本質、XHTML書寫規范、CSS基礎與書寫規范、網頁頭部元素的詳細定義、CSS基本布局屬性、CSS容器屬性、CSS定義文本屬性、元素的修飾和CSS常見應用、DIV+CSS布局基礎、關于整站樣式表的分析、關于標準的校驗以及各種制作實例等內容。
本書適合廣大Web網站設計人員、網站設計的初學者、網站管理維護人員、大專院校學生和社會培訓學生閱讀。
本書適合廣大Web網站設計人員、網站設計的初學者、網站管理維護人員、大專院校學生和社會培訓學生閱讀。
作者簡介
工程領域碩士，現就職于貴州航天職業技術學院，歷任電子工程系副主任、電子工程系主任、計算機科學系主任、教務處副處長。承擔了《軟件工程》、《計算機組成原理》、《網頁設計與制作》、《綜合課題設計》等課程的教學工作任務，在教學中大膽探索，體現了高水準，受到學生好評。主持國家網絡與信息安全技術實訓基地和遵義市高技能人才培訓基地的申報工作，主持兩門院級精品課程《Photoshop圖像處理》和《計算機網絡基礎》的建設。主持了新專業“計算機應用技術（多媒體方向）”的申報工作。發表學術論文5篇，編寫計算機教材7本、著作5本。
名人/編輯推薦
內容全面：本書包含DIV+CSS網頁設計中使用到的各種標簽
由淺入深：語法、應用、開發，逐步遞進，更符合學習規律
實例眾多：本書包含的實例以網絡各種應用平臺為例作出詳細分析
分析透徹：充分展現實現過程，并分析重點代碼，進行相應知識擴展
由淺入深：語法、應用、開發，逐步遞進，更符合學習規律
實例眾多：本書包含的實例以網絡各種應用平臺為例作出詳細分析
分析透徹：充分展現實現過程，并分析重點代碼，進行相應知識擴展
序
隨著Web技術的不斷發展，互聯網已經由被動接受型的Web 1.0向主動參與型的Web 2.0過渡了，越來越多的技術需要Web頁面具有清晰的語義、嚴格的結構，傳統的采用表格布局的頁面帶來的缺點表現得越來越明顯。隨著Web 2.0技術的逐漸成熟以及更多的基于XML技術的出現，使用CSS進行網頁布局的技術顯得越來越重要，這也是未來互聯網的發展趨勢。現在，已經有越來越多的新建網站使用了CSS布局的技術，同時也有很多的大型門戶網站采用CSS布局對原有網站進行了重構。
為了使廣大網頁設計師和即將參加到網頁制作這個行列的初學者們能夠更方便地掌握和使用CSS布局的技術，特編寫了本書，力求讓讀者在學完本書之后，能夠獨立使用CSS進行網頁的布局。
本書的特點
1．技術全面，內容充實
本書詳細講解了現在網頁布局中通常使用的CSS屬性。全書將所有屬性分成布局屬性、容器屬性、文本屬性和其他屬性等幾個部分，詳細講解了每個屬性取值的具體含義和應用。
2．注重實踐，聯系實際
由于CSS中屬性很多，取值復雜，很多讀者了解了某個CSS屬性的語法和取值后并不知道如何在制作頁面時靈活應用。本書通過示例對各個屬性的具體應用方法和需要注意的問題進行了詳細講解，通過本書的學習，讀者可以掌握各CSS屬性在頁面中的應用技巧和注意事項。
3．注重思想，把握本質
本書力求建立起網頁布局的新觀念，使讀者能夠了解CSS布局頁面的本質思想，而不是單純地進行技術層面的講解。本書編寫努力做到知其然，亦知其所以然，因為不從根本上建立起新的布局觀念，就不能在實際制作中更好地應用，也不能達到應用CSS布局的根本目的。
4．實例經典，舉一反三
Web頁面千變萬化，其布局和修飾方式千差萬別，因此不可能對每一個頁面的制作方法都一一進行介紹。本書將通過幾個具體的實例和一些單獨的示例，講解利用CSS進行頁面布局的技巧，力求在實例和示例的制作過程中讓讀者了解CSS布局的原理和CSS布局的核心內容，方便以后實際應用中制作各種布局的頁面。
5．圖文并茂，重點突出
本書對每個CSS屬性的應用效果都用圖片的方式展示出來，做到明確直觀。同時，對每個示例中需要特別注意和說明的地方都使用了單獨的格式，使讀者能夠快速地把握知識的重點。
6．與時俱進，注重知識的更新
當前互聯網的發展速度很快，瀏覽器也在不斷更新換代，而每次更新后的瀏覽器所支持的CSS屬性都會有所區別。為此，本書不但講述了當前廣泛使用的瀏覽器中CSS的使用效果，同時也介紹了最新發布的瀏覽器的特性，使讀者學到的知識具有更好的時效性。
本書的內容
第1章：主要講述了Web標準布局的本質——表現和結構相分離。本章是利用CSS布局頁面的思想基礎，很好地理解本章的內容，將有助于后面知識的學習。
第2章：詳細介紹了XHTML書寫規范。雖然本書主要講解關于CSS屬性和應用的知識，但是良好的XHTML結構是CSS控制頁面表現的橋梁，因此掌握XHTML書寫規范是應用CSS布局頁面時不可缺少的。
第3章：從宏觀上對CSS的各部分作了一個比較詳細的介紹，讓讀者能夠對CSS有一個整體的了解。同時還介紹了CSS語法結構等基礎知識。
第4章：主要講解了網頁頭部元素的詳細定義，包括制作網頁頭部時要注意的問題和各頭部標簽的詳細設置。
第5章：重點介紹了CSS基本布局屬性，包括怎樣使用浮動屬性和布局屬性更改元素的默認排列方式和進行布局的基礎知識。
第6章：主要講解了CSS容器屬性。介紹了關于容器屬性的詳細知識，同時講解了怎樣通過容器屬性進一步控制元素精確位置的知識。
第7章：主要介紹了CSS定義文本屬性。對使用CSS控制文本的顯示方式、鏈接的修飾以及內容的水平和垂直居中顯示等進行了詳細講解。
第8章：主要講解了怎樣對頁面中各種元素進行修飾，以及頁面中導航部分的詳細修飾方法。
第9章：主要講解了DIV+CSS布局基礎。在對CSS技術的基礎知識有了一定的掌握后即可開始學習DIV+CSS布局的方法。DIV+CSS的布局方法簡單來說就是使用div標簽作為容器、使用CSS技術來排布div標簽的布局方法。常用的CSS布局方式有浮動、定位等。本章是學習CSS技術最重要的一個部分，讀者應多實踐本章中的各個實例。
第10章：主要講解了關于整站樣式表的分析。介紹了怎樣規劃整站的CSS樣式表，并通過實例講解了頁面中二級頁面的制作。
第11章：主要介紹了關于標準的校驗問題，包括標準校驗的方法和標準校驗中會遇到的問題。
第12章：主要講解了DIV+CSS頁面布局設計。DIV頁面布局的優勢在于布局靈活，便于維護，代碼清晰，能加快網頁解析的速度，缺點是瀏覽器的兼容性問題，但這可通過CSS和JavaScript來解決。很多新手，甚至一些從事多年網頁制作工作的人都有一個誤區，認為有了DIV就可以丟棄表格。其實，我們要從數據本身去考慮，如果內容本身是表格形式的，那就不能為了用DIV而用。
第13章：介紹了新聞系統的頁面布局，分為首頁、欄目頁、列表頁和內容頁4個方面。
第14章：介紹了微博系統的頁面布局。微博是當前比較熱門的信息獲取方式，分析和設計微博頁面，可以讓讀者鍛煉一種能力，養成分析各種熱點網頁的習慣。
第15章：介紹了論壇系統的頁面布局。論壇系統也是一種長盛不衰的Web應用，其內容發布自有其獨到之處，本章分析論壇的布局方法和各種關鍵頁面的設計，讀者可從中體會設計較大型系統的方法。
第16章：介紹了商城系統的頁面布局。商城系統的頁面比較多而雜，算得上大型系統。作為系統本身來說，需要設計的內容并不是很多，主要是根據需要進行商品設計，本章主要學習商城系統首頁的設計。
適合的讀者
? 網頁表現層開發人員。
? Web 2.0開發人員。
? 網頁專業設計人員。
? 網頁維護人員。
? 網頁制作愛好者。
? 大中專院校的學生。
? 社會培訓學生。
本書作者
本書由邢太北和許瑞建編寫。其中，貴州航天職業技術學院的邢太北老師負責編寫第1～12章，許瑞建老師負責編寫第13～16章，同時參與編寫的工作人員還有宮磊、谷原野、黃其武、李延琨、林家昌、劉林建、孟富貴、孫雪明、王世平、文明、徐增年、銀森騎、張家磊、周偉杰、朱玲和張昆等，由于時間倉促，書中難免存在疏漏和不足之處，懇請廣大讀者批評指正。
為了使廣大網頁設計師和即將參加到網頁制作這個行列的初學者們能夠更方便地掌握和使用CSS布局的技術，特編寫了本書，力求讓讀者在學完本書之后，能夠獨立使用CSS進行網頁的布局。
本書的特點
1．技術全面，內容充實
本書詳細講解了現在網頁布局中通常使用的CSS屬性。全書將所有屬性分成布局屬性、容器屬性、文本屬性和其他屬性等幾個部分，詳細講解了每個屬性取值的具體含義和應用。
2．注重實踐，聯系實際
由于CSS中屬性很多，取值復雜，很多讀者了解了某個CSS屬性的語法和取值后并不知道如何在制作頁面時靈活應用。本書通過示例對各個屬性的具體應用方法和需要注意的問題進行了詳細講解，通過本書的學習，讀者可以掌握各CSS屬性在頁面中的應用技巧和注意事項。
3．注重思想，把握本質
本書力求建立起網頁布局的新觀念，使讀者能夠了解CSS布局頁面的本質思想，而不是單純地進行技術層面的講解。本書編寫努力做到知其然，亦知其所以然，因為不從根本上建立起新的布局觀念，就不能在實際制作中更好地應用，也不能達到應用CSS布局的根本目的。
4．實例經典，舉一反三
Web頁面千變萬化，其布局和修飾方式千差萬別，因此不可能對每一個頁面的制作方法都一一進行介紹。本書將通過幾個具體的實例和一些單獨的示例，講解利用CSS進行頁面布局的技巧，力求在實例和示例的制作過程中讓讀者了解CSS布局的原理和CSS布局的核心內容，方便以后實際應用中制作各種布局的頁面。
5．圖文并茂，重點突出
本書對每個CSS屬性的應用效果都用圖片的方式展示出來，做到明確直觀。同時，對每個示例中需要特別注意和說明的地方都使用了單獨的格式，使讀者能夠快速地把握知識的重點。
6．與時俱進，注重知識的更新
當前互聯網的發展速度很快，瀏覽器也在不斷更新換代，而每次更新后的瀏覽器所支持的CSS屬性都會有所區別。為此，本書不但講述了當前廣泛使用的瀏覽器中CSS的使用效果，同時也介紹了最新發布的瀏覽器的特性，使讀者學到的知識具有更好的時效性。
本書的內容
第1章：主要講述了Web標準布局的本質——表現和結構相分離。本章是利用CSS布局頁面的思想基礎，很好地理解本章的內容，將有助于后面知識的學習。
第2章：詳細介紹了XHTML書寫規范。雖然本書主要講解關于CSS屬性和應用的知識，但是良好的XHTML結構是CSS控制頁面表現的橋梁，因此掌握XHTML書寫規范是應用CSS布局頁面時不可缺少的。
第3章：從宏觀上對CSS的各部分作了一個比較詳細的介紹，讓讀者能夠對CSS有一個整體的了解。同時還介紹了CSS語法結構等基礎知識。
第4章：主要講解了網頁頭部元素的詳細定義，包括制作網頁頭部時要注意的問題和各頭部標簽的詳細設置。
第5章：重點介紹了CSS基本布局屬性，包括怎樣使用浮動屬性和布局屬性更改元素的默認排列方式和進行布局的基礎知識。
第6章：主要講解了CSS容器屬性。介紹了關于容器屬性的詳細知識，同時講解了怎樣通過容器屬性進一步控制元素精確位置的知識。
第7章：主要介紹了CSS定義文本屬性。對使用CSS控制文本的顯示方式、鏈接的修飾以及內容的水平和垂直居中顯示等進行了詳細講解。
第8章：主要講解了怎樣對頁面中各種元素進行修飾，以及頁面中導航部分的詳細修飾方法。
第9章：主要講解了DIV+CSS布局基礎。在對CSS技術的基礎知識有了一定的掌握后即可開始學習DIV+CSS布局的方法。DIV+CSS的布局方法簡單來說就是使用div標簽作為容器、使用CSS技術來排布div標簽的布局方法。常用的CSS布局方式有浮動、定位等。本章是學習CSS技術最重要的一個部分，讀者應多實踐本章中的各個實例。
第10章：主要講解了關于整站樣式表的分析。介紹了怎樣規劃整站的CSS樣式表，并通過實例講解了頁面中二級頁面的制作。
第11章：主要介紹了關于標準的校驗問題，包括標準校驗的方法和標準校驗中會遇到的問題。
第12章：主要講解了DIV+CSS頁面布局設計。DIV頁面布局的優勢在于布局靈活，便于維護，代碼清晰，能加快網頁解析的速度，缺點是瀏覽器的兼容性問題，但這可通過CSS和JavaScript來解決。很多新手，甚至一些從事多年網頁制作工作的人都有一個誤區，認為有了DIV就可以丟棄表格。其實，我們要從數據本身去考慮，如果內容本身是表格形式的，那就不能為了用DIV而用。
第13章：介紹了新聞系統的頁面布局，分為首頁、欄目頁、列表頁和內容頁4個方面。
第14章：介紹了微博系統的頁面布局。微博是當前比較熱門的信息獲取方式，分析和設計微博頁面，可以讓讀者鍛煉一種能力，養成分析各種熱點網頁的習慣。
第15章：介紹了論壇系統的頁面布局。論壇系統也是一種長盛不衰的Web應用，其內容發布自有其獨到之處，本章分析論壇的布局方法和各種關鍵頁面的設計，讀者可從中體會設計較大型系統的方法。
第16章：介紹了商城系統的頁面布局。商城系統的頁面比較多而雜，算得上大型系統。作為系統本身來說，需要設計的內容并不是很多，主要是根據需要進行商品設計，本章主要學習商城系統首頁的設計。
適合的讀者
? 網頁表現層開發人員。
? Web 2.0開發人員。
? 網頁專業設計人員。
? 網頁維護人員。
? 網頁制作愛好者。
? 大中專院校的學生。
? 社會培訓學生。
本書作者
本書由邢太北和許瑞建編寫。其中，貴州航天職業技術學院的邢太北老師負責編寫第1～12章，許瑞建老師負責編寫第13～16章，同時參與編寫的工作人員還有宮磊、谷原野、黃其武、李延琨、林家昌、劉林建、孟富貴、孫雪明、王世平、文明、徐增年、銀森騎、張家磊、周偉杰、朱玲和張昆等，由于時間倉促，書中難免存在疏漏和不足之處，懇請廣大讀者批評指正。
目次
第1篇 CSS布局基礎知識
第1章 Web標準布局的本質 2
1.1 為什么要建立Web標準 2
1.1.1 建立Web標準的目的 2
1.1.2 使用Web標準的好處 2
1.2 什么是Web標準 3
1.3 結構和表現 3
1.4 兩種思考方式 5
1.5 Web標準的前景 7
1.6 Web標準網站欣賞 7
第2章 XHTML書寫規范 10
2.1 為什么要使用XHTML 10
2.2 什么是XHTML 10
2.3 XHTML語法基礎 12
2.3.1 XHTML頁面結構 12
2.3.2 元素的書寫格式和屬性 13
2.3.3 各種元素的屬性 14
2.4 XHTML代碼規范 18
第3章 CSS基礎與書寫規范 20
3.1 CSS的基礎知識 20
3.1.1 什么是CSS 20
3.1.2 CSS的語法 21
3.1.3 選擇符 22
3.1.4 屬性 23
3.1.5 偽類和偽元素 23
3.1.6 顏色單位 24
3.1.7 長度單位 24
3.1.8 百分比值 25
3.1.9 URL 26
3.1.10 默認值 26
3.1.11 繼承性 26
3.2 CSS編碼規范 27
3.2.1 CSS基本書寫規范 27
3.2.2 CSS命名參考 28
3.2.3 CSS樣式表書寫順序 29
3.3 怎樣更好地應用CSS 29
3.3.1 塊元素和內聯元素 29
3.3.2 CSS的一些實用技巧 30
3.3.3 怎樣調試CSS 30
3.4 關于CSS的學習 33
第2篇 CSS頁面布局技巧
第4章 網頁頭部元素的詳細定義 36
4.1 DOCTYPE的選擇 36
4.1.1 什么是DOCTYPE 36
4.1.2 選擇什么樣的DOCTYPE 36
4.2 名字空間 37
4.3 編碼問題 37
4.4 meta標簽 38
4.5 CSS的調用 39
4.5.1 調用樣式表的幾種方法 39
4.5.2 應用樣式的優先級 41
4.6 網頁頭部實例 45
第5章 CSS基本布局屬性 47
5.1 頁面的制作流程和整體分析 47
5.2 元素定位基礎知識 48
5.2.1 塊元素的默認排列 48
5.2.2 內聯元素的默認排列 49
5.2.3 塊元素和內聯元素的混合默認排列 49
5.2.4 使用浮動屬性進行定位 50
5.3 定位屬性詳解 51
5.3.1 定位模式 51
5.3.2 邊偏移 51
5.3.3 層疊定位屬性 51
5.4 定位屬性的應用 52
5.4.1 絕對定位 52
5.4.2 相對定位 54
5.4.3 固定定位 55
5.4.4 層疊定位屬性的使用 55
5.5 頁面背景的設定 57
5.5.1 使用背景色定義背景 57
5.5.2 背景圖片的默認使用 57
5.5.3 背景圖片的重復 58
5.5.4 背景圖片的位置 59
5.5.5 背景圖片的附件 61
5.6 背景的綜合應用 62
5.6.1 背景顏色和背景圖片的層疊 62
5.6.2 背景圖片的重復和位置的關系 63
5.6.3 背景屬性在內聯元素中的使用 64
5.6.4 背景屬性的縮寫 64
5.6.5 頁面文本的樣式 65
5.6.6 鏈接的樣式 66
5.7 布局的基礎知識 67
5.7.1 頁面布局的步驟 67
5.7.2 使用id還是class 67
5.7.3 控制內容顯示的display屬性 68
5.7.4 控制內容顯示的visibility屬性 69
5.7.5 使用text-align屬性的水平居中 70
5.7.6 使用margin屬性的水平居中 71
5.8 浮動屬性 72
5.8.1 浮動屬性詳解 72
5.8.2 相鄰的浮動元素和固定元素 72
5.8.3 相鄰的兩個浮動元素 74
5.8.4 相鄰的多個浮動元素 75
5.9 關于ul和li的樣式詳解 75
5.9.1 使用list-style-type屬性 76
5.9.2 使用list-style-position屬性 76
5.9.3 使用list-style-image屬性 77
5.9.4 使用list-style屬性 78
5.10 一個縱向導航菜單的制作 78
5.10.1 菜單原理 78
5.10.2 制作菜單內容和結構部分 79
5.10.3 CSS代碼編寫 79
5.11 一個橫向導航菜單的制作 83
5.11.1 菜單原理 83
5.11.2 制作菜單內容和結構部分 83
5.11.3 CSS代碼編寫 84
5.12 清除浮動 87
5.12.1 清除浮動屬性詳解 87
5.12.2 清除浮動屬性的使用 88
5.13 頁面header部分的制作 90
5.13.1 效果圖分析（1） 90
5.13.2 第一次切圖 90
5.13.3 第二次切圖 91
5.13.4 制作前的準備工作 92
5.13.5 效果圖分析（2） 93
5.13.6 頁面結構的制作 93
5.13.7 基礎樣式的定義 94
5.13.8 banner部分樣式的定義 95
5.13.9 menu部分樣式的定義 96
5.13.10 頁面全部的CSS代碼 97
第6章 CSS容器屬性 99
6.1 什么是盒模型 99
6.1.1 內容與盒模型 99
6.1.2 背景與盒模型 100
6.2 補白屬性 100
6.2.1 補白屬性詳解 101
6.2.2 百分比值的使用 102
6.2.3 單側的補白屬性 103
6.2.4 補白屬性的簡寫 104
6.3 邊框屬性 106
6.3.1 邊框樣式 106
6.3.2 邊框寬度 107
6.3.3 邊框顏色 108
6.3.4 邊框的綜合定義 110
6.3.5 單側邊框的綜合定義 111
6.3.6 一個有用的表格邊框屬性 112
6.3.7 應用邊框屬性的實例 112
6.4 邊界屬性 113
6.4.1 整體邊界屬性 114
6.4.2 單側的邊界和簡寫 115
6.4.3 垂直方向的邊界重疊 116
6.4.4 水平方向的邊界 116
6.4.5 負的邊界值 117
6.4.6 在內聯元素中使用邊界屬性 118
6.5 父元素與子元素之間的距離 119
6.5.1 子元素邊界屬性值為0 119
6.5.2 父元素的補白屬性為0 120
6.5.3 父元素含有padding屬性同時子元素
含有margin屬性 121
6.6 嵌套的元素中使用負邊界 122
6.7 固定大小的問題 123
6.7.1 盒模型大小的計算 123
6.7.2 使用overflow屬性固定長度和寬度 124
6.8 自適應問題 125
6.8.1 什么叫自適應 125
6.8.2 獨立元素的高度自適應 125
6.8.3 利用背景色的兩列自適應 127
6.8.4 左右均能自適應的兩列布局 129
6.8.5 三列布局中有兩列內容固定 131
6.8.6 三列布局中有一列內容固定 133
6.8.7 三列布局中高度都不確定的情況 136
6.8.8 水平自適應的原理 138
6.9 制作一個簡單的頁面框架 140
6.9.1 框架結構分析 140
6.9.2 頁面結構的制作 141
6.9.3 定義CSS代碼 141
6.9.4 頁面最終效果及注意的問題 145
6.10 header部分的進一步完善 146
6.10.1 標題及簽名部分的完善 146
6.10.2 導航部分的完善 147
6.10.3 調整后的頁面效果 149
6.11 頁面主體結構的制作 149
6.11.1 效果圖分析 149
6.11.2 主體大表格和內容部分 150
6.11.3 右側分類導航部分 152
6.12 頁面主體部分CSS的編寫 154
6.12.1 3個主要結構的樣式 154
6.12.2 內容部分的樣式 155
6.12.3 導航列表部分的CSS編寫 157
6.12.4 主體部分最后的顯示效果和CSS代碼 160
第7章 CSS定義文本屬性 163
7.1 文本的縮進和對齊 163
7.1.1 段首縮進 163
7.1.2 段首字符的下沉與大寫 164
7.1.3 文本的對齊 165
7.1.4 圖文混排 166
7.2 行高與間隔 167
7.2.1 行高屬性詳解 167
7.2.2 利用行高屬性使文本垂直居中 170
7.2.3 間隔與空白 171
7.2.4 文本的轉換 173
7.3 水平和垂直居中問題 174
7.3.1 已知容器大小和內容大小時的水平和
垂直居中問題 174
7.3.2 未知容器大小、已知內容大小時的水平和
垂直居中問題 175
7.3.3 已知容器大小、未知內容大小時的水平和
垂直居中問題 176
7.3.4 容器大小及內容大小均未知時的水平和
垂直居中問題 178
7.3.5 修飾圖片的水平和垂直居中問題 180
7.4 字體的綜合屬性 180
7.4.1 字體的選擇 180
7.4.2 字體的大小 181
7.4.3 字體的加粗 183
7.4.4 字體的樣式 184
7.4.5 字體的變形 185
7.4.6 字體屬性的簡寫 185
7.5 文本的修飾和鏈接 186
7.5.1 文本的修飾 187
7.5.2 鏈接屬性詳解 188
7.5.3 使用鏈接的順序 190
7.5.4 鏈接的繼承性 191
7.5.5 cursor屬性 192
7.6 完成頁面header部分的制作 193
7.6.1 標題和簽名部分 193
7.6.2 menu導航部分 194
7.7 main部分的完善 197
7.7.1 內容部分的完善 197
7.7.2 分類導航部分的完善 198
7.8 footer部分的制作 202
7.8.1 效果圖分析 202
7.8.2 結構部分的制作 202
7.8.3 頁面樣式的添加 202
7.9 頁面在IE瀏覽器中的顯示效果 205
第8章 元素的修飾和CSS常見應用 206
8.1 圖片的修飾 206
8.1.1 網頁中常用的圖片格式 206
8.1.2 需要使用圖片的情況 207
8.1.3 作為背景的圖片修飾 207
8.1.4 修飾內容圖片 207
8.2 使用圖片制作簡單圓角框 209
8.2.1 單色或者單線圓角框自適應高度 209
8.2.2 單色或者單線圓角框自適應寬度 211
8.2.3 單色或者單線圓角框完全自適應 212
8.3 復雜圓角框的制作 214
8.3.1 自適應高度 215
8.3.2 自適應寬度 216
8.3.3 完全自適應 216
8.4 用CSS制作代替圖片的圓角 219
8.4.1 CSS圓角實現原理 219
8.4.2 CSS圓角的制作 220
8.5 表單的修飾 223
8.5.1 表單的分類 223
8.5.2 文本域的修飾 224
8.5.3 文本區域的修飾 225
8.5.4 按鈕的修飾 226
8.5.5 復選框的修飾 226
8.5.6 單選按鈕的修飾 226
8.5.7 列表的修飾 227
8.5.8 文件域的修飾 227
8.5.9 圖像域的修飾 228
8.6 登錄框的制作 228
8.6.1 效果圖分析 228
8.6.2 頁面結構部分制作 229
8.6.3 CSS部分的編寫 229
8.7 滾動條的修飾 232
8.7.1 滾動條的顯示 232
8.7.2 滾動條的修飾 234
8.8 表格的修飾 235
8.8.1 控制表格的邊線和背景 235
8.8.2 表格的高度和寬度 236
8.8.3 表格的居中問題 236
8.8.4 表格的內容與高度 237
8.9 分隔線的修飾 238
8.10 關于導航欄的制作和修飾 239
8.10.1 縱向導航欄的修飾 240
8.10.2 制作鏈接樣式 241
8.10.3 制作鼠標懸停效果 241
8.10.4 橫向導航欄 244
8.11 下拉菜單的制作 244
8.11.1 下拉菜單的顯示效果 244
8.11.2 菜單的原理 245
8.11.3 制作菜單結構部分 245
8.11.4 編寫主導航部分的樣式 246
8.11.5 編寫子欄目的樣式 247
8.11.6 隱藏子欄目 247
8.11.7 制作顯示效果的樣式 248
8.11.8 使用的腳本代碼 248
8.12 遮蓋的問題 249
第3篇 整站的CSS定義技巧
第9章 DIV+CSS布局基礎 252
9.1 初識DIV+CSS布局的流程 252
9.2 了解盒模型 254
9.2.1 div標簽的盒模型示例 254
9.2.2 基本盒模型 258
9.2.3 邊距 258
9.2.4 補白 262
9.2.5 邊框 264
9.3 頁面元素的布局 268
9.3.1 塊級元素與行內元素 268
9.3.2 CSS布局方式：常規流 270
第10章 關于整站樣式表的分析 272
10.1 站點頁面的分析 272
10.1.1 規劃樣式表的原則 272
10.1.2 規劃樣式表的方法 272
10.1.3 實例的分析 273
10.2 站點二級頁面的制作 274
10.2.1 日志內容頁面結構的規劃 274
10.2.2 日志內容頁面CSS部分的制作 275
10.2.3 日志列表頁的制作 278
第11章 關于標準的校驗 281
11.1 為什么要進行標準的校驗 281
11.2 怎樣進行標準的校驗 281
11.2.1 XHTML校驗的方法 281
11.2.2 CSS校驗的方法 284
11.2.3 XHTML校驗常見錯誤 285
11.2.4 CSS校驗常見錯誤 285
11.3 實例頁面的校驗 285
11.3.1 實例首頁的校驗 286
11.3.2 一個二級頁面的校驗 287
第4篇 DIV+CSS布局實例
第12章 DIV+CSS頁面布局設計 290
12.1 頁面布局的準備 290
12.1.1 效果圖的制作 290
12.1.2 框架的規劃 291
12.1.3 布局圖片的分離與制作 295
12.2 頁面的制作 296
12.2.1 框架代碼的編寫 296
12.2.2 內容代碼的編寫 298
12.2.3 CSS代碼的編寫 299
第13章 新聞系統的頁面布局 304
13.1 新聞系統的頁面分析 304
13.2 新聞系統首頁的設計 304
13.2.1 效果圖的設計 304
13.2.2 框架的規劃 305
13.2.3 布局圖片的分離與制作 308
13.2.4 框架代碼的編寫 309
13.2.5 內容代碼的編寫 310
13.2.6 CSS代碼的編寫 311
13.2.7 預覽效果及微調 315
13.3 新聞系統欄目頁面的設計 315
13.3.1 效果圖的設計 315
13.3.2 框架的規劃 315
13.3.3 布局圖片的分離與制作 320
13.3.4 框架代碼的編寫 320
13.3.5 內容代碼的編寫 322
13.3.6 CSS代碼的編寫 323
13.3.7 預覽效果及微調 323
13.4 新聞系統列表頁的設計 324
13.4.1 效果圖的設計 324
13.4.2 框架的規劃 325
13.4.3 布局圖片的分離與制作 325
13.4.4 框架代碼的編寫 326
13.4.5 內容代碼的編寫 326
13.4.6 CSS代碼的編寫 327
13.4.7 預覽效果及微調 327
13.5 新聞系統內容頁的設計 327
13.5.1 效果圖的設計 327
13.5.2 框架的規劃 327
13.5.3 布局圖片的分離與制作 329
13.5.4 框架代碼的編寫 329
13.5.5 內容代碼的編寫 330
13.5.6 CSS代碼的編寫 330
13.5.7 預覽效果及微調 330
第14章 微博系統的頁面布局 331
14.1 微博系統的頁面分析 331
14.2 微博系統個人首頁的設計 331
14.2.1 效果圖的設計 331
14.2.2 框架的規劃 332
14.2.3 布局圖片的分離與制作 335
14.2.4 框架代碼的編寫 336
14.2.5 內容代碼的編寫 339
14.2.6 CSS代碼的編寫 340
14.2.7 預覽效果及微調 342
14.3 微博系統相冊列表頁的設計 343
14.3.1 效果圖的設計 343
14.3.2 框架的規劃 344
14.3.3 布局圖片的分離與制作 344
14.3.4 框架代碼的編寫 344
14.3.5 CSS代碼的編寫 345
14.3.6 預覽效果及微調 346
14.4 微博系統相冊幻燈頁的設計 346
14.4.1 效果圖的設計 346
14.4.2 源代碼分析 346
14.4.3 布局圖片的分離與制作 348
14.5 微博系統日志詳情頁的設計 349
14.5.1 效果圖的設計 349
14.5.2 框架的規劃 349
14.5.3 框架代碼的編寫 351
14.5.4 CSS代碼的編寫 352
14.5.5 預覽效果及微調 353
14.6 微博系統微頻道（廣場）的設計 353
14.6.1 效果圖的設計 353
14.6.2 框架的規劃 353
14.6.3 框架代碼的編寫 354
14.6.4 內容代碼的編寫 356
14.6.5 CSS代碼的編寫 356
14.6.6 預覽效果及微調 358
第15章 論壇系統的頁面布局 359
15.1 論壇系統的頁面分析 359
15.2 論壇系統首頁的設計 359
15.2.1 效果圖的設計 359
15.2.2 框架的規劃 359
15.2.3 布局圖片的分離與制作 363
15.2.4 框架代碼的編寫 363
15.2.5 內容代碼的編寫 365
15.2.6 CSS代碼的編寫 366
15.2.7 預覽效果及微調 369
15.3 論壇系統欄目頁的設計 369
15.3.1 效果圖的設計 369
15.3.2 框架的規劃 369
15.3.3 布局圖片的分離與制作 371
15.3.4 框架代碼的編寫 371
15.3.5 內容代碼的編寫 372
15.3.6 CSS代碼的編寫 373
15.3.7 預覽效果及微調 374
15.4 論壇系統版塊頁的設計 374
15.4.1 效果圖的設計 374
15.4.2 框架的規劃 375
15.4.3 布局圖片的分離與制作 377
15.4.4 框架代碼的編寫 377
15.4.5 內容代碼的編寫 379
15.4.6 CSS代碼的編寫 380
15.4.7 預覽效果及微調 381
15.5 論壇系統內容頁的設計 381
15.5.1 效果圖的設計 381
15.5.2 框架的規劃 383
15.5.3 布局圖片的分離與制作 384
15.5.4 框架代碼的編寫 384
15.5.5 內容代碼的編寫 386
15.5.6 CSS代碼的編寫 387
15.5.7 預覽效果及微調 388
第16章 商城系統的頁面布局 389
16.1 商城系統的頁面分析 389
16.2 商城系統首頁的設計 389
16.2.1 效果圖的設計 389
16.2.2 框架的規劃 389
16.2.3 布局圖片的分離與制作 398
16.2.4 框架代碼的編寫 399
16.2.5 內容代碼的編寫 405
16.2.6 CSS代碼的編寫 408
16.2.7 預覽效果及微調 411
附錄A CSS標記速查 412
A.1 字體屬性 412
A.1.1 設置字體--font-family 412
A.1.2 設置字號--font-size 412
A.1.3 字體風格--font-style 412
A.1.4 設置加粗字體--font-weight 413
A.1.5 小型的大寫字母--font-variant 413
A.1.6 復合屬性：字體--font 413
A.2 顏色及背景屬性 413
A.2.1 顏色屬性設置--color 413
A.2.2 背景顏色--background-color 414
A.2.3 背景圖像--background-image 414
A.2.4 背景重復--background-repeat 415
A.2.5 背景附件--background-attachment 415
A.2.6 背景位置--background-position 415
A.2.7 復合屬性：背景--background 415
A.3 文本屬性 416
A.3.1 單詞間隔--word-spacing 416
A.3.2 字符間隔--letter-spacing 416
A.3.3 文字修飾--text-decoration 416
A.3.4 縱向排列--vertical-align 416
A.3.5 文本轉換--text-transform 417
A.3.6 文本排列--text-align 417
A.3.7 文本縮進--text-indent 417
A.3.8 文本行高--line-height 417
A.3.9 處理空白--white-space 417
A.3.10 文本反排--unicode-bidi與
direction 418
A.4 邊距與填充屬性 418
A.4.1 頂端邊距--margin-top 418
A.4.2 其他邊距--margin-bottom、margin-left、
margin-right 419
A.4.3 復合屬性：邊距--margin 419
A.4.4 頂端填充--padding-top 419
A.4.5 其他填充--padding-bottom、padding-left、
padding-right 419
A.4.6 復合屬性：填充--padding 419
A.5 邊框屬性 419
A.5.1 邊框樣式--border-style 420
A.5.2 邊框寬度--border-width 421
A.5.3 邊框顏色--border-color 421
A.5.4 邊框屬性--border 421
A.6 定位及尺寸屬性 422
A.6.1 定位方式--position 422
A.6.2 元素位置--top、right、bottom、left 422
A.6.3 層疊順序--z-index 423
A.6.4 浮動屬性--float 423
A.6.5 清除屬性--clear 423
A.6.6 可視區域--clip 423
A.6.7 設定大小--width、height 423
A.6.8 超出范圍--overflow 424
A.6.9 可見屬性--visibility 424
A.7 列表屬性 424
A.7.1 列表符號--list-style-type 424
A.7.2 圖像符號--list-style-image 425
A.7.3 列表縮進--list-style-position 425
A.7.4 復合屬性：列表--list-style 425
A.8 光標屬性--cursor 425
A.9 濾鏡屬性 426
A.9.1 不透明度--alpha 426
A.9.2 動感模糊--blur 426
A.9.3 對顏色進行透明處理--chroma 427
A.9.4 設置陰影--dropShadow 427
A.9.5 對象的翻轉--flipH、flipV 427
A.9.6 發光效果--glow 427
A.9.7 灰度處理--gray 427
A.9.8 反相--invert 428
A.9.9 X光片效果--Xray 428
A.9.10 遮罩效果--mask 428
A.9.11 波形濾鏡--wave 428
第1章 Web標準布局的本質 2
1.1 為什么要建立Web標準 2
1.1.1 建立Web標準的目的 2
1.1.2 使用Web標準的好處 2
1.2 什么是Web標準 3
1.3 結構和表現 3
1.4 兩種思考方式 5
1.5 Web標準的前景 7
1.6 Web標準網站欣賞 7
第2章 XHTML書寫規范 10
2.1 為什么要使用XHTML 10
2.2 什么是XHTML 10
2.3 XHTML語法基礎 12
2.3.1 XHTML頁面結構 12
2.3.2 元素的書寫格式和屬性 13
2.3.3 各種元素的屬性 14
2.4 XHTML代碼規范 18
第3章 CSS基礎與書寫規范 20
3.1 CSS的基礎知識 20
3.1.1 什么是CSS 20
3.1.2 CSS的語法 21
3.1.3 選擇符 22
3.1.4 屬性 23
3.1.5 偽類和偽元素 23
3.1.6 顏色單位 24
3.1.7 長度單位 24
3.1.8 百分比值 25
3.1.9 URL 26
3.1.10 默認值 26
3.1.11 繼承性 26
3.2 CSS編碼規范 27
3.2.1 CSS基本書寫規范 27
3.2.2 CSS命名參考 28
3.2.3 CSS樣式表書寫順序 29
3.3 怎樣更好地應用CSS 29
3.3.1 塊元素和內聯元素 29
3.3.2 CSS的一些實用技巧 30
3.3.3 怎樣調試CSS 30
3.4 關于CSS的學習 33
第2篇 CSS頁面布局技巧
第4章 網頁頭部元素的詳細定義 36
4.1 DOCTYPE的選擇 36
4.1.1 什么是DOCTYPE 36
4.1.2 選擇什么樣的DOCTYPE 36
4.2 名字空間 37
4.3 編碼問題 37
4.4 meta標簽 38
4.5 CSS的調用 39
4.5.1 調用樣式表的幾種方法 39
4.5.2 應用樣式的優先級 41
4.6 網頁頭部實例 45
第5章 CSS基本布局屬性 47
5.1 頁面的制作流程和整體分析 47
5.2 元素定位基礎知識 48
5.2.1 塊元素的默認排列 48
5.2.2 內聯元素的默認排列 49
5.2.3 塊元素和內聯元素的混合默認排列 49
5.2.4 使用浮動屬性進行定位 50
5.3 定位屬性詳解 51
5.3.1 定位模式 51
5.3.2 邊偏移 51
5.3.3 層疊定位屬性 51
5.4 定位屬性的應用 52
5.4.1 絕對定位 52
5.4.2 相對定位 54
5.4.3 固定定位 55
5.4.4 層疊定位屬性的使用 55
5.5 頁面背景的設定 57
5.5.1 使用背景色定義背景 57
5.5.2 背景圖片的默認使用 57
5.5.3 背景圖片的重復 58
5.5.4 背景圖片的位置 59
5.5.5 背景圖片的附件 61
5.6 背景的綜合應用 62
5.6.1 背景顏色和背景圖片的層疊 62
5.6.2 背景圖片的重復和位置的關系 63
5.6.3 背景屬性在內聯元素中的使用 64
5.6.4 背景屬性的縮寫 64
5.6.5 頁面文本的樣式 65
5.6.6 鏈接的樣式 66
5.7 布局的基礎知識 67
5.7.1 頁面布局的步驟 67
5.7.2 使用id還是class 67
5.7.3 控制內容顯示的display屬性 68
5.7.4 控制內容顯示的visibility屬性 69
5.7.5 使用text-align屬性的水平居中 70
5.7.6 使用margin屬性的水平居中 71
5.8 浮動屬性 72
5.8.1 浮動屬性詳解 72
5.8.2 相鄰的浮動元素和固定元素 72
5.8.3 相鄰的兩個浮動元素 74
5.8.4 相鄰的多個浮動元素 75
5.9 關于ul和li的樣式詳解 75
5.9.1 使用list-style-type屬性 76
5.9.2 使用list-style-position屬性 76
5.9.3 使用list-style-image屬性 77
5.9.4 使用list-style屬性 78
5.10 一個縱向導航菜單的制作 78
5.10.1 菜單原理 78
5.10.2 制作菜單內容和結構部分 79
5.10.3 CSS代碼編寫 79
5.11 一個橫向導航菜單的制作 83
5.11.1 菜單原理 83
5.11.2 制作菜單內容和結構部分 83
5.11.3 CSS代碼編寫 84
5.12 清除浮動 87
5.12.1 清除浮動屬性詳解 87
5.12.2 清除浮動屬性的使用 88
5.13 頁面header部分的制作 90
5.13.1 效果圖分析（1） 90
5.13.2 第一次切圖 90
5.13.3 第二次切圖 91
5.13.4 制作前的準備工作 92
5.13.5 效果圖分析（2） 93
5.13.6 頁面結構的制作 93
5.13.7 基礎樣式的定義 94
5.13.8 banner部分樣式的定義 95
5.13.9 menu部分樣式的定義 96
5.13.10 頁面全部的CSS代碼 97
第6章 CSS容器屬性 99
6.1 什么是盒模型 99
6.1.1 內容與盒模型 99
6.1.2 背景與盒模型 100
6.2 補白屬性 100
6.2.1 補白屬性詳解 101
6.2.2 百分比值的使用 102
6.2.3 單側的補白屬性 103
6.2.4 補白屬性的簡寫 104
6.3 邊框屬性 106
6.3.1 邊框樣式 106
6.3.2 邊框寬度 107
6.3.3 邊框顏色 108
6.3.4 邊框的綜合定義 110
6.3.5 單側邊框的綜合定義 111
6.3.6 一個有用的表格邊框屬性 112
6.3.7 應用邊框屬性的實例 112
6.4 邊界屬性 113
6.4.1 整體邊界屬性 114
6.4.2 單側的邊界和簡寫 115
6.4.3 垂直方向的邊界重疊 116
6.4.4 水平方向的邊界 116
6.4.5 負的邊界值 117
6.4.6 在內聯元素中使用邊界屬性 118
6.5 父元素與子元素之間的距離 119
6.5.1 子元素邊界屬性值為0 119
6.5.2 父元素的補白屬性為0 120
6.5.3 父元素含有padding屬性同時子元素
含有margin屬性 121
6.6 嵌套的元素中使用負邊界 122
6.7 固定大小的問題 123
6.7.1 盒模型大小的計算 123
6.7.2 使用overflow屬性固定長度和寬度 124
6.8 自適應問題 125
6.8.1 什么叫自適應 125
6.8.2 獨立元素的高度自適應 125
6.8.3 利用背景色的兩列自適應 127
6.8.4 左右均能自適應的兩列布局 129
6.8.5 三列布局中有兩列內容固定 131
6.8.6 三列布局中有一列內容固定 133
6.8.7 三列布局中高度都不確定的情況 136
6.8.8 水平自適應的原理 138
6.9 制作一個簡單的頁面框架 140
6.9.1 框架結構分析 140
6.9.2 頁面結構的制作 141
6.9.3 定義CSS代碼 141
6.9.4 頁面最終效果及注意的問題 145
6.10 header部分的進一步完善 146
6.10.1 標題及簽名部分的完善 146
6.10.2 導航部分的完善 147
6.10.3 調整后的頁面效果 149
6.11 頁面主體結構的制作 149
6.11.1 效果圖分析 149
6.11.2 主體大表格和內容部分 150
6.11.3 右側分類導航部分 152
6.12 頁面主體部分CSS的編寫 154
6.12.1 3個主要結構的樣式 154
6.12.2 內容部分的樣式 155
6.12.3 導航列表部分的CSS編寫 157
6.12.4 主體部分最后的顯示效果和CSS代碼 160
第7章 CSS定義文本屬性 163
7.1 文本的縮進和對齊 163
7.1.1 段首縮進 163
7.1.2 段首字符的下沉與大寫 164
7.1.3 文本的對齊 165
7.1.4 圖文混排 166
7.2 行高與間隔 167
7.2.1 行高屬性詳解 167
7.2.2 利用行高屬性使文本垂直居中 170
7.2.3 間隔與空白 171
7.2.4 文本的轉換 173
7.3 水平和垂直居中問題 174
7.3.1 已知容器大小和內容大小時的水平和
垂直居中問題 174
7.3.2 未知容器大小、已知內容大小時的水平和
垂直居中問題 175
7.3.3 已知容器大小、未知內容大小時的水平和
垂直居中問題 176
7.3.4 容器大小及內容大小均未知時的水平和
垂直居中問題 178
7.3.5 修飾圖片的水平和垂直居中問題 180
7.4 字體的綜合屬性 180
7.4.1 字體的選擇 180
7.4.2 字體的大小 181
7.4.3 字體的加粗 183
7.4.4 字體的樣式 184
7.4.5 字體的變形 185
7.4.6 字體屬性的簡寫 185
7.5 文本的修飾和鏈接 186
7.5.1 文本的修飾 187
7.5.2 鏈接屬性詳解 188
7.5.3 使用鏈接的順序 190
7.5.4 鏈接的繼承性 191
7.5.5 cursor屬性 192
7.6 完成頁面header部分的制作 193
7.6.1 標題和簽名部分 193
7.6.2 menu導航部分 194
7.7 main部分的完善 197
7.7.1 內容部分的完善 197
7.7.2 分類導航部分的完善 198
7.8 footer部分的制作 202
7.8.1 效果圖分析 202
7.8.2 結構部分的制作 202
7.8.3 頁面樣式的添加 202
7.9 頁面在IE瀏覽器中的顯示效果 205
第8章 元素的修飾和CSS常見應用 206
8.1 圖片的修飾 206
8.1.1 網頁中常用的圖片格式 206
8.1.2 需要使用圖片的情況 207
8.1.3 作為背景的圖片修飾 207
8.1.4 修飾內容圖片 207
8.2 使用圖片制作簡單圓角框 209
8.2.1 單色或者單線圓角框自適應高度 209
8.2.2 單色或者單線圓角框自適應寬度 211
8.2.3 單色或者單線圓角框完全自適應 212
8.3 復雜圓角框的制作 214
8.3.1 自適應高度 215
8.3.2 自適應寬度 216
8.3.3 完全自適應 216
8.4 用CSS制作代替圖片的圓角 219
8.4.1 CSS圓角實現原理 219
8.4.2 CSS圓角的制作 220
8.5 表單的修飾 223
8.5.1 表單的分類 223
8.5.2 文本域的修飾 224
8.5.3 文本區域的修飾 225
8.5.4 按鈕的修飾 226
8.5.5 復選框的修飾 226
8.5.6 單選按鈕的修飾 226
8.5.7 列表的修飾 227
8.5.8 文件域的修飾 227
8.5.9 圖像域的修飾 228
8.6 登錄框的制作 228
8.6.1 效果圖分析 228
8.6.2 頁面結構部分制作 229
8.6.3 CSS部分的編寫 229
8.7 滾動條的修飾 232
8.7.1 滾動條的顯示 232
8.7.2 滾動條的修飾 234
8.8 表格的修飾 235
8.8.1 控制表格的邊線和背景 235
8.8.2 表格的高度和寬度 236
8.8.3 表格的居中問題 236
8.8.4 表格的內容與高度 237
8.9 分隔線的修飾 238
8.10 關于導航欄的制作和修飾 239
8.10.1 縱向導航欄的修飾 240
8.10.2 制作鏈接樣式 241
8.10.3 制作鼠標懸停效果 241
8.10.4 橫向導航欄 244
8.11 下拉菜單的制作 244
8.11.1 下拉菜單的顯示效果 244
8.11.2 菜單的原理 245
8.11.3 制作菜單結構部分 245
8.11.4 編寫主導航部分的樣式 246
8.11.5 編寫子欄目的樣式 247
8.11.6 隱藏子欄目 247
8.11.7 制作顯示效果的樣式 248
8.11.8 使用的腳本代碼 248
8.12 遮蓋的問題 249
第3篇 整站的CSS定義技巧
第9章 DIV+CSS布局基礎 252
9.1 初識DIV+CSS布局的流程 252
9.2 了解盒模型 254
9.2.1 div標簽的盒模型示例 254
9.2.2 基本盒模型 258
9.2.3 邊距 258
9.2.4 補白 262
9.2.5 邊框 264
9.3 頁面元素的布局 268
9.3.1 塊級元素與行內元素 268
9.3.2 CSS布局方式：常規流 270
第10章 關于整站樣式表的分析 272
10.1 站點頁面的分析 272
10.1.1 規劃樣式表的原則 272
10.1.2 規劃樣式表的方法 272
10.1.3 實例的分析 273
10.2 站點二級頁面的制作 274
10.2.1 日志內容頁面結構的規劃 274
10.2.2 日志內容頁面CSS部分的制作 275
10.2.3 日志列表頁的制作 278
第11章 關于標準的校驗 281
11.1 為什么要進行標準的校驗 281
11.2 怎樣進行標準的校驗 281
11.2.1 XHTML校驗的方法 281
11.2.2 CSS校驗的方法 284
11.2.3 XHTML校驗常見錯誤 285
11.2.4 CSS校驗常見錯誤 285
11.3 實例頁面的校驗 285
11.3.1 實例首頁的校驗 286
11.3.2 一個二級頁面的校驗 287
第4篇 DIV+CSS布局實例
第12章 DIV+CSS頁面布局設計 290
12.1 頁面布局的準備 290
12.1.1 效果圖的制作 290
12.1.2 框架的規劃 291
12.1.3 布局圖片的分離與制作 295
12.2 頁面的制作 296
12.2.1 框架代碼的編寫 296
12.2.2 內容代碼的編寫 298
12.2.3 CSS代碼的編寫 299
第13章 新聞系統的頁面布局 304
13.1 新聞系統的頁面分析 304
13.2 新聞系統首頁的設計 304
13.2.1 效果圖的設計 304
13.2.2 框架的規劃 305
13.2.3 布局圖片的分離與制作 308
13.2.4 框架代碼的編寫 309
13.2.5 內容代碼的編寫 310
13.2.6 CSS代碼的編寫 311
13.2.7 預覽效果及微調 315
13.3 新聞系統欄目頁面的設計 315
13.3.1 效果圖的設計 315
13.3.2 框架的規劃 315
13.3.3 布局圖片的分離與制作 320
13.3.4 框架代碼的編寫 320
13.3.5 內容代碼的編寫 322
13.3.6 CSS代碼的編寫 323
13.3.7 預覽效果及微調 323
13.4 新聞系統列表頁的設計 324
13.4.1 效果圖的設計 324
13.4.2 框架的規劃 325
13.4.3 布局圖片的分離與制作 325
13.4.4 框架代碼的編寫 326
13.4.5 內容代碼的編寫 326
13.4.6 CSS代碼的編寫 327
13.4.7 預覽效果及微調 327
13.5 新聞系統內容頁的設計 327
13.5.1 效果圖的設計 327
13.5.2 框架的規劃 327
13.5.3 布局圖片的分離與制作 329
13.5.4 框架代碼的編寫 329
13.5.5 內容代碼的編寫 330
13.5.6 CSS代碼的編寫 330
13.5.7 預覽效果及微調 330
第14章 微博系統的頁面布局 331
14.1 微博系統的頁面分析 331
14.2 微博系統個人首頁的設計 331
14.2.1 效果圖的設計 331
14.2.2 框架的規劃 332
14.2.3 布局圖片的分離與制作 335
14.2.4 框架代碼的編寫 336
14.2.5 內容代碼的編寫 339
14.2.6 CSS代碼的編寫 340
14.2.7 預覽效果及微調 342
14.3 微博系統相冊列表頁的設計 343
14.3.1 效果圖的設計 343
14.3.2 框架的規劃 344
14.3.3 布局圖片的分離與制作 344
14.3.4 框架代碼的編寫 344
14.3.5 CSS代碼的編寫 345
14.3.6 預覽效果及微調 346
14.4 微博系統相冊幻燈頁的設計 346
14.4.1 效果圖的設計 346
14.4.2 源代碼分析 346
14.4.3 布局圖片的分離與制作 348
14.5 微博系統日志詳情頁的設計 349
14.5.1 效果圖的設計 349
14.5.2 框架的規劃 349
14.5.3 框架代碼的編寫 351
14.5.4 CSS代碼的編寫 352
14.5.5 預覽效果及微調 353
14.6 微博系統微頻道（廣場）的設計 353
14.6.1 效果圖的設計 353
14.6.2 框架的規劃 353
14.6.3 框架代碼的編寫 354
14.6.4 內容代碼的編寫 356
14.6.5 CSS代碼的編寫 356
14.6.6 預覽效果及微調 358
第15章 論壇系統的頁面布局 359
15.1 論壇系統的頁面分析 359
15.2 論壇系統首頁的設計 359
15.2.1 效果圖的設計 359
15.2.2 框架的規劃 359
15.2.3 布局圖片的分離與制作 363
15.2.4 框架代碼的編寫 363
15.2.5 內容代碼的編寫 365
15.2.6 CSS代碼的編寫 366
15.2.7 預覽效果及微調 369
15.3 論壇系統欄目頁的設計 369
15.3.1 效果圖的設計 369
15.3.2 框架的規劃 369
15.3.3 布局圖片的分離與制作 371
15.3.4 框架代碼的編寫 371
15.3.5 內容代碼的編寫 372
15.3.6 CSS代碼的編寫 373
15.3.7 預覽效果及微調 374
15.4 論壇系統版塊頁的設計 374
15.4.1 效果圖的設計 374
15.4.2 框架的規劃 375
15.4.3 布局圖片的分離與制作 377
15.4.4 框架代碼的編寫 377
15.4.5 內容代碼的編寫 379
15.4.6 CSS代碼的編寫 380
15.4.7 預覽效果及微調 381
15.5 論壇系統內容頁的設計 381
15.5.1 效果圖的設計 381
15.5.2 框架的規劃 383
15.5.3 布局圖片的分離與制作 384
15.5.4 框架代碼的編寫 384
15.5.5 內容代碼的編寫 386
15.5.6 CSS代碼的編寫 387
15.5.7 預覽效果及微調 388
第16章 商城系統的頁面布局 389
16.1 商城系統的頁面分析 389
16.2 商城系統首頁的設計 389
16.2.1 效果圖的設計 389
16.2.2 框架的規劃 389
16.2.3 布局圖片的分離與制作 398
16.2.4 框架代碼的編寫 399
16.2.5 內容代碼的編寫 405
16.2.6 CSS代碼的編寫 408
16.2.7 預覽效果及微調 411
附錄A CSS標記速查 412
A.1 字體屬性 412
A.1.1 設置字體--font-family 412
A.1.2 設置字號--font-size 412
A.1.3 字體風格--font-style 412
A.1.4 設置加粗字體--font-weight 413
A.1.5 小型的大寫字母--font-variant 413
A.1.6 復合屬性：字體--font 413
A.2 顏色及背景屬性 413
A.2.1 顏色屬性設置--color 413
A.2.2 背景顏色--background-color 414
A.2.3 背景圖像--background-image 414
A.2.4 背景重復--background-repeat 415
A.2.5 背景附件--background-attachment 415
A.2.6 背景位置--background-position 415
A.2.7 復合屬性：背景--background 415
A.3 文本屬性 416
A.3.1 單詞間隔--word-spacing 416
A.3.2 字符間隔--letter-spacing 416
A.3.3 文字修飾--text-decoration 416
A.3.4 縱向排列--vertical-align 416
A.3.5 文本轉換--text-transform 417
A.3.6 文本排列--text-align 417
A.3.7 文本縮進--text-indent 417
A.3.8 文本行高--line-height 417
A.3.9 處理空白--white-space 417
A.3.10 文本反排--unicode-bidi與
direction 418
A.4 邊距與填充屬性 418
A.4.1 頂端邊距--margin-top 418
A.4.2 其他邊距--margin-bottom、margin-left、
margin-right 419
A.4.3 復合屬性：邊距--margin 419
A.4.4 頂端填充--padding-top 419
A.4.5 其他填充--padding-bottom、padding-left、
padding-right 419
A.4.6 復合屬性：填充--padding 419
A.5 邊框屬性 419
A.5.1 邊框樣式--border-style 420
A.5.2 邊框寬度--border-width 421
A.5.3 邊框顏色--border-color 421
A.5.4 邊框屬性--border 421
A.6 定位及尺寸屬性 422
A.6.1 定位方式--position 422
A.6.2 元素位置--top、right、bottom、left 422
A.6.3 層疊順序--z-index 423
A.6.4 浮動屬性--float 423
A.6.5 清除屬性--clear 423
A.6.6 可視區域--clip 423
A.6.7 設定大小--width、height 423
A.6.8 超出范圍--overflow 424
A.6.9 可見屬性--visibility 424
A.7 列表屬性 424
A.7.1 列表符號--list-style-type 424
A.7.2 圖像符號--list-style-image 425
A.7.3 列表縮進--list-style-position 425
A.7.4 復合屬性：列表--list-style 425
A.8 光標屬性--cursor 425
A.9 濾鏡屬性 426
A.9.1 不透明度--alpha 426
A.9.2 動感模糊--blur 426
A.9.3 對顏色進行透明處理--chroma 427
A.9.4 設置陰影--dropShadow 427
A.9.5 對象的翻轉--flipH、flipV 427
A.9.6 發光效果--glow 427
A.9.7 灰度處理--gray 427
A.9.8 反相--invert 428
A.9.9 X光片效果--Xray 428
A.9.10 遮罩效果--mask 428
A.9.11 波形濾鏡--wave 428
購物須知
大陸出版品因裝訂品質及貨運條件與台灣出版品落差甚大，除封面破損、內頁脫落等較嚴重的狀態，其餘商品將正常出貨。
特別提醒：部分書籍附贈之內容(如音頻mp3或影片dvd等)已無實體光碟提供，需以QR CODE 連結至當地網站註冊“並通過驗證程序”，方可下載使用。
無現貨庫存之簡體書，將向海外調貨：
海外有庫存之書籍，等候約45個工作天;
海外無庫存之書籍，平均作業時間約60個工作天，然不保證確定可調到貨，尚請見諒。
為了保護您的權益，「三民網路書店」提供會員七日商品鑑賞期(收到商品為起始日)。
若要辦理退貨，請在商品鑑賞期內寄回，且商品必須是全新狀態與完整包裝(商品、附件、發票、隨貨贈品等)否則恕不接受退貨。
優惠價：87
307
海外經銷商無庫存，到貨日平均30天至45天