內容介紹
CSS布局是目前最流行的網頁製作技術。《CSS+DIV網頁布局技術詳解》通過實例講解了CSS各個屬性的使用方法和怎樣使用CSS進行頁面的製作。全書內容包括Web標準布局的本質、XHTML書寫規範、CSS基礎與書寫規範、網頁頭部元素的詳細定義、CSS基本布局屬性、CSS容器屬性、CSS定義文本屬性、元素的修飾和CSS常見套用、DIV+CSS布局基礎、關於整站樣式表的分析、關於標準的校驗以及各種製作實例等內容。
《CSS+DIV網頁布局技術詳解》適合廣大Web網站設計人員、網站設計的初學者、網站管理維護人員、大專院校學生和社會培訓學生閱讀。
目錄
第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
網站開發非常之旅
Android移動網站開發詳解 ISBN：9787302344308
ASP.NET項目開發詳解 ISBN：9787302345725
iOS移動網站開發詳解 ISBN：9787302344858
Java Web開發技術詳解 ISBN：9787302344100
PHP網路編程技術詳解 ISBN：9787302343189
ASP.NET網路編程技術詳解 ISBN：9787302342540
HTML+CSS網頁設計詳解 ISBN：9787302343202
Linux伺服器配置與管理 ISBN：9787302344865
CSS+DIV網頁布局技術詳解 ISBN：9787302345732
Dreamweaver CS6網頁設計與製作詳解 ISBN：9787302344339
