CSS DIV網(wǎng)頁樣式與布局從入門到精通圖書目錄

時間：2023-02-24 04:45:01 | 來源：營銷百科

時間：2023-02-24 04:45:01 來源：營銷百科

CSS DIV網(wǎng)頁樣式與布局從入門到精通圖書目錄：第1章CSS樣式設(shè)計基礎(chǔ) 1

視頻講解：2小時38分鐘

1.1 設(shè)計良好的網(wǎng)頁結(jié)構(gòu) 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 設(shè)計第一個實例 10

1.3CSS選擇器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 樣式表規(guī)劃、組織和維護 32

1.5.1 對文檔應(yīng)用樣式 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 設(shè)置顏色 46

第2章 使用CSS設(shè)置字體和文本樣式 48

視頻講解：2小時12分鐘

2.1 字體和文本樣式基礎(chǔ) 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 案例實戰(zhàn) 68

2.2.1 設(shè)計百度Logo 69

2.2.2 設(shè)置標題樣式 70

2.2.3 設(shè)置正文樣式 73

2.2.4 設(shè)置文本樣式 75

2.2.5 設(shè)置文本段樣式 79

2.2.6 設(shè)置段落版式樣式 82

2.2.7 設(shè)計單頁圖文混排版式 86

第3章 使用CSS設(shè)置圖片樣式 92

視頻講解：1小時32分鐘

3.1 圖片樣式設(shè)置基礎(chǔ) 93

3.1.1 定義圖片邊框 93

3.1.2 定義圖片大小 97

3.1.3 定義圖片的橫向?qū)R 98

3.1.4 定義圖片的縱向?qū)R 99

3.1.5 設(shè)置文字環(huán)繞效果 101

3.2 案例實戰(zhàn) 103

3.2.1 圖文混排 103

3.2.2 圖片布局 107

3.2.3 多圖排列 111

3.2.4 陰影圖片 114

3.2.5 圓角圖片 116

3.2.6 設(shè)計圓角欄目 118

第4章 使用CSS控制背景圖像 124

視頻講解：1小時38分鐘

4.1 背景樣式設(shè)置基礎(chǔ) 125

4.1.1 設(shè)置頁面背景顏色 125

4.1.2 設(shè)置背景顏色給頁面分塊 126

4.1.3 定義背景圖片 128

4.1.4 背景圖片的重復 130

4.1.5 定義背景圖片的位置 131

4.1.6 固定背景圖片 133

4.2 案例實戰(zhàn) 134

4.2.1 設(shè)置網(wǎng)頁背景顏色 135

4.2.2 設(shè)置帶花紋邊框 136

4.2.3 設(shè)置永遠固定的背景 143

4.2.4 設(shè)置圓潤的欄目模塊 144

4.2.5 設(shè)計分欄版式 149

4.2.6 設(shè)計滑動門菜單 151

4.2.7 設(shè)計燈箱廣告 154

4.2.8 設(shè)計博客首頁效果 157

第5章 使用CSS控制列表樣式 163

視頻講解：55分鐘

5.1 列表樣式設(shè)置基礎(chǔ) 164

5.1.1 設(shè)置列表項符號 164

5.1.2 定義項目的圖片符號 166

5.1.3 列表的橫豎轉(zhuǎn)換 167

5.2 案例實戰(zhàn) 169

5.2.1 設(shè)計新聞欄目 169

5.2.2 設(shè)計導航菜單 173

5.2.3 設(shè)計多級菜單 177

5.2.4 列表排版的應(yīng)用 182

5.2.5 使用列表實現(xiàn)圖文混排效果 186

第6章 使用CSS設(shè)計表格樣式 192

視頻講解：45分鐘

6.1 表格樣式設(shè)置基礎(chǔ) 193

6.1.1 設(shè)置表格顏色 193

6.1.2 設(shè)置表格邊框 194

6.2 案例實戰(zhàn) 196

6.2.1 美化表格 197

6.2.2 設(shè)計高效的表格 200

6.2.3 讓表格更易用 204

6.2.4 表格布局 207

第7章 使用CSS設(shè)計表單樣式 211

視頻講解：1小時45分鐘

7.1 表單樣式設(shè)置基礎(chǔ) 212

7.1.1 表單基本結(jié)構(gòu) 212

7.1.2 設(shè)置基本樣式 216

7.1.3 定義字體樣式 221

7.1.4 定義邊框樣式 222

7.1.5 定義背景樣式 224

7.2 案例實戰(zhàn) 228

7.2.1 設(shè)計多彩下拉菜單樣式 228

7.2.2 設(shè)計注冊表單 230

7.2.3 設(shè)計調(diào)查表 235

7.2.4 設(shè)計反饋表 240

第8章 使用CSS定義鏈接樣式 246

視頻講解：1小時12分鐘

8.1 鏈接樣式設(shè)置基礎(chǔ) 247

8.1.1 設(shè)置鏈接樣式 247

8.1.2 設(shè)計下劃線樣式 248

8.1.3 設(shè)置類型指示樣式 249

8.1.4 定義按鈕樣式 251

8.1.5 定義已訪問樣式 254

8.1.6 鏈接提示樣式 254

8.2 案例實戰(zhàn) 256

8.2.1 鼠標樣式 256

8.2.2 設(shè)計菜單樣式 259

8.2.3 設(shè)計蘋果導航菜單 261

8.2.4 塊狀選項卡 266

8.2.5 圖片瀏覽 271

第9章 網(wǎng)頁排版和DIV CSS布局 275

視頻講解：2小時47分鐘

9.1 CSS盒模型 276

9.1.1 認識盒模型 276

9.1.2 外邊距 278

9.1.3 內(nèi)邊距 281

9.1.4 邊框 284

9.1.5 寬和高 284

9.2 網(wǎng)頁重構(gòu) 287

9.2.1 設(shè)置文檔類型 287

9.2.2 選擇標簽 293

9.2.3 案例實戰(zhàn)：嘗試重構(gòu)禪意花園 296

9.3 網(wǎng)頁排版 299

9.3.1 網(wǎng)頁排版基本原則 299

9.3.2 標準網(wǎng)頁版式基本形式 300

9.3.3 網(wǎng)頁排版基本方法 300

9.4 DIV CSS布局 305

9.4.1 布局空間 305

9.4.2 布局位置 307

9.4.3 布局環(huán)繞 309

9.4.4 清除浮動 311

9.4.5 布局嵌套 313

9.4.6 調(diào)整布局間距 316

9.5 案例實戰(zhàn) 321

9.5.1 兩列布局 322

9.5.2 三列布局 327

第10章 用CSS定位控制網(wǎng)頁布局 332

視頻講解：1小時53分鐘

10.1 CSS定位 333

10.1.1 認識position 333

10.1.2 靜態(tài)定位 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 案例實戰(zhàn) 357

10.4.1 畫冊式網(wǎng)頁布局 357

10.4.2 展覽式網(wǎng)頁布局 361

10.4.3 浪漫式網(wǎng)頁布局 366

第11章 解決CSS設(shè)計中的常見問題 372

視頻講解：2小時

11.1 IE條件語句 373

11.1.1 認識IE條件語句 373

11.1.2 IE條件語句基本用法 374

11.1.3 案例實戰(zhàn)：設(shè)計兼容的多級菜單 376

11.2 CSS渲染及問題 380

11.2.1 開啟和關(guān)閉IE布局特性 381

11.2.2 設(shè)置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：內(nèi)容與背景分離的Bug 400

11.3.7 問題3：IE6躲躲貓Bug 402

11.3.8 問題4：IE6多余字符Bug 403

11.4 案例實戰(zhàn) 403

11.4.1 3列等高布局 403

11.4.2 3列浮動布局 408

第12章 旅游酒店網(wǎng)站 410

視頻講解：2小時18分鐘

12.1 網(wǎng)站頁面效果分析 411

12.1.1 '旅游度假'頁面效果分析 411

12.1.2 '預定酒店'頁面效果分析 411

12.2 首頁策劃設(shè)計 412

12.3 網(wǎng)頁設(shè)計與重構(gòu) 414

12.3.1 畫草圖和設(shè)計圖 414

12.3.2 切圖 417

12.3.3 主體重構(gòu) 419

12.4 頁面布局 422

12.4.1 設(shè)計頁面基本樣式 422

12.4.2 設(shè)計頁頭布局和樣式 422

12.4.3 設(shè)計搜索和幻燈區(qū)布局和樣式 425

12.4.4 設(shè)計左側(cè)引導區(qū)布局和樣式 427

12.4.5 設(shè)計內(nèi)容區(qū)樣式 428

12.4.6 設(shè)計右側(cè)專題欄樣式 431

第13章 新聞網(wǎng)站 434

視頻講解：1小時20分鐘

13.1 網(wǎng)站頁面效果分析 435

13.1.1 '對話'頁面效果分析 435

13.1.2 環(huán)球看點頁面效果分析 435

13.2 首頁策劃設(shè)計 436

13.3 網(wǎng)頁設(shè)計與重構(gòu) 438

13.3.1 畫草圖和設(shè)計圖 438

13.3.2 切圖 440

13.3.3 主體重構(gòu) 442

13.4 頁面布局 444

13.4.1 設(shè)計頁面基本樣式 445

13.4.2 設(shè)計頁頭布局和樣式 445

13.4.3 設(shè)計主要新聞區(qū)布局和樣式 447

13.4.4 設(shè)計分類新聞區(qū)布局和樣式 450

第14章 使用JavaScript控制CSS樣式455

視頻講解：2小時47分鐘

14.1 JavaScript基礎(chǔ) 456

14.1.1 在網(wǎng)頁中嵌入JavaScript腳本 456

14.1.2 JavaScript腳本在文檔中的位置 457

14.1.3 解決JavaScript腳本與CSS樣式?jīng)_突 457

14.2 CSS腳本化傳統(tǒng)控制方法 459

14.2.1 認識Style對象 460

14.2.2 讀寫行內(nèi)樣式 464

14.2.3 讀寫樣式表中樣式 467

14.2.4 訪問網(wǎng)頁實際樣式 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 讀取復雜結(jié)構(gòu)中的元素尺寸 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設(shè)置顯隱效果 494

14.6.1 設(shè)置顯隱效果 494

14.6.2 設(shè)置透明度 495

14.6.3 控制動畫時長 496

14.6.4 設(shè)計滑動效果 499

第15章 使用CSS設(shè)計XML文檔樣式 502

視頻講解：43分鐘

15.1 XML基礎(chǔ) 503

15.1.1 XML文檔基本結(jié)構(gòu) 503

15.1.2 聲明 504

15.1.3 處理指令 504

15.1.4 注釋 505

15.1.5 標簽 505

15.1.6 屬性 506

15.2 設(shè)置XML文檔樣式 507

15.2.1CSS樣式表507

15.2.2 XSL樣式表 508

15.3 CSS與XML文檔關(guān)聯(lián) 510

15.3.1 直接嵌入CSS樣式 510

15.3.2 導入外部CSS樣式表文件 512

15.3.3 @ import 513

15.4 案例實戰(zhàn) 513

15.4.1 設(shè)計詩情畫意圖文效果 513

15.4.2 設(shè)計新聞版面效果 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 翻轉(zhuǎn)（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 案例實戰(zhàn) 537