網頁布局與實現(DIV+CSS)

《網頁布局與實現(DIV+CSS)》是2014年出版的圖書，作者是康玉忠、樊紅珍、伍健聰、程高飛。

基本介紹

• 書名：網頁布局與實現(DIV+CSS)
• 作者：康玉忠、樊紅珍、伍健聰、程高飛
• 出版社：清華大學出版社
• 出版時間：2014年08月01日
• 定價：30 元
• ISBN：9787302359104 

內容簡介

本書通過項目案例來講解DIV+CSS布局設計的基本思想、方法和解決實際問題的技巧，培養學習者網頁布局分析、設計、套用的能力和良好的網頁布局設計習慣。本書打破傳統的教材組織形式，強化CSS布局設計，由簡單初步布局到真實項目實戰布局，以網頁布局設計體驗（結構與表現分離）→CSS的實戰基礎→DIV布局與CSS定位→文欄位落與列表的套用→背景與圖片的套用→表格與表單的樣式套用→超連結與導航欄的樣式套用→CSS控制其他元素的顯示為主線劃分為8個模組；最後，對CSS 3.0新技術套用作了介紹，通過完成一個具有代表性的部落格實例和一個企業網站實例項目實戰，完整地實施CSS頁面布局，以提高讀者綜合解決問題的能力。 本書適合作為高職高專院校計算機類專業學生學習網頁設計的教材，也適合從事網頁設計的人員參考學習。

圖書目錄

模組1網頁布局設計體驗/1

1.1CSS網頁1

1.1.1什麼是CSS1

1.1.2Web標準1

1.1.3網頁結構與表現分離實例2

1.2編寫CSS布局的XHTML3

1.2.1一個簡單的XHTML頁面實例4

1.2.2XHTML編寫的規範4

1.2.3CSS網頁的編輯6

1.2.4CSS的使用注釋7

1.2.5製作一個簡單的CSS實例7

1.3CSS控制的頁面8

1.3.1CSS的引入8

1.3.2行內樣式8

1.3.3內嵌式調用CSS樣式的實例8

1.3.4連結外部CSS樣式的實例9

1.3.5導入外部樣式10

拓展實踐10

習題11

模組2CSS的實戰基礎/13

2.1CSS的基本語法13

2.1.1CSS語法的格式13

2.1.2CSS的取值單位14

2.2基本CSS選擇符15

2.2.1標籤選擇符15

2.2.2類選擇符16

2.2.3ID選擇符17〖2〗〖3〗〖4〗2.3靈活使用CSS選擇符19

2.3.1分組選擇符及實例19

2.3.2通配選擇符20

2.3.3包含選擇符及實例20

2.3.4選擇符嵌套及實例21

2.3.5標籤指定選擇符22

2.3.6偽類選擇符22

2.4CSS繼承套用的實例23

2.5CSS樣式和選擇符優先權24

2.5.1CSS樣式的優先權原則24

2.5.2CSS樣式的優先權24

2.5.3CSS選擇符的優先權實例25

拓展實踐26

習題27

模組3DIV布局與CSS定位/30

3.1盒子模型30

3.1.1盒子模型的概念30

3.1.2padding、margin、border設定實例31

3.1.3盒子模型尺寸的計算35

3.1.4盒子外邊距合併實例36

3.1.5塊級元素與行內元素38

3.2頁面定位技術39

3.2.1CSS定位機制39

3.2.2浮動定位問題39

3.2.3清除浮動42

3.3CSS定位屬性45

3.3.1相對定位45

3.3.2絕對定位47

3.3.3固定定位47

3.4CSS布局技術48

3.4.1CSS布局理念48

3.4.2一列固定寬度居中49

3.4.3一列自適應寬度居中50

3.4.4二列固定寬度居中50

3.4.5二列自適應寬度居中51

3.4.6CSS高度自適應52

3.4.7溢出內容overflow屬性54

3.5三列布局實例——唐詩《黃鶴樓》畫卷54

拓展實踐56

習題57

模組4文欄位落與列表的套用/60

4.1CSS文字樣式60

4.1.1字型60

4.1.2文字大小62

4.1.3顏色63

4.1.4樣式64

4.2文本對齊64

4.2.1CSS的文本屬性64

4.2.2文本添加修飾實例64

4.2.3文本居中排列實例65

4.2.4製作Google公司Logo實例66

4.2.5首字下沉圖文混排實例66

4.3CSS列表樣式68

4.3.1列表的類型68

4.3.2CSS的列表屬性69

4.3.3List圖文混排70

4.3.4豎排唐詩文字71

拓展實踐72

習題73

模組5背景與圖片的套用/76

5.1頁面的背景圖76

5.1.1背景顏色與背景圖片76

5.1.2前景圖與背景圖76

5.2圖片樣式77

5.2.1CSS圖片框線77

5.2.2圖片對齊方式80

5.2.3圖文混排效果81

5.3背景圖片的套用實例82

5.3.1背景漸變效果實例83

5.3.2導航按鈕實例84

5.3.3橫格信紙實例85

5.4CSS樣式圓角布局研究86

5.4.1以四角小圖實現圓角效果實例87

5.4.2以畫線方式實現圓角效果實例88

5.4.3多圖片組合布局圓角效果實例90

5.5背景圖片的CSSSprite技術91

拓展實踐93

習題94

模組6表格與表單的樣式套用/96

6.1表格控制96

6.1.1表格標記96

6.1.2表格隔行變色實例100

6.1.3滑鼠經過時變色的表格實例102

6.2表單控制103

6.2.1表單標記104

6.2.2登錄框表單的套用實例107

6.2.3網民調查問卷實例109

拓展實踐111

習題113

模組7超連結與導航欄的樣式套用/116

7.1超連結CSS樣式116

7.1.1定義超連結CSS樣式116

7.1.2浮雕式超連結的效果118

7.2超連結製作導航欄120

7.2.1CSS樣式實現垂直導航欄121

7.2.2利用背景圖片製作立體導航選單122

7.2.3製作帶下拉子選單的導航選單124

拓展實踐127

習題127

模組8CSS控制其他元素的顯示/130

8.1CSS靜態濾鏡130

8.1.1透明度濾鏡131

8.1.2模糊濾鏡132

8.1.3透明色濾鏡133

8.1.4投射陰影濾鏡134

8.1.5對稱變換濾鏡135

8.1.6光暈濾鏡136

8.1.7灰度濾鏡137

8.1.8反色濾鏡138

8.1.9遮罩濾鏡139

8.1.10陰影濾鏡140

8.1.11X射線濾鏡141

8.1.12波浪濾鏡141

8.1.13一個使用顏色漸變濾鏡的實例142

8.2控制滾動條的顯示143

8.2.1滾動條樣式的屬性144

8.2.2控制滾動條樣式的實例144

8.3CSS布局中的兼容問題145

8.3.1兼容問題的由來145

8.3.2兼容問題的解決146

8.3.3一個關於瀏覽器顯示差異的實例147

拓展實踐149

習題150

模組9CSS3.0的新技術與套用/152

9.1CSS3.0簡介152

9.1.1CSS3.0技術的發展152

9.1.2CSS3.0中的新特性152

9.2進入CSS3.0樣式新世界153

9.2.1用CSS3.0實現圓角效果實例153

9.2.2CSS3.0框線、陰影實例154

9.2.3CSS3.0文本描邊及陰影效果實例155

9.2.4CSS3.0表格美化效果實例156

9.2.5CSS3.0按鈕動畫過渡效果實例157

9.2.6CSS3.0多列布局排版實例158

拓展實踐159

習題161

模組10製作個人部落格頁面/162

10.1構架設計製作162

10.1.1功能需求分析與界面設計162

10.1.2頁面結構的規劃162

10.1.3切割網頁的效果164

10.1.4頁面主體框架內容166

10.2製作頁面內容167

10.2.1製作頁面頭部Banner的內容與導航167

10.2.2製作頁面導航左側列表169

10.2.3製作頁面主體內容部分173

10.2.4製作頁面底部內容178

10.3頁面細節整體調整179

10.4頁面的瀏覽與兼容測試180

拓展實踐182

習題183

模組11企業網站製作/184

11.1企業網站構架184

11.1.1功能需求分析與界面設計184

11.1.2頁面結構的規劃185

11.1.3切割網頁效果圖185

11.1.4頁面主體框架內容187

11.2製作頁面內容187

11.2.1製作Banner內容與導航187

11.2.2製作頁面左側列表189

11.2.3製作頁面主體內容191

11.2.4製作頁面圖片展示192

11.2.5製作頁面底部內容193

11.3頁面細節整體調整194

11.4頁面的瀏覽與兼容測試194

拓展實踐195

習題196

附錄CSS常用屬性/197

參考文獻/203