內(nèi)容簡介

《CSS3+DIV網(wǎng)頁樣式與布局案例課堂(第2版)》以零基礎(chǔ)講解為宗旨，用實例引導(dǎo)讀者深入學(xué)習(xí)，采取“基礎(chǔ)知識→核心技術(shù)→高級應(yīng)用→網(wǎng)頁布局→項目案例實戰(zhàn)”的講解模式，深入淺出地講解CSS3+DIV的各項技術(shù)及實戰(zhàn)技能。

《CSS3+DIV網(wǎng)頁樣式與布局案例課堂(第2版)》第Ⅰ篇主要講解網(wǎng)頁設(shè)計的必備技能、CSS樣式入門和CSS3樣式的基本語法等；第Ⅱ篇主要講解設(shè)計網(wǎng)頁字體與段落樣式、設(shè)計網(wǎng)頁圖片樣式、設(shè)計網(wǎng)頁背景與邊框樣式、設(shè)計網(wǎng)頁超級鏈接和鼠標(biāo)樣式、設(shè)計表格和表單樣式、設(shè)計列表和菜單樣式、使用濾鏡美化網(wǎng)頁元素等；第Ⅲ篇主要講解CSS3的高級特性、過渡和動畫效果、2D和3D變幻效果、CSS3和JavaScript的搭配應(yīng)用、CSS3與XML的綜合運用等；第Ⅳ篇主要講解CSS定位與DIV布局核心技術(shù)、CSS+DIV盒子的浮動與定位、固定寬度網(wǎng)頁布局剖析與制作、自動縮放網(wǎng)頁布局剖析與制作、創(chuàng)建響應(yīng)式頁面等；第Ⅴ篇主要講解設(shè)計商業(yè)門戶類網(wǎng)頁、設(shè)計圖像影音類網(wǎng)頁、設(shè)計娛樂休閑類網(wǎng)頁、設(shè)計企業(yè)門戶類網(wǎng)頁和設(shè)計在線購物類網(wǎng)頁。

《CSS3+DIV網(wǎng)頁樣式與布局案例課堂(第2版)》適合任何想學(xué)習(xí)CSS3+DIV網(wǎng)頁設(shè)計與布局的人員，無論您是否從事計算機相關(guān)行業(yè)，無論您是否接觸過CSS3和DIV，通過學(xué)習(xí)均可快速掌握CSS3+DIV的設(shè)計方法和技巧。

 

前    言

　　“網(wǎng)站開發(fā)案例課堂”系列圖書是專門為網(wǎng)頁設(shè)計初學(xué)者量身定制的一套學(xué)習(xí)用書。整套書具有以下特點。

前沿科技

　　無論是網(wǎng)站建設(shè)、數(shù)據(jù)庫設(shè)計還是HTML5、CSS3，我們都精選較為前沿或者用戶群較大的領(lǐng)域推進(jìn)，幫助大家認(rèn)識和了解最新動態(tài)。

權(quán)威的作者團(tuán)隊

　　組織國家重點實驗室和資深應(yīng)用專家聯(lián)手編著該套圖書，編者具有豐富的教學(xué)經(jīng)驗與優(yōu)秀的管理理念。

學(xué)習(xí)型案例設(shè)計

　　以技術(shù)的實際應(yīng)用過程為主線，全程采用圖解和同步多媒體結(jié)合的教學(xué)方式，生動、直觀、全面地剖析使用過程中的各種應(yīng)用技能，降低難度，提升學(xué)習(xí)效率。

為什么要寫這樣一本書

　　隨著用戶對頁面體驗要求的提高，頁面前端技術(shù)日趨重要。CSS+DIV技術(shù)成熟，在前端技術(shù)中凸顯優(yōu)勢，在各大瀏覽器廠商的支持下，將會更加盛行，因此本書致力于幫助讀者掌握目前流行的最新前端技術(shù)，使前端從外觀上變得更炫、技術(shù)上更簡易。通過本書的案例實訓(xùn)，讀者可以很快地掌握流行的工具，提高職業(yè)化能力，從而幫助解決公司與求職者的雙重需求問題。

本書特色

零基礎(chǔ)、入門級的講解

　　無論您是否從事計算機相關(guān)行業(yè)，無論您是否接觸過網(wǎng)頁制作和設(shè)計，都能從本書中找到最佳起點。

超多、實用、專業(yè)的范例和項目

　　本書在編排上緊密結(jié)合深入學(xué)習(xí)網(wǎng)頁制作技術(shù)的先后過程，從基本概念開始，引導(dǎo)讀者逐步深入地學(xué)習(xí)各種應(yīng)用技巧；側(cè)重實戰(zhàn)技能，使用簡單易懂的實際案例進(jìn)行分析和操作指導(dǎo)，讓讀者讀起來簡明輕松，操作起來有章可循。

隨時檢測自己的學(xué)習(xí)成果

　　大部分章節(jié)最后的“跟我練練手”版塊，均根據(jù)本章內(nèi)容精選而成，讀者可以隨時檢測自己的學(xué)習(xí)成果和實戰(zhàn)能力，做到融會貫通。

細(xì)致入微、貼心提示

　　本書在講解過程中，在各章使用了“注意”“提示”“技巧”等小貼士，使讀者在學(xué)習(xí)過程中更清楚地了解相關(guān)操作和概念，并輕松掌握各種操作技巧。

技術(shù)支持

　　您在學(xué)習(xí)過程中遇到任何問題，可加入QQ群(案例課堂VIP)進(jìn)行提問，專業(yè)人員會在線答疑。

超值資源大放送

全程同步教學(xué)錄像

　　涵蓋本書所有知識點，詳細(xì)講解每個實例及項目的過程與技術(shù)關(guān)鍵點。讀者可更輕松地掌握書中所有的網(wǎng)頁制作和設(shè)計知識，而且擴(kuò)展的講解部分可使讀者得到比書中更多的收獲。

超多容量王牌資源

　　贈送大量王牌資源，包括實例源代碼、教學(xué)幻燈片、本書精品教學(xué)視頻、88個實用類網(wǎng)頁模板、12部網(wǎng)頁開發(fā)必備參考手冊、HTML5標(biāo)簽速查手冊、精選的JavaScript實例、CSS3屬性速查表、JavaScript函數(shù)速查手冊、CSS+DIV布局賞析案例、精彩網(wǎng)站配色方案賞析、網(wǎng)頁樣式與布局案例賞析、Web前端工程師常見面試題等。讀者可以通過QQ群(案例課堂VIP)獲取贈送資源。

讀者對象

沒有任何網(wǎng)頁設(shè)計基礎(chǔ)的初學(xué)者。

有一定的基礎(chǔ)，想精通網(wǎng)頁制作和設(shè)計的人員。

有一定的基礎(chǔ)，沒有項目經(jīng)驗的人員。

正在進(jìn)行畢業(yè)設(shè)計的學(xué)生。

大專院校及培訓(xùn)學(xué)校的老師和學(xué)生。

創(chuàng)作團(tuán)隊

　　本書由劉春茂編著，參加編寫的人員還有劉玉萍、張金偉、蒲娟、周佳、付紅、李園、郭廣新、侯永崗、王攀登、劉海松、孫若淞、王月嬌、包慧利、陳偉光、胡同夫、王偉、展娜娜、李琪、梁云梁和周浩浩。在編寫過程中，我們盡所能地將最好的講解呈現(xiàn)給讀者，但也難免有疏漏和不妥之處，敬請不吝指正。

　　

　　

　　                                                      編  者  

目    錄

第Ⅰ篇  基 礎(chǔ) 知 識

第1章  網(wǎng)頁設(shè)計的必備技能 3

1.1  認(rèn)識網(wǎng)頁和網(wǎng)站 4

1.1.1  什么是網(wǎng)頁 4

1.1.2  什么是網(wǎng)站 4

1.2  網(wǎng)頁中需要包含的要素 5

1.2.1  需要HTML文件 5

1.2.2  需要DIV層 5

1.2.3  需要CSS定義網(wǎng)頁樣式 6

1.2.4  需要JavaScript設(shè)置網(wǎng)頁動畫 6

1.2.5  需要域名與服務(wù)器空間 7

1.3  一個簡單網(wǎng)頁的基本構(gòu)成 7

1.3.1  Head部分 8

1.3.2  Body部分 8

1.3.3  注釋部分 8

1.4  設(shè)計網(wǎng)頁的總體流程 9

1.4.1  網(wǎng)頁規(guī)劃 9

1.4.2  搜集資料 9

1.4.3  設(shè)計網(wǎng)頁的總體效果 10

1.4.4  制作網(wǎng)頁素材文件 11

1.4.5  搭建網(wǎng)頁DIV層 12

1.4.6  使用CSS與JavaScript 12

1.4.7  測試網(wǎng)頁 13

1.5  網(wǎng)站的種類與網(wǎng)頁布局方式 14

1.5.1  網(wǎng)站的種類 14

1.5.2  網(wǎng)頁布局方式 15

1.6  在Photoshop中構(gòu)建網(wǎng)頁結(jié)構(gòu) 16

1.7  大神解惑 18

1.8  跟我練練手 18

第2章  CSS樣式入門 19

2.1  認(rèn)識CSS 20

2.1.1  CSS功能 20

2.1.2  瀏覽器與CSS 20

2.1.3  CSS發(fā)展歷史 21

2.2  CSS常用單位 21

2.2.1  顏色單位 21

2.2.2  長度單位 25

2.3  編輯和瀏覽CSS 26

2.3.1  案例1——手工編寫CSS 26

2.3.2  案例2——使用Dreamweaver編寫CSS 27

2.4  在HTML中調(diào)用CSS的方法 28

2.4.1  案例3——行內(nèi)樣式 28

2.4.2  案例4——內(nèi)嵌樣式 29

2.4.3  案例5——鏈接樣式 31

2.4.4  案例6——導(dǎo)入樣式 32

2.5  調(diào)用CSS方法的優(yōu)先級問題 33

2.5.1  案例7——行內(nèi)樣式和內(nèi)嵌樣式比較 33

2.5.2  案例8——內(nèi)嵌樣式和鏈接樣式比較 34

2.5.3  案例9——鏈接樣式和導(dǎo)入樣式比較 34

2.6  綜合案例——制作產(chǎn)品銷售統(tǒng)計表 35

2.7  大神解惑 37

2.8  跟我練練手 37

第3章  CSS3樣式的基本語法 39

3.1  CSS基本語法 40

3.1.1  CSS構(gòu)造規(guī)則 40

3.1.2  CSS的注釋 40

3.2  CSS的常用選擇器 40

3.2.1  案例1——標(biāo)簽選擇器 41

3.2.2  案例2——類選擇器 41

3.2.3  案例3——ID選擇器 42

3.2.4  案例4——選擇器的聲明 43

3.3  綜合案例——制作炫彩網(wǎng)站Logo 44

3.4  大神解惑 46

3.5  跟我練練手 47

第II篇  核 心 技 術(shù)

第4章  設(shè)計網(wǎng)頁字體與段落樣式 51

4.1  美化字體樣式 52

4.1.1  案例1——控制字體類型 52

4.1.2  案例2——定義字體大小 53

4.1.3  案例3——定義字體風(fēng)格 54

4.1.4  案例4——控制文字的粗細(xì) 55

4.1.5  案例5——將小寫字母轉(zhuǎn)為大寫字母 56

4.1.6  案例6——設(shè)置字體的復(fù)合屬性 57

4.1.7  案例7——定義文字的顏色 58

4.2  CSS3中新增的文本高級樣式 59

4.2.1  案例8——添加文本的陰影效果 59

4.2.2  案例9——設(shè)置文本溢出效果 60

4.2.3  案例10——控制文本的換行 62

4.2.4  案例11——設(shè)置字體尺寸 63

4.3  通過CSS控制文本間距與對齊方式 64

4.3.1  案例12——設(shè)置單詞之間的間隔 64

4.3.2  案例13——設(shè)置字符之間的間隔 65

4.3.3  案例14——為文本添加下畫線、上畫線、刪除線 66

4.3.4  案例15——設(shè)置垂直對齊方式 66

4.3.5  案例16——轉(zhuǎn)換文本的大小寫 68

4.3.6  案例17——設(shè)置文本的水平對齊方式 69

4.3.7  案例18——設(shè)置文本的縮進(jìn)效果 71

4.3.8  案例19——設(shè)置文本的行高 71

4.3.9  案例20——文本的空白處理 72

4.3.10  案例21——文本的反排 73

4.4  綜合案例1——設(shè)置網(wǎng)頁標(biāo)題 75

4.5  綜合案例2——制作新聞頁面 76

4.6  大神解惑 77

4.7  跟我練練手 78

第5章  設(shè)計網(wǎng)頁圖片樣式 79

5.1  圖片縮放 80

5.1.1  案例1——通過描述標(biāo)記width和height縮放圖片 80

5.1.2  案例2——使用CSS3中的max-width和max-height縮放圖片 80

5.1.3  案例3——使用CSS3中的width和height縮放圖片 81

5.2  設(shè)置圖片的對齊方式 82

5.2.1  案例4——設(shè)置圖片橫向?qū)�齊 82

5.2.2  案例5——設(shè)置圖片縱向?qū)�齊 83

5.3  圖 文 混 排 84

5.3.1  案例6——設(shè)置文字環(huán)繞效果 84

5.3.2  案例7——設(shè)置圖片與文字的間距 85

5.4  綜合案例1——制作學(xué)校宣傳單 87

5.5  綜合案例2——制作簡單圖文混排網(wǎng)頁 89

5.6  大神解惑 90

5.7  跟我練練手 90

第6章  設(shè)計網(wǎng)頁背景與邊框樣式 91

6.1  設(shè)計網(wǎng)頁背景樣式 92

6.1.1  案例1——設(shè)置背景顏色 92

6.1.2  案例2——設(shè)置背景圖片 93

6.1.3  案例3——背景圖片重復(fù) 94

6.1.4  案例4——背景圖片顯示 95

6.1.5  案例5——設(shè)置背景圖片位置 97

6.2  CSS3中新增的控制網(wǎng)頁背景屬性 99

6.2.1  案例6——設(shè)置背景圖片大小 99

6.2.2  案例7——設(shè)置背景顯示區(qū)域 100

6.2.3  案例8——設(shè)置背景圖像裁剪區(qū)域 102

6.2.4  案例9——設(shè)置背景的復(fù)合屬性 103

6.3  設(shè)計邊框樣式 104

6.3.1  案例10——設(shè)置邊框樣式 104

6.3.2  案例11——設(shè)置邊框顏色 106

6.3.3  案例12——設(shè)置邊框線寬 107

6.3.4  案例13——設(shè)置邊框的復(fù)合屬性 109

6.4  CSS3中新增的邊框圓角效果 110

6.4.1  案例14——設(shè)置圓角邊框 110

6.4.2  案例15——指定兩個圓角半徑 111

6.4.3  案例16——繪制四個不同圓角邊框 112

6.4.4  案例17——繪制不同種類的邊框 114

6.5  CSS3中的漸變效果 115

6.5.1  案例18——線性漸變效果 116

6.5.2  案例19——徑向漸變效果 118

6.6  綜合案例1——制作簡單公司主頁 119

6.7  綜合案例2——制作簡單生活資訊主頁 122

6.8  大神解惑 124

6.9  跟我練練手 124

第7章  設(shè)計網(wǎng)頁超級鏈接和鼠標(biāo)樣式 125

7.1  使用CSS3美化超鏈接 126

7.1.1  案例1——改變超級鏈接基本樣式 126

7.1.2  案例2——設(shè)置帶有提示信息的超級鏈接 127

7.1.3  案例3——設(shè)置超級鏈接的背景圖 128

7.1.4  案例4——設(shè)置超級鏈接的按鈕效果 129

7.2  使用CSS3美化鼠標(biāo) 130

7.2.1  案例5——使用CSS3控制鼠標(biāo)箭頭 130

7.2.2  案例6——設(shè)置鼠標(biāo)變幻式超鏈接 132

7.2.3  案例7——設(shè)置網(wǎng)頁頁面滾動條 133

7.3  綜合案例1——圖片版本超級鏈接 135

7.4  綜合案例2——關(guān)于鼠標(biāo)特效案例 136

7.5  綜合案例3——制作一個簡單的導(dǎo)航欄 139

7.6  大神解惑 140

7.7  跟我練練手 141

第8章  設(shè)計表格和表單樣式 143

8.1  美化表格樣式 144

8.1.1  案例1——設(shè)置表格邊框樣式 144

8.1.2  案例2——設(shè)置表格邊框?qū)挾?span id="epizqqp1gsyu" class="Apple-tab-span" style="white-space:pre"> 146

8.1.3  案例3——設(shè)置表格邊框顏色 147

8.2  美化表單樣式 148

8.2.1  案例4——美化表單中的元素 148

8.2.2  案例5——美化提交按鈕 150

8.2.3  案例6——美化下拉菜單 151

8.3  綜合案例1——制作用戶登錄頁面 153

8.4  綜合案例2——制作用戶注冊頁面 155

8.5  大神解惑 157

8.6  跟我練練手 158

第9章  設(shè)計列表和菜單樣式 159

9.1   美化項目列表的樣式 160

9.1.1  案例1——美化無序列表 160

9.1.2  案例2——美化有序列表 161

9.1.3  案例3——美化自定義列表 163

9.1.4  案例4——制作圖片列表 164

9.1.5  案例5——縮進(jìn)圖片列表 165

9.1.6  案例6——列表復(fù)合屬性 166

9.2  使用CSS制作網(wǎng)頁菜單 168

9.2.1  案例7——制作動態(tài)導(dǎo)航菜單 168

9.2.2  案例8——制作水平和垂直菜單 170

9.3  綜合案例1——模擬SOSO導(dǎo)航欄 172

9.4  綜合案例2——將段落轉(zhuǎn)變成列表 175

9.5  大神解惑 177

9.6  跟我練練手 177

第10章  使用濾鏡美化網(wǎng)頁元素 179

10.1  濾鏡概述 180

10.2  設(shè)置基本濾鏡效果 181

10.2.1  案例1——高斯模糊(blur)濾鏡 181

10.2.2  案例2——明暗度(brightness)濾鏡 182

10.2.3  案例3——對比度(contrast)濾鏡 183

10.2.4  案例4——陰影(drop-shadow)濾鏡 184

10.2.5  案例5——灰度(grayscale)濾鏡 185

10.2.6  案例6——反相(invert)濾鏡 186

10.2.7  案例7——透明度(opacity)濾鏡 187

10.2.8  案例8——飽和度(saturate)濾鏡 188

10.2.9  案例9——深褐色(sepia)濾鏡 189

10.3  使用復(fù)合濾鏡效果 190

10.4  大神解惑 191

10.5  跟我練練手 191

第III篇  高 級 應(yīng) 用

第11章  CSS3的高級特性 195

11.1  復(fù)合選擇器 196

11.1.1  案例1——全局選擇器 196

11.1.2  案例2——交集選擇器 197

11.1.3  案例3——并集選擇器 197

11.1.4  案例4——繼承(后代)選擇器 198

11.2  CSS3新增的選擇器 199

11.2.1  案例5——屬性選擇器 199

11.2.2  案例6——結(jié)構(gòu)偽類選擇器 201

11.2.3  案例7——UI元素狀態(tài)偽類選擇器 202

11.2.4  案例8——偽類選擇器 204

11.3  CSS3的繼承特性 205

11.3.1  案例9——繼承關(guān)系 205

11.3.2  案例10——CSS繼承的運用 206

11.4  CSS3的層疊特性 207

11.4.1  案例11——同一選擇器被多次定義的處理 207

11.4.2  案例12——同一標(biāo)簽運用不同類型選擇器的處理 208

11.5  綜合案例——制作新聞菜單 209

11.6  大神解惑 212

11.7  跟我練練手 212

第12章  過渡和動畫效果 213

12.1  認(rèn)識過渡效果 214

12.2  案例1——添加過渡效果 214

12.3  了解動畫效果 217

12.4  案例2——添加動畫效果 218

12.5  大神解惑 219

12.6  跟我練練手 220

第13章  2D和3D變幻效果 221

13.1  認(rèn)識2D轉(zhuǎn)換效果 222

13.2  添加2D轉(zhuǎn)換效果 222

13.2.1  案例1——添加移動效果 222

13.2.2  案例2——添加旋轉(zhuǎn)效果 223

13.2.3  案例3——添加縮放效果 224

13.2.4  案例4——添加傾斜效果 225

13.2.5  案例5——添加綜合變幻效果 227

13.3  添加3D轉(zhuǎn)換效果 228

13.4  大神解惑 230

13.5  跟我練練手 230

第14章  CSS3和JavaScript的搭配應(yīng)用 231

14.1  JavaScript語法基礎(chǔ) 232

14.1.1  什么是JavaScript 232

14.1.2  數(shù)據(jù)類型 232

14.1.3  變量 234

14.1.4  案例1——運算符的簡單應(yīng)用 234

14.1.5  案例2——流程控制語句的簡單應(yīng)用 237

14.1.6  案例3——函數(shù)的簡單應(yīng)用 240

14.2  常見的JavaScript編寫工具 243

14.2.1  記事本編寫工具 243

14.2.2  Dreamweaver編寫工具 244

14.3  JavaScript在HTML中的使用 244

14.3.1  案例4——在HTML網(wǎng)頁頭中嵌入JavaScript代碼 245

14.3.2  案例5——在HTML網(wǎng)頁中嵌入JavaScript代碼 246

14.3.3  案例6——在HTML網(wǎng)頁的元素事件中嵌入JavaScript代碼 247

14.3.4  案例7——在HTML中調(diào)用已經(jīng)存在的JavaScript文件 248

14.3.5  案例8——通過JavaScript偽URL引入JavaScript腳本代碼 249

14.4  JavaScript與CSS3的結(jié)合使用 250

14.4.1  案例9——設(shè)置動態(tài)內(nèi)容 250

14.4.2  案例10——改變動態(tài)樣式 251

14.4.3  案例11——動態(tài)定位網(wǎng)頁元素 252

14.4.4  案例12——設(shè)置網(wǎng)頁元素的顯示與隱藏 254

14.5  HTML5、CSS3和JavaScript的搭配應(yīng)用 255

14.5.1  案例13——設(shè)定左右移動的圖片 256

14.5.2  案例14——制作顏色選擇器 258

14.5.3  案例15——制作跑馬燈效果 260

14.6  綜合案例——制作樹形導(dǎo)航菜單 262

14.7  大神解惑 267

14.8  跟我練練手 268

第15章  CSS與XML的綜合運用 269

15.1  XML語法基礎(chǔ) 270

15.1.1  實例1——XML的基本應(yīng)用 270

15.1.2  實例2——XML文檔的組成和聲明 271

15.1.3  實例3——XML元素介紹 272

15.2  使用CSS修飾XML文件 274

15.2.1  實例4——XML使用CSS 274

15.2.2  實例5——設(shè)置字體屬性 275

15.2.3  實例6——設(shè)置色彩屬性 276

15.2.4  實例7——設(shè)置邊框?qū)傩?span id="epizqqp1gsyu" class="Apple-tab-span" style="white-space:pre"> 277

15.2.5  實例8——設(shè)置文本屬性 278

15.3  綜合實例1——招聘廣告 279

15.4  綜合實例2——圖文混排頁面 281

15.5  綜合實例3——古詩欣賞 283

15.6  大神解惑 286

15.7  跟我練練手 286

第IV篇  網(wǎng) 頁 布 局

第16章  CSS定位與DIV 布局核心技術(shù) 289

16.1  認(rèn)識塊級元素和行內(nèi)級元素 290

16.1.1  案例1——塊級元素和行內(nèi)級元素的應(yīng)用 290

16.1.2  案例2——div元素和span元素的區(qū)別 292

16.2  盒子模型 292

16.2.1  盒子模型的概念 293

16.2.2  案例3——定義網(wǎng)頁border區(qū)域 293

16.2.3  案例4——定義網(wǎng)頁padding區(qū)域 295

16.2.4  案例5——定義網(wǎng)頁margin區(qū)域 296

16.3  彈性盒模型 299

16.3.1  案例6——定義盒子布局方向(box-orient) 300

16.3.2  案例7——定義盒子布局順序(box-direction) 301

16.3.3  案例8——定義盒子布局位置(box-ordinal-group) 303

16.3.4  案例9——定義盒子彈性空間(box-flex) 304

16.3.5  案例10——管理盒子空間(box-pack和box-align) 306

16.3.6  案例11——盒子空間的溢出管理(box-lines) 307

16.4  綜合案例1——圖文排版效果 308

16.5  綜合案例2——淘寶導(dǎo)購菜單 310

16.6  大神解惑 313

16.7  跟我練練手 314

第17章  CSS+DIV盒子的浮動與定位 315

17.1  定義DIV 316

17.1.1  什么是DIV 316

17.1.2  案例1——創(chuàng)建DIV 316

17.2  盒子的定位 317

17.2.1  案例2——靜態(tài)定位 317

17.2.2  案例3——相對定位 318

17.2.3  案例4——絕對定位 319

17.2.4  案例5——固定定位 320

17.2.5  案例6——盒子的浮動 321

17.3  其他CSS布局定位方式 323

17.3.1  案例7——溢出(overflow)定位 323

17.3.2  案例8——隱藏(visibility)定位 325

17.3.3  案例9——z-index空間定位 327

17.4  新增CSS3多列布局 328

17.4.1  案例10——設(shè)置列寬度 328

17.4.2  案例11——設(shè)置列數(shù) 330

17.4.3  案例12——設(shè)置列間距 331

17.4.4  案例13——設(shè)置列邊框樣式 332

17.5  綜合案例1——定位網(wǎng)頁布局樣式 334

17.6  綜合案例2——制作陰影文字效果 337

17.7  大神解惑 338

17.8  跟我練練手 338

第18章  固定寬度網(wǎng)頁布局剖析與制作 339

18.1  CSS排版的觀念 340

18.1.1  將頁面用div分塊 340

18.1.2  設(shè)置各塊位置 340

18.1.3  案例1——用CSS定位 341

18.2  固定寬度網(wǎng)頁剖析與布局 344

18.2.1  案例2——網(wǎng)頁單列布局模式 344

18.2.2  案例3——網(wǎng)頁“1-2-1”型布局模式 348

18.2.3  案例4——網(wǎng)頁“1-3-1”型布局模式 350

18.3  大神解惑 354

18.4  跟我練練手 354

第19章  自動縮放網(wǎng)頁布局剖析與制作 355

19.1  自動縮放網(wǎng)頁“1-2-1”型布局模式 356

19.1.1  案例1——“1-2-1”等比例變寬布局 356

19.1.2  案例2——“1-2-1”單列變寬布局 357

19.2  自動縮放網(wǎng)頁“1-3-1”型布局模式 358

19.2.1  “1-3-1”三列寬度等比例布局 358

19.2.2  案例3——“1-3-1”單側(cè)列寬度固定的變寬布局 358

19.2.3  案例4——“1-3-1”中間列寬度固定的變寬布局 361

19.2.4  案例5——“1-3-1”雙側(cè)列寬度固定的變寬布局 365

19.2.5  案例6——“1-3-1”中列和左側(cè)列寬度固定的變寬布局 368

19.3  分列布局背景色的使用 371

19.3.1  案例7——設(shè)置固定寬度布局的列背景色 372

19.3.2  案例8——設(shè)置特殊寬度變化布局的列背景色 373

19.4  綜合案例1——單列寬度變化布局 374

19.5  綜合案例2——多列等比例寬度變化布局 376

19.6  大神解惑 378

19.7  跟我練練手 378

第20章  創(chuàng)建響應(yīng)式頁面 379

20.1  了解彈性盒子 380

20.2  案例1——使用彈性盒子 380

20.3  案例2——設(shè)置彈性子元素的位置 383

20.4  案例3——設(shè)置彈性子元素的橫向?qū)�齊方式 384

20.5  案例4——設(shè)置彈性子元素的縱向?qū)�齊方式 389

20.6  案例5——設(shè)置彈性子元素的換行方式 390

20.7  綜合案例——使用彈性盒子創(chuàng)建響應(yīng)式頁面 393

20.8  大神解惑 395

20.9  跟我練練手 396

第V篇  項目案例實戰(zhàn)

第21章  設(shè)計商業(yè)門戶類網(wǎng)頁 399

21.1  整體設(shè)計 400

21.1.1  顏色應(yīng)用分析 400

21.1.2  架構(gòu)布局分析 400

21.2  主要模塊設(shè)計 401

21.2.1  網(wǎng)頁整體樣式插入 401

21.2.2  網(wǎng)頁局部樣式 403

21.2.3  頂部模塊樣式代碼分析 410

21.2.4  中間主體代碼分析 411

21.2.5  底部模塊分析 414

21.3  網(wǎng)站調(diào)整 415

21.3.1  部分內(nèi)容調(diào)整 415

21.3.2  模塊調(diào)整 415

21.3.3  調(diào)整后預(yù)覽測試 417

第22章  設(shè)計圖像影音類網(wǎng)頁 419

22.1  整體設(shè)計 420

22.1.1  顏色應(yīng)用分析 420

22.1.2  架構(gòu)布局分析 421

22.2  主要模塊設(shè)計 422

22.2.1  樣式代碼分析 422

22.2.2  頂部模塊樣式代碼分析 425

22.2.3  網(wǎng)站主體模塊代碼分析 427

22.2.4  底部模塊分析 430

22.3  網(wǎng)站調(diào)整 431

22.3.1  部分內(nèi)容調(diào)整 431

22.3.2  模塊調(diào)整 432

22.3.3  調(diào)整后預(yù)覽測試 435

第23章  設(shè)計娛樂休閑類網(wǎng)頁 437

23.1  整體設(shè)計 438

23.1.1  應(yīng)用設(shè)計分析 438

23.1.2  架構(gòu)布局分析 439

23.2  主要模塊設(shè)計 440

23.2.1  網(wǎng)頁整體樣式插入 440

23.2.2  頂部模塊代碼分析 441

23.2.3  視頻模塊代碼分析 442

23.2.4  評論模塊代碼分析 443

23.2.5  熱門推薦模塊代碼分析 444

23.2.6  底部模塊分析 446

23.3  網(wǎng)頁調(diào)整 446

23.3.1  部分內(nèi)容調(diào)整 446

23.3.2  調(diào)整后預(yù)覽測試 448

第24章  設(shè)計企業(yè)門戶類網(wǎng)頁 449

24.1  構(gòu)思布局 450

24.1.1  設(shè)計分析 450

24.1.2  排版架構(gòu) 450

24.2  主要模塊設(shè)計 451

24.2.1  Logo與導(dǎo)航菜單 451

24.2.2  Banner區(qū) 452

24.2.3  資訊區(qū) 453

24.2.4  版權(quán)信息 455

第25章  設(shè)計在線購物類網(wǎng)頁 457

25.1  整體布局 458

25.1.1  設(shè)計分析 458

25.1.2  排版架構(gòu) 458

25.2  主要模塊設(shè)計 459

25.2.1  Logo與導(dǎo)航區(qū) 459

25.2.2  Banner與資訊區(qū) 460

25.2.3  產(chǎn)品類別區(qū)域 462

25.2.4  頁腳區(qū)域 463