《CSS+DIV網頁樣式與布局從入門到精通》，是清華大學出版社2013年出版的圖書，作者是喻浩。
基本介紹
- 書名：CSS+DIV網頁樣式與布局從入門到精通
- 作者：喻浩
- 出版社：清華大學出版社
- 出版時間：2013年6月
- 字數：969000
- 紙張：膠版紙
編輯推薦,內容簡介,本書特色,圖書目錄,
編輯推薦
“網路開發視頻大講堂”叢書系清華社“視頻大講堂”重點大系之一。該大系包括多個子系列，每個子系列的圖書在其同品種的圖書中銷售名列前茅，其中：
u 4個品種榮獲“全行業優秀暢銷品種”
u 1個品種榮獲2012年清華大學出版社“專業暢銷書”一等獎
u 絕大多數品種在“全國計算機零售圖書排行榜”同品種排行中名列前茅
u 截至目前該大繫纍計銷售超過55萬冊
u 該大系已成為近年來清華社計算機專業基礎類零售圖書最暢銷的品牌之一
“網路開發視頻大講堂”系列作為清華社“視頻大講堂”大系的子系列之一，繼承和創新了清華社“視頻大講堂”大系的編寫模式、寫作風格和優良品質。本書突出了以下內容：
u 216節大型高清同步視頻演示講解，可反覆觀摩，讓學習更為快捷、高效
u 218箇中小典型實例，通過實例學習更深入，更有趣，更有動力
u 51個綜合實戰案例，展現工作過程，積累工作經驗
u 11部網頁開發參考手冊，CSS2.0參考手冊，CSS3.0參考手冊，JavaScript參考手冊 JavaScript核心參考，jQuery1.7中文手冊，jQuery1.3參考手冊，jQuery1.4參考手冊 W3CSchool，w3c標準html5手冊,XHTML參考手冊,XMLHttp中文參考手冊
u 83類實用網頁模版，其中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 為什麼學習CSS 9
1.2.2 CSS基本語法 9
1.2.3 設計第一個實例 10
1.3 CSS選擇器 12
1.3.1 CSS選擇器概述 12
1.3.2 標籤選擇器 13
1.3.3 ID選擇器 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.1 CSS屬性 38
1.6.2 CSS單位 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.3 CSS層疊框 351
10.3.4 CSS層疊常見問題 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.2 IE條件語句基本用法 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躲躲貓Bug 402
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.2 JavaScript腳本在文檔中的位置 457
14.1.3 解決JavaScript腳本與CSS樣式衝突 457
14.2 CSS腳本化傳統控制方法 459
14.2.1 認識Style對象 460
14.2.2 讀寫行內樣式 464
14.2.3 讀寫樣式表中樣式 467
14.2.4 訪問網頁實際樣式 472
14.3 控制CSS腳本的標準方法 473
14.3.1 CSSStyleSheet接口 474
14.3.2 CSSStyleRule接口 474
14.3.3 CSSStyleDeclaration接口 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.1 XML文檔基本結構 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.1 CSS樣式表 507
15.2.2 XSL樣式表 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.11 X射線（Xray） 534
16.2.12 浮雕（Emboss） 535
16.2.13 波浪（Wave） 536
16.3 案例實戰 537
