內容簡介

本書以零基礎講解為宗旨，用實例引導讀者深入學習，采取【基礎入門→核心技術→網頁布局→高級技能→綜合案例】的講解模式，深入淺出地講解CSS3的各項技術及實戰技能。

本書第1篇主要講解CSS樣式入門、CSS3樣式的基本語法、CSS3的高級特性等；第2篇主要講解控制網頁字體與段落樣式、控制網頁圖片樣式、控制網頁背景與邊框樣式、美化網頁超鏈接和鼠標、控制表格和表單樣式、控制列表和菜單樣式、使用濾鏡美化網頁元素等；第3篇主要講解CSS定位與DIV布局核心技術、CSS+DIV盒子的浮動與定位、固定寬度網頁布局剖析與制作、自動縮放網頁布局剖析與制作等；第4篇主要講解過渡和動畫效果、2D和3D變幻效果、創建響應式頁面等；第5篇主要講解設計商業門戶類網頁、設計在線購物類網頁、設計企業門戶類網頁、設計娛樂休閑類網頁、設計圖像影音類網頁。

本書適合任何想學習CSS網頁設計與布局的人員，無論您是否從事計算機相關行業，無論您是否接觸過CSS3，通過學習均可快速掌握CSS3的設計方法和技巧。

前    言

　　“網站開發案例課堂”系列圖書是專門為網站開發和數據庫初學者量身定做的一套學習用書，由劉玉紅策劃、千谷高新教育的高級講師編著，整套書涵蓋網站開發、數據庫設計等方面。整套書具有以下特點。

前沿科技

　　無論是網站建設、數據庫設計還是HTML5、CSS3，我們都精選較為前沿或者用戶群最大的領域推進，幫助大家認識和了解最新動態。

權威的作者團隊

　　組織國家重點實驗室和資深應用專家聯手編著該套圖書，融合豐富的教學經驗與優秀的管理理念。

學習型案例設計

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

為什么要寫這樣一本書

　　伴隨著Web 2.0的盛行，傳統的表格布局模式正逐漸被網頁標準化CSS3+DIV的設計方式取代，對最新CSS3的學習也成為網頁設計師的必修功課。對此，本書針對想學習網頁樣式與布局的初學者，快速讓初學者入門后提高實戰水平，很快地上手設計網頁，提高職業化能力。

本書特色

* 零基礎、入門級的講解。

　　無論您是否從事計算機相關行業，無論您是否接觸過CSS3，都能從本書中找到最佳起點。

* 超多、實用、專業的范例和項目。

　　本書在編排上緊密結合深入學習CSS3技術的先后過程，從CSS3的基本概念開始，帶領大家逐步深入地學習各種應用技巧，側重實戰技能，使用簡單易懂的實際案例進行分析和操作指導，讓讀者讀起來簡明輕松，操作起來有章可循。

* 隨時檢測自己的學習成果。

　　每章首頁均提供了學習目標，以指導讀者重點學習及學后檢查。

　　每章最后的“跟我練練手”板塊均根據本章內容精選而成，讀者可以隨時檢測自己的學習成果和實戰能力，做到融會貫通。

* 細致入微、貼心提示。

　　本書在講解過程中，在各章中使用了“注意”“提示”“技巧”等小欄目，使讀者在學習過程中更清楚地了解相關操作、理解相關概念，并輕松掌握各種操作技巧。

* 專業創作團隊和技術支持。

　　本書由千谷高新教育中心編著和提供技術支持。

　　您在學習過程中遇到任何問題，可加入QQ群：389543972進行提問，專家人員會在線答疑。

超值光盤

* 全程同步教學錄像。

　　涵蓋本書所有知識點，詳細講解每個實例及項目的過程及技術關鍵點。比看書更輕松地掌握書中所有的CSS3網頁設計知識，而且擴展的講解部分使您得到比書中更多的收獲。

* 超多容量王牌資源大放送。

　　贈送大量王牌資源，包括本書實例源代碼、教學幻燈片、本書精品教學視頻、88個實用類網頁模版、精選的JavaScript實例、HTML5標簽速查手冊、CSS3屬性速查表、JavaScript函數速查手冊、CSS+DIV布局賞析案例、精彩網站配色方案賞析、網頁樣式與布局案例賞析、Web前端工程師常見面試題等。

讀者對象

* 沒有任何CSS3基礎的初學者。

* 有一定的CSS3基礎，想精通CSS3的人員。

* 有一定的CSS3基礎，沒有項目經驗的人員。

* 正在進行畢業設計的學生。

* 大專院校及培訓學校的老師和學生。

創作團隊

　　本書由劉玉紅和蒲娟編著，參加編寫的人員還有劉玉萍、周佳、付紅、李園、郭廣新、侯永崗、王攀登、劉海松、孫若淞、王月嬌、包慧利、陳偉光、胡同夫、王偉、展娜娜、梁云梁和周浩浩。

　　在編寫過程中，我們竭盡所能地將最好的講解呈現給讀者，但也難免有疏漏之處，敬請不吝指正。若您在學習中遇到任何困難或疑問，或有何建議，可寫信至信箱357975357@qq.com。

　　

　　

 

　　                                                      編  者  

目    錄

第1篇  基 礎 入 門

 

第1章  CSS樣式入門 3

1.1  認識CSS 4

1.1.1  CSS的功能 4

1.1.2  瀏覽器與CSS 4

1.1.3  CSS的發展歷史 5

1.2  CSS常用單位 5

1.2.1  顏色單位 5

1.2.2  長度單位 9

1.3  編輯和瀏覽CSS 10

1.3.1  手工編寫CSS 10

1.3.2  使用Dreamweaver編寫CSS 11

1.4  在HTML中調用CSS的方法 13

1.4.1  行內樣式 13

1.4.2  內嵌樣式 14

1.4.3  鏈接樣式 15

1.4.4  導入樣式 16

1.5  調用方法的優先級 17

1.5.1  行內樣式和內嵌樣式的比較 18

1.5.2  內嵌樣式和鏈接樣式的比較 18

1.5.3  鏈接樣式和導入樣式的比較 19

1.6  綜合案例——制作產品銷售統計表 20

1.7  大神解惑 22

1.8  跟我練練手 22

第2章  CSS3樣式的基本語法 23

2.1  CSS基礎語法 24

2.1.1  CSS構造規則 24

2.1.2  CSS的注釋 24

2.2  CSS的常用選擇器 25

2.2.1  標簽選擇器 25

2.2.2  類選擇器 26

2.2.3  ID選擇器 27

2.2.4  選擇器的聲明 27

2.3  綜合案例——制作炫彩網站Logo 28

2.4  大神解惑 31

2.5  跟我練練手 31

第3章  CSS3的高級特性 33

3.1  復合選擇器 34

3.1.1  全局選擇器 34

3.1.2  交集選擇器 35

3.1.3  并集選擇器 35

3.1.4  繼承選擇器 36

3.2  CSS3新增的選擇器 37

3.2.1  屬性選擇器 37

3.2.2  結構偽類選擇器 39

3.2.3  UI元素狀態偽類選擇器 40

3.2.4  偽類選擇器 42

3.3  CSS的繼承特性 43

3.3.1  繼承關系 43

3.3.2  CSS繼承的運用 44

3.4  CSS的層疊特性 45

3.4.1  同一選擇器被多次定義的

處理 45

3.4.2  同一標簽運用不同類型選擇器

的處理 46

3.5  綜合案例——制作新聞菜單 47

3.6  大神解惑 49

3.7  跟我練練手 50

 

　　

　　

　　

　　

　　

　　

　　

　　

第II篇  核 心 技 術

 

第4章  使用CSS3控制網頁字體

與段落樣式 53

4.1  通過CSS控制字體樣式 54

4.1.1  控制字體類型 54

4.1.2  定義字體大小 55

4.1.3  定義字體風格 56

4.1.4  控制文字的粗細 57

4.1.5  將小寫字母轉換為大寫字母 58

4.1.6  設置字體的復合屬性 59

4.1.7  定義文字的顏色 59

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

4.2.1  添加文本的陰影效果 61

4.2.2  設置文本溢出效果 62

4.2.3  控制文本的換行 63

4.2.4  設置字體尺寸 64

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

4.3.1  設置單詞之間的間隔 65

4.3.2  設置字符之間的間隔 66

4.3.3  為文本添加下劃線、上劃線、

刪除線 67

4.3.4  設置垂直對齊方式 68

4.3.5  轉換文本的大小寫 69

4.3.6  設置文本的水平對齊方式 70

4.3.7  設置文本的縮進效果 72

4.3.8  設置文本的行高 73

4.3.9  文本的空白處理 74

4.3.10  文本的反排 75

4.4  綜合案例1——設置網頁標題 76

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

4.6  大神解惑 79

4.7  跟我練練手 80

第5章  使用CSS控制網頁圖片樣式 81

5.1  圖片縮放 82

5.1.1  通過描述標記width和height

縮放圖片 82

5.1.2  使用CSS3中的max-width和

max-height縮放圖片 82

5.1.3  使用CSS3中的width和height

縮放圖片 83

5.2  設置圖片的對齊方式 84

5.2.1  設置圖片橫向對齊 84

5.2.2  設置圖片縱向對齊 85

5.3  圖文混排 87

5.3.1  設置文字環繞效果 87

5.3.2  設置圖片與文字的間距 88

5.4  綜合案例1——制作學校宣傳單 90

5.5  綜合案例2——制作簡單圖文混排

網頁 92

5.6  大神解惑 94

5.7  跟我練練手 94

第6章  使用CSS控制網頁背景

與邊框樣式 95

6.1  使用CSS控制網頁背景 96

6.1.1  設置背景顏色 96

6.1.2  設置背景圖片 97

6.1.3  背景圖片重復 98

6.1.4  背景圖片顯示 100

6.1.5  背景圖片位置 101

6.2  CSS3中新增控制網頁背景屬性 102

6.2.1  背景圖片大小 102

6.2.2  背景顯示區域 104

6.2.3  背景圖片裁剪區域 105

6.2.4  背景復合屬性 107

6.3  使用CSS控制邊框樣式 108

6.3.1  設置邊框樣式 108

6.3.2  設置邊框顏色 109

6.3.3  設置邊框線寬 110

6.3.4  設置邊框復合屬性 112

6.4  CSS3中新增邊框圓角效果 113

6.4.1  設置圓角邊框 113

6.4.2  指定兩個圓角半徑 114

6.4.3  繪制4個不同圓角邊框 115

6.4.4  繪制不同種類的邊框 117

6.5  CSS3中的漸變效果 119

6.5.1  線性漸變效果 119

6.5.2  徑向漸變效果 121

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

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

主頁 126

6.8  大神解惑 127

6.9  跟我練練手 128

第7章  使用CSS3美化網頁瀏覽

效果 129

7.1  使用CSS3美化超鏈接 130

7.1.1  改變超級鏈接基本樣式 130

7.1.2  設置帶有提示信息的超級

鏈接 131

7.1.3  設置超級鏈接的背景圖 132

7.1.4  設置超級鏈接的按鈕效果 133

7.2  使用CSS3美化鼠標特效 134

7.2.1  使用CSS3控制鼠標箭頭 134

7.2.2  設置鼠標變幻式超鏈接 135

7.2.3  設置網頁頁面滾動條 136

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

7.4  綜合案例2——鼠標特效 140

7.5  綜合案例3——制作一個簡單的

導航欄 142

7.6  大神解惑 144

7.7  跟我練練手 144

第8章  使用CSS控制表格

和表單樣式 145

8.1  美化表格樣式 146

8.1.1  設置表格邊框樣式 146

8.1.2  設置表格邊框寬度 148

8.1.3  設置表格邊框顏色 149

8.2  美化表單樣式 150

8.2.1  美化表單中的元素 150

8.2.2  美化提交按鈕 152

8.2.3  美化下拉菜單 153

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

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

8.5  大神解惑 159

8.6  跟我練練手 159

第9章  控制列表和菜單樣式 161

9.1   美化項目列表的樣式 162

9.1.1  美化無序列表 162

9.1.2  美化有序列表 163

9.1.3  美化自定義列表 165

9.1.4  制作圖片列表 166

9.1.5  縮進圖片列表 167

9.1.6  列表復合屬性 168

9.2  使用CSS制作網頁菜單 169

9.2.1  制作無須表格的菜單 169

9.2.2  制作水平和垂直菜單 171

9.3  綜合案例1——模擬soso導航欄 173

9.4  綜合案例2——將段落轉變成列表 177

9.5  大神解惑 178

9.6  跟我練練手 178

第10章  使用濾鏡美化網頁元素 179

10.1  濾鏡概述 180

10.2  設置基本濾鏡效果 181

10.2.1  高斯模糊濾鏡 181

10.2.2  明暗度濾鏡 182

10.2.3  對比度濾鏡 183

10.2.4  陰影濾鏡 184

10.2.5  灰度濾鏡 185

10.2.6  反相濾鏡 186

10.2.7  透明度濾鏡 187

10.2.8  飽和度濾鏡 188

10.2.9  深褐色濾鏡 189

10.3  使用復合濾鏡效果 190

10.4  大神解惑 191

10.5  跟我練練手 192

 

　　

　　

　　

第III篇  網 頁 布 局

 

第11章  CSS定位與DIV布局核心

 技術 195

11.1  了解塊級元素和行內級元素 196

11.1.1  塊級元素和行內級元素的

 應用 196

11.1.2  div元素和span元素的區別 198

11.2  盒子模型 198

11.2.1  盒子模型的概念 198

11.2.2  定義網頁border區域 199

11.2.3  定義網頁padding區域 200

11.2.4  定義網頁margin區域 201

11.3  彈性盒模型 204

11.3.1  定義盒子布局方向 205

11.3.2  定義盒子布局順序 206

11.3.3  定義盒子布局位置 208

11.3.4  定義盒子彈性空間 209

11.3.5  管理盒子空間 211

11.3.6  盒子空間的溢出管理 213

11.4  綜合案例1——圖文排版效果 214

11.5  綜合案例2——淘寶導購菜單 217

11.6  大神解惑 219

11.7  跟我練練手 220

第12章  CSS+DIV盒子的浮動

 與定位 221

12.1  定義DIV 222

12.1.1  什么是DIV 222

12.1.2  創建DIV 222

12.2  盒子的定位 223

12.2.1  靜態定位 223

12.2.2  相對定位 224

12.2.3  絕對定位 225

12.2.4  固定定位 226

12.2.5  盒子的浮動 227

12.3  其他CSS布局定位方式 229

12.3.1  溢出定位 229

12.3.2  隱藏定位 231

12.3.3  z-index空間定位 233

12.4  新增CSS3多列布局 234

12.4.1  設置列寬度 234

12.4.2  設置列數 236

12.4.3  設置列間距 237

12.4.4  設置列邊框樣式 238

12.5  綜合案例1——定位網頁布局樣式 240

12.6  綜合案例2——制作陰影文字效果 243

12.7  大神解惑 244

12.8  跟我練練手 244

第13章  固定寬度網頁布局剖析

 與制作 245

13.1  CSS排版觀念 246

13.1.1  將頁面用div分塊 246

13.1.2  設置各塊位置 246

13.1.3  用CSS定位 247

13.2  固定寬度網頁剖析與布局 250

13.2.1  網頁單列布局模式 250

13.2.2  網頁1-2-1型布局模式 254

13.2.3  網頁1-3-1型布局模式 258

13.3  大神解惑 261

13.4  跟我練練手 262

第14章  自動縮放網頁布局剖析

 與制作 263

14.1  自動縮放網頁1-2-1型布局模式 264

14.1.1  “1-2-1”等比例變寬布局 264

14.1.2  “1-2-1”單列變寬布局 265

14.2  自動縮放網頁1-3-1型布局模式 266

14.2.1  “1-3-1”三列寬度等比例

 布局 266

14.2.2  “1-3-1”單側列寬度固定的

 變寬布局 266

14.2.3  “1-3-1”中間列寬度固定的

 變寬布局 270

14.2.4  “1-3-1”雙側列寬度固定的

 變寬布局 273

14.2.5  “1-3-1”中列和左側列寬度

 固定的變寬布局 277

14.3  分列布局背景色的使用 280

14.3.1  設置固定寬度布局的列

 背景色 280

14.3.2  設置特殊寬度變化布局的列

 背景色 282

14.4  綜合案例1——單列寬度變化布局 284

14.5  綜合案例2——多列等比例寬度變化

 布局 285

14.6  大神解惑 288

14.7  跟我練練手 288

　　

 

　　

第IV篇  高 級 技 能

 

第15章  過渡和動畫效果 291

15.1  了解過渡效果 292

15.2  添加過渡效果 292

15.3  了解動畫效果 295

15.4  添加動畫效果 296

15.5  大神解惑 297

15.6  跟我練練手 298

第16章  2D和3D效果 299

16.1  了解2D轉換效果 300

16.2  添加2D轉換效果 300

16.2.1  添加2D移動效果 300

16.2.2  添加2D旋轉效果 301

16.2.3  添加2D縮放效果 302

16.2.4  添加2D傾斜效果 303

16.2.5  添加綜合變幻效果 304

16.3  添加3D轉換效果 305

16.4  大神解惑 308

16.5  跟我練練手 308

第17章  創建響應式頁面 309

17.1  了解彈性盒子 310

17.2  使用彈性盒子 310

17.3  設置彈性子元素的位置 313

17.4  設置彈性子元素的橫向對齊方式 314

17.5  設置彈性子元素的縱向對齊方式 319

17.6  設置彈性子元素的換行方式 321

17.7  綜合案例——使用彈性盒子創建

 響應式頁面 323

17.8  大神解惑 325

17.9  跟我練練手 326

 

　　

第V篇  綜 合 案 例

 

第18章  商業門戶類網站賞析 329

18.1  整體設計 330

18.1.1  顏色應用分析 330

18.1.2  架構布局分析 331

18.2  主要模塊設計 331

18.2.1  網頁整體樣式插入 331

18.2.2  網頁局部樣式 333

18.2.3  頂部模塊樣式代碼分析 340

18.2.4  中間主體代碼分析 341

18.2.5  底部模塊分析 344

18.3  網站調整 345

18.3.1  部分內容調整 345

18.3.2  模塊調整 345

18.3.3  調整后預覽測試 347

第19章  設計在線購物類網頁 349

19.1  整體布局 350

19.1.1  設計分析 350

19.1.2  排版架構 350

19.2  主要模塊設計 351

19.2.1  Logo與導航區 351

19.2.2  Banner與資訊區 353

19.2.3  產品類別區域 354

19.2.4  頁腳區域 355

第20章  設計企業門戶類網頁 357

20.1  構思布局 358

20.1.1  設計分析 358

20.1.2  排版架構 358

20.2  主要模塊設計 359

20.2.1  Logo與導航菜單 359

20.2.2  Banner區 360

20.2.3  資訊區 361

20.2.4  版權信息 363

第21章  設計娛樂休閑類網頁 365

21.1  整體設計 366

21.1.1  應用設計分析 366

21.1.2  架構布局分析 367

21.2  主要模塊設計 368

21.2.1  網頁整體樣式插入 368

21.2.2  頂部模塊代碼分析 369

21.2.3  視頻模塊代碼分析 370

21.2.4  評論模塊代碼分析 371

21.2.5  熱門推薦模塊代碼分析 373

21.2.6  底部模塊分析 375

21.3  網頁調整 376

21.3.1  部分內容調整 376

21.3.2  調整后預覽測試 377

第22章  設計圖像影音類網頁 379

22.1  整體設計 380

22.1.1  顏色應用分析 380

22.1.2  架構布局分析 381

22.2  主要模塊設計 382

22.2.1  樣式代碼分析 382

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

22.2.3  網站主體模塊代碼分析 387

22.2.4  底部模塊分析 391

22.3  網站調整 392

22.3.1  部分內容調整 392

22.3.2  模塊調整 392

22.3.3  調整后預覽測試 395