CSS3+DIV網(wǎng)頁(yè)樣式與布局案例課堂（第2版 網(wǎng)站開發(fā)案例課堂）

第Ⅰ篇  基 礎(chǔ) 知 識(shí)

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

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

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

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

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

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

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

1.7  大神解惑 18

1.8  跟我練練手 18

第2章  CSS樣式入門 19

2.1  認(rèn)識(shí)CSS 20

2.2  CSS常用單位 21

2.3  編輯和瀏覽CSS 26

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

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

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

2.7  大神解惑 37

2.8  跟我練練手 37

第3章  CSS3樣式的基本語(yǔ)法 39

3.1  CSS基本語(yǔ)法 40

3.2  CSS的常用選擇器 40

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

3.4  大神解惑 46

3.5  跟我練練手 47

第II篇  核 心 技 術(shù)

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

4.1  美化字體樣式 52

4.2  CSS3中新增的文本高級(jí)樣式 59

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

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

4.5  綜合案例2——制作新聞頁(yè)面 76

4.6  大神解惑 77

4.7  跟我練練手 78

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

5.1  圖片縮放 80

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

5.3  圖 文 混 排 84

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

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

5.6  大神解惑 90

5.7  跟我練練手 90

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

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

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

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

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

6.5  CSS3中的漸變效果 115

6.6  綜合案例1——制作簡(jiǎn)單公司主頁(yè) 119

6.7  綜合案例2——制作簡(jiǎn)單生活資訊主頁(yè) 122

6.8  大神解惑 124

6.9  跟我練練手 124

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

7.1  使用CSS3美化超鏈接 126

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

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

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

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

7.6  大神解惑 140

7.7  跟我練練手 141

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

8.1  美化表格樣式 144

8.2  美化表單樣式 148

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

8.4  綜合案例2——制作用戶注冊(cè)頁(yè)面 155

8.5  大神解惑 157

8.6  跟我練練手 158

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

9.1   美化項(xiàng)目列表的樣式 160

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

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

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

9.5  大神解惑 177

9.6  跟我練練手 177

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

10.1  濾鏡概述 180

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

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

10.4  大神解惑 191

10.5  跟我練練手 191

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

第11章  CSS3的高級(jí)特性 195

11.1  復(fù)合選擇器 196

11.2  CSS3新增的選擇器 199

11.3  CSS3的繼承特性 205

11.4  CSS3的層疊特性 207

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

11.6  大神解惑 212

11.7  跟我練練手 212

第12章  過渡和動(dòng)畫效果 213

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

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

12.3  了解動(dòng)畫效果 217

12.4  案例2——添加動(dòng)畫效果 218

12.5  大神解惑 219

12.6  跟我練練手 220

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

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

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

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

13.4  大神解惑 230

13.5  跟我練練手 230

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

14.1  JavaScript語(yǔ)法基礎(chǔ) 232

14.2  常見的JavaScript編寫工具 243

14.3  JavaScript在HTML中的使用 244

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

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

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

14.7  大神解惑 267

14.8  跟我練練手 268

第15章  CSS與XML的綜合運(yùn)用 269

15.1  XML語(yǔ)法基礎(chǔ) 270

15.2  使用CSS修飾XML文件 274

15.3  綜合實(shí)例1——招聘廣告 279

15.4  綜合實(shí)例2——圖文混排頁(yè)面 281

15.5  綜合實(shí)例3——古詩(shī)欣賞 283

15.6  大神解惑 286

15.7  跟我練練手 286

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

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

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

16.2  盒子模型 292

16.3  彈性盒模型 299

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

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

16.6  大神解惑 313

16.7  跟我練練手 314

第17章  CSS+DIV盒子的浮動(dòng)與定位 315

17.1  定義DIV 316

17.2  盒子的定位 317

17.3  其他CSS布局定位方式 323

17.4  新增CSS3多列布局 328

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

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

17.7  大神解惑 338

17.8  跟我練練手 338

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

18.1  CSS排版的觀念 340

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

18.3  大神解惑 354

18.4  跟我練練手 354

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

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

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

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

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

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

19.6  大神解惑 378

19.7  跟我練練手 378

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

20.1  了解彈性盒子 380

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

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

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

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

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

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

20.8  大神解惑 395

20.9  跟我練練手 396

第V篇  項(xiàng)目案例實(shí)戰(zhàn)

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

21.1  整體設(shè)計(jì) 400

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

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

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

22.1  整體設(shè)計(jì) 420

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

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

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

23.1  整體設(shè)計(jì) 438

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

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

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

24.1  構(gòu)思布局 450

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

第25章  設(shè)計(jì)在線購(gòu)物類網(wǎng)頁(yè) 457

25.1  整體布局 458

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