基本信息
書名：《CSS+DIV網頁樣式與布局從入門到精通》叢書名：清華社“視頻大講堂”大系網路開發視頻大講堂
作者：喻浩
出版社：清華大學出版社
字數：969千字
版次：2013年6月第1版
出版日期：2013年6月
印次：2013年6月第1次印刷
用紙：膠版紙
編輯推薦
“網路開發視頻大講堂”叢書系清華社“視頻大講堂”重點大系之一。該大系包括多個子系列，每個子系列的圖書在其同品種的圖書中銷售名列前茅，其中：u4個品種榮獲“全行業優秀暢銷品種”
u1個品種榮獲2012年清華大學出版社“專業暢銷書”一等獎
u絕大多數品種在“全國計算機零售圖書排行榜”同品種排行中名列前茅
u截至目前該大繫纍計銷售超過55萬冊
u該大系已成為近年來清華社計算機專業基礎類零售圖書最暢銷的品牌之一
“網路開發視頻大講堂”系列作為清華社“視頻大講堂”大系的子系列之一，繼承和創新了清華社“視頻大講堂”大系的編寫模式、寫作風格和優良品質。本書突出了以下內容：
u216節大型高清同步視頻演示講解，可反覆觀摩，讓學習更為快捷、高效
u 218箇中小典型實例，通過實例學習更深入，更有趣，更有動力
u51個綜合實戰案例，展現工作過程，積累工作經驗
u11部網頁開發參考手冊，CSS2.0參考手冊，CSS3.0參考手冊，JavaScript參考手冊JavaScript核心參考，jQuery1.7中文手冊，jQuery1.3參考手冊，jQuery1.4參考手冊 W3CSchool，w3c標準html5手冊,XHTML參考手冊,XMLHttp中文參考手冊
u83類實用網頁模版，其中HTML5+CSS3網頁模版32類，DIV+CSS3網頁模版51類。
u集基礎知識、中小實例、實戰案例、專業經驗於一體
u好學、好用、高效
內容簡介
《CSS+DIV網頁樣式與布局從入門到精通》全面系統地講解了CSS基礎理論和實際運用技術，通過大量實例對CSS套用進行深入淺出的分析。全書主要內容包括CSS的基本語法和概念，設定文字、圖片、背景、表格、表單和選單等網頁元素的方法，以及CSS濾鏡的使用和CSS如何控制XML文檔樣式。著重講解如何利用CSS+DIV進行網頁布局，注重實際操作，使讀者在學習CSS套用技術的同時掌握CSS+DIV的精髓。本書還詳細講解了其他書中較少涉及的技術細節，包括擴展CSS與JavaScript和XML等綜合套用等內容，以幫助讀者設計符合Web標準的網頁，提升技術水平和競爭能力。本書最後通過兩個常見類型的綜合實例，幫助讀者進一步鞏固所學知識，提高綜合套用的能力。本書內容翔實、結構清晰、循序漸進，基礎知識與案例實戰緊密結合，既可作為CSS初學者的入門教材，也適合作為中高級用戶進一步學習和參考用書。本書顯著特色有：
1．同步視頻講解，讓學習更為直觀高效。27小時大型高清同步視頻講解，先看視頻再學習效率更高。
2．海量精彩實例，用實例學更輕鬆快捷。218個精彩實例，模仿練習是最快捷的學習方式。
3．精選實戰案例，為高薪就業牽線搭橋。51個實戰案例展示可為以後就業積累經驗。
4．完整學習套餐，為讀者提供貼心服務。實例源程式、答疑服務等，讓讀者學習更加方便。
5．講解通俗翔實，看得懂學得會才是硬道理。
本書特色
系統的基礎知識本書系統地講解了CSS層疊樣式表技術在網頁設計中各個方面套用的知識，從為什麼要用CSS開始講解，循序漸進，配合大量實例，幫助讀者奠定堅實的理論基礎，做到知其所以然。
大量的案例實戰
書中設定大量套用實例，重點強調具體技術的靈活套用，並且全書結合了作者長期的網頁設計製作和教學經驗，使讀者真正做到學以致用。
深入解剖CSS+DIV布局
本書用相當的篇幅重點介紹了用CSS+DIV進行網頁布局的方法和技巧，配合經典的布局案例，幫助讀者掌握CSS最核心的套用技術。
高級混合套用技術
真正的網頁除了外觀表現之外，還需要結構標準語言和行為標準的結合，因此本書還特別講解了CSS與JavaScript、Ajax和XML的混合套用（這些都是Web 2.0網站中的主要技術），使讀者掌握高級的網頁製作技術。
精選綜合實例
本書精選了兩個常見類型的網頁綜合實例，包括新聞網站和旅遊酒店網站，幫助讀者總結前面所學知識，綜合套用各種技術、方法和技巧，提高讀者綜合套用的能力。
圖書目錄
第1章CSS樣式設計基礎1視頻講解：2小時38分鐘
1.1設計良好的網頁結構 2
1.1.1選用符合語義的標籤 2
1.1.2文檔類型和瀏覽器模式 7
1.2初識CSS 8
1.2.1為什麼學習CSS9
1.2.2CSS基本語法 9
1.2.3設計第一個實例 10
1.3 CSS選擇器 12
1.3.1CSS選擇器概述12
1.3.2標籤選擇器 13
1.3.3ID選擇器 14
1.3.4類選擇器 16
1.3.5偽類和偽對象選擇器 17
1.3.6子選擇器 19
1.3.7相鄰選擇器 20
1.3.8屬性選擇器 21
1.3.9通用選擇器 23
1.3.10包含選擇器 23
1.3.11分組選擇器 25
1.3.12指定選擇器 26
1.4 CSS基本特性 26
1.4.1層疊和特殊性 26
1.4.2繼承 31
1.5樣式表規劃、組織和維護 32
1.5.1對文檔套用樣式 32
1.5.2對代碼進行注釋 34
1.5.3樣式文檔 37
1.5.4組織樣式表以便簡化維護 37
1.6 CSS屬性和屬性值 38
1.6.1CSS屬性 38
1.6.2CSS單位 44
1.6.3設定顏色 46
第2章使用CSS設定字型和文本樣式 48
視頻講解：2小時12分鐘
2.1字型和文本樣式基礎 49
2.1.1定義字型類型 49
2.1.2定義字型大小 51
2.1.3定義字型顏色 53
2.1.4定義字型粗細 54
2.1.5定義斜體字型 55
2.1.6定義下劃線、刪除線和頂劃線 56
2.1.7定義字型大小寫 57
2.1.8定義文本對齊 58
2.1.9定義垂直對齊 60
2.1.10定義字間距和行間距 63
2.1.11定義行間距 64
2.1.12定義縮進67
2.2案例實戰 68
2.2.1設計百度Logo 69
2.2.2設定標題樣式 70
2.2.3設定正文樣式 73
2.2.4設定文本樣式 75
2.2.5設定文本段樣式 79
2.2.6設定段落版式樣式 82
2.2.7設計單頁圖文混排版式 86
第3章使用CSS設定圖片樣式 92
視頻講解：1小時32分鐘
3.1圖片樣式設定基礎 93
3.1.1定義圖片框線 93
3.1.2定義圖片大小 97
3.1.3定義圖片的橫向對齊 98
3.1.4定義圖片的縱向對齊 99
3.1.5設定文字環繞效果 101
3.2案例實戰 103
3.2.1圖文混排 103
3.2.2圖片布局 107
3.2.3多圖排列 111
3.2.4陰影圖片 114
3.2.5圓角圖片 116
3.2.6設計圓角欄目 118
第4章使用CSS控制背景圖像 124
視頻講解：1小時38分鐘
4.1背景樣式設定基礎 125
4.1.1設定頁面背景顏色 125
4.1.2設定背景顏色給頁面分塊 126
4.1.3定義背景圖片 128
4.1.4背景圖片的重複 130
4.1.5定義背景圖片的位置 131
4.1.6固定背景圖片 133
4.2案例實戰 134
4.2.1設定網頁背景顏色 135
4.2.2設定帶花紋框線 136
4.2.3設定永遠固定的背景 143
4.2.4設定圓潤的欄目模組 144
4.2.5設計分欄版式 149
4.2.6設計滑動門選單 151
4.2.7設計燈箱廣告 154
4.2.8設計部落格首頁效果 157
第5章使用CSS控制列表樣式 163
視頻講解：55分鐘
5.1列表樣式設定基礎 164
5.1.1設定列表項符號 164
5.1.2定義項目的圖片符號 166
5.1.3列表的橫豎轉換 167
5.2案例實戰 169
5.2.1設計新聞欄目 169
5.2.2設計導航選單 173
5.2.3設計多級選單 177
5.2.4列表排版的套用 182
5.2.5使用列表實現圖文混排效果 186
第6章使用CSS設計表格樣式 192
視頻講解：45分鐘
6.1表格樣式設定基礎 193
6.1.1設定表格顏色 193
6.1.2設定表格框線 194
6.2案例實戰 196
6.2.1美化表格 197
6.2.2設計高效的表格 200
6.2.3讓表格更易用 204
6.2.4表格布局 207
第7章使用CSS設計表單樣式 211
視頻講解：1小時45分鐘
7.1表單樣式設定基礎 212
7.1.1表單基本結構 212
7.1.2設定基本樣式 216
7.1.3定義字型樣式 221
7.1.4定義框線樣式 222
7.1.5定義背景樣式 224
7.2案例實戰 228
7.2.1設計多彩下拉選單樣式 228
7.2.2設計註冊表單 230
7.2.3設計調查表 235
7.2.4設計反饋表 240
第8章使用CSS定義連結樣式 246
視頻講解：1小時12分鐘
8.1連結樣式設定基礎 247
8.1.1設定連結樣式 247
8.1.2設計下劃線樣式 248
8.1.3設定類型指示樣式 249
8.1.4定義按鈕樣式 251
8.1.5定義已訪問樣式 254
8.1.6連結提示樣式 254
8.2案例實戰 256
8.2.1滑鼠樣式 256
8.2.2設計選單樣式 259
8.2.3設計蘋果導航選單 261
8.2.4塊狀選項卡 266
8.2.5圖片瀏覽 271
第9章網頁排版和DIV+CSS布局 275
視頻講解：2小時47分鐘
9.1 CSS盒模型 276
9.1.1認識盒模型 276
9.1.2外邊距 278
9.1.3內邊距 281
9.1.4框線 284
9.1.5寬和高 284
9.2網頁重構 287
9.2.1設定文檔類型 287
9.2.2選擇標籤 293
9.2.3案例實戰：嘗試重構禪意花園 296
9.3網頁排版 299
9.3.1網頁排版基本原則 299
9.3.2標準網頁版式基本形式 300
9.3.3網頁排版基本方法 300
9.4 DIV+CSS布局 305
9.4.1布局空間 305
9.4.2布局位置 307
9.4.3布局環繞 309
9.4.4清除浮動 311
9.4.5布局嵌套 313
9.4.6調整布局間距 316
9.5案例實戰 321
9.5.1兩列布局 322
9.5.2三列布局 327
第10章用CSS定位控制網頁布局 332
視頻講解：1小時53分鐘
10.1 CSS定位 333
10.1.1認識position 333
10.1.2靜態定位333
10.1.3絕對定位334
10.1.4相對定位335
10.1.5固定定位338
10.2 定位參照 339
10.2.1參照對象339
10.2.2坐標值 343
10.2.3定位的特殊性344
10.3 定位層疊 347
10.3.1層疊順序347
10.3.2嵌套層疊順序349
10.3.3CSS層疊框 351
10.3.4CSS層疊常見問題 354
10.4 案例實戰 357
10.4.1畫冊式網頁布局 357
10.4.2展覽式網頁布局 361
10.4.3浪漫式網頁布局 366
第11章解決CSS設計中的常見問題 372
視頻講解：2小時
11.1 IE條件語句 373
11.1.1認識IE條件語句 373
11.1.2IE條件語句基本用法 374
11.1.3案例實戰：設計兼容的多級選單376
11.2 CSS渲染及問題 380
11.2.1開啟和關閉IE布局特性 381
11.2.2設定Layout特性的方法 381
11.2.3問題1：不能自動展開包含框 384
11.2.4問題2：包含浮動布局的問題與處理 387
11.2.5問題3：相鄰浮動布局的問題與處理 389
11.2.6問題4：列表布局的問題與處理 390
11.2.7問題5：定位布局的問題與處理 392
11.3 常用瀏覽器解析問題和解決方法 394
11.3.1兼容IE6版本瀏覽器 395
11.3.2兼容IE5系列版本瀏覽器 396
11.3.3兼容IE7版本瀏覽器 398
11.3.4兼容FF等標準瀏覽器 399
11.3.5問題1：超連結的Bug 399
11.3.6問題2：內容與背景分離的Bug 400
11.3.7問題3：IE6躲躲貓Bug402
11.3.8問題4：IE6多餘字元Bug 403
11.4 案例實戰 403
11.4.1 3列等高布局 403
11.4.2 3列浮動布局 408
第12章旅遊酒店網站 410
視頻講解：2小時18分鐘
12.1 網站頁面效果分析 411
12.1.1“旅遊度假”頁面效果分析411
12.1.2“預定酒店”頁面效果分析411
12.2 首頁策劃設計 412
12.3 網頁設計與重構 414
12.3.1畫草圖和設計圖 414
12.3.2切圖417
12.3.3主體重構419
12.4 頁面布局 422
12.4.1設計頁面基本樣式422
12.4.2設計頁頭布局和樣式 422
12.4.3設計搜尋和幻燈區布局和樣式 425
12.4.4設計左側引導區布局和樣式427
12.4.5設計內容區樣式 428
12.4.6設計右側專題欄樣式 431
第13章新聞網站 434
視頻講解：1小時20分鐘
13.1 網站頁面效果分析 435
13.1.1“對話”頁面效果分析435
13.1.2環球看點頁面效果分析435
13.2 首頁策劃設計 436
13.3 網頁設計與重構 438
13.3.1畫草圖和設計圖 438
13.3.2切圖440
13.3.3主體重構442
13.4 頁面布局 444
13.4.1設計頁面基本樣式445
13.4.2設計頁頭布局和樣式 445
13.4.3設計主要新聞區布局和樣式447
13.4.4設計分類新聞區布局和樣式450
第14章使用JavaScript控制CSS樣式 455
視頻講解：2小時47分鐘
14.1 JavaScript基礎 456
14.1.1在網頁中嵌入JavaScript腳本 456
14.1.2JavaScript腳本在文檔中的位置 457
14.1.3解決JavaScript腳本與CSS樣式衝突 457
14.2CSS腳本化傳統控制方法 459
14.2.1認識Style對象 460
14.2.2讀寫行內樣式464
14.2.3讀寫樣式表中樣式467
14.2.4訪問網頁實際樣式472
14.3 控制CSS腳本的標準方法473
14.3.1CSSStyleSheet接口 474
14.3.2CSSStyleRule接口 474
14.3.3CSSStyleDeclaration接口 475
14.4 使用JavaScript控制元素大小 476
14.4.1讀取元素的長寬樣式值476
14.4.2使用offsetWidth和offsetHeight屬性讀取元素的尺寸 479
14.4.3讀取複雜結構中的元素尺寸481
14.4.4讀取瀏覽器視窗大小 485
14.5 使用JavaScript定位 486
14.5.1在視窗中的位置 487
14.5.2相對父元素的位置489
14.5.3相對包含塊的位置489
14.5.4定義偏移位置490
14.5.5定義相對位置490
14.5.6確定游標位置491
14.5.7確定游標的相對位置 492
14.5.8確定滾動條的位置493
14.5.9定義滾動條的位置493
14.6 使用JavaScript設定顯隱效果 494
14.6.1設定顯隱效果494
14.6.2設定透明度 495
14.6.3控制動畫時長496
14.6.4設計滑動效果499
第15章使用CSS設計XML文檔樣式 502
視頻講解：43分鐘
15.1 XML基礎 503
15.1.1XML文檔基本結構503
15.1.2聲明504
15.1.3處理指令504
15.1.4注釋505
15.1.5標籤505
15.1.6屬性506
15.2 設定XML文檔樣式 507
15.2.1CSS樣式表 507
15.2.2XSL樣式表 508
15.3 CSS與XML文檔關聯510
15.3.1直接嵌入CSS樣式 510
15.3.2導入外部CSS樣式表檔案 512
15.3.3@ import 513
15.4 案例實戰 513
15.4.1設計詩情畫意圖文效果513
15.4.2設計新聞版面效果515
第16章使用CSS濾鏡 519
視頻講解：43小時分鐘
16.1 CSS濾鏡概述 520
16.1.1基本用法520
16.1.2恰當選用濾鏡520
16.2 常用CSS濾鏡 521
16.2.1通道（Alpha） 521
16.2.2模糊（Blur） 523
16.2.3運動模糊（MotionBlur） 524
16.2.4透明色（Chroma） 525
16.2.5翻轉（Flip） 527
16.2.6光暈（Glow）528
16.2.7灰度（Gray）529
16.2.8反色（Invert） 530
16.2.9遮罩（Mask） 531
16.2.10陰影（Shadow） 532
16.2.11X射線（Xray） 534
16.2.12浮雕（Emboss） 535
16.2.13波浪（Wave） 536
16.3 案例實戰 537
