CSS DIV網(wǎng)頁布局技術(shù)詳解目錄

時(shí)間：2023-07-03 03:00:01 | 來源：營銷百科

時(shí)間：2023-07-03 03:00:01 來源：營銷百科

CSS DIV網(wǎng)頁布局技術(shù)詳解目錄：第1篇　CSS布局基礎(chǔ)知識

第1章Web標(biāo)準(zhǔn)布局的本質(zhì) 2

1.1 為什么要建立Web標(biāo)準(zhǔn) 2

1.1.1 建立Web標(biāo)準(zhǔn)的目的 2

1.1.2 使用Web標(biāo)準(zhǔn)的好處 2

1.2 什么是Web標(biāo)準(zhǔn) 3

1.3 結(jié)構(gòu)和表現(xiàn) 3

1.4 兩種思考方式 5

1.5 Web標(biāo)準(zhǔn)的前景 7

1.6 Web標(biāo)準(zhǔn)網(wǎng)站欣賞 7

第2章 XHTML書寫規(guī)范 10

2.1 為什么要使用XHTML 10

2.2 什么是XHTML 10

2.3 XHTML語法基礎(chǔ) 12

2.3.1 XHTML頁面結(jié)構(gòu) 12

2.3.2 元素的書寫格式和屬性 13

2.3.3 各種元素的屬性 14

2.4 XHTML代碼規(guī)范 18

第3章 CSS基礎(chǔ)與書寫規(guī)范 20

3.1 CSS的基礎(chǔ)知識 20

3.1.1 什么是CSS 20

3.1.2 CSS的語法 21

3.1.3 選擇符 22

3.1.4 屬性 23

3.1.5 偽類和偽元素 23

3.1.6 顏色單位 24

3.1.7 長度單位 24

3.1.8 百分比值 25

3.1.9 URL 26

3.1.10 默認(rèn)值 26

3.1.11 繼承性 26

3.2 CSS編碼規(guī)范 27

3.2.1 CSS基本書寫規(guī)范 27

3.2.2 CSS命名參考 28

3.2.3CSS樣式表書寫順序 29

3.3 怎樣更好地應(yīng)用CSS 29

3.3.1 塊元素和內(nèi)聯(lián)元素 29

3.3.2 CSS的一些實(shí)用技巧 30

3.3.3 怎樣調(diào)試CSS 30

3.4 關(guān)于CSS的學(xué)習(xí) 33

第2篇　CSS頁面布局技巧

第4章 網(wǎng)頁頭部元素的詳細(xì)定義 36

4.1 DOCTYPE的選擇 36

4.1.1 什么是DOCTYPE 36

4.1.2 選擇什么樣的DOCTYPE 36

4.2 名字空間 37

4.3 編碼問題 37

4.4meta標(biāo)簽38

4.5 CSS的調(diào)用 39

4.5.1 調(diào)用樣式表的幾種方法 39

4.5.2 應(yīng)用樣式的優(yōu)先級 41

4.6 網(wǎng)頁頭部實(shí)例 45

第5章 CSS基本布局屬性 47

5.1 頁面的制作流程和整體分析 47

5.2 元素定位基礎(chǔ)知識 48

5.2.1 塊元素的默認(rèn)排列 48

5.2.2 內(nèi)聯(lián)元素的默認(rèn)排列 49

5.2.3 塊元素和內(nèi)聯(lián)元素的混合默認(rèn)排列 49

5.2.4 使用浮動屬性進(jìn)行定位 50

5.3 定位屬性詳解 51

5.3.1 定位模式 51

5.3.2 邊偏移 51

5.3.3 層疊定位屬性 51

5.4 定位屬性的應(yīng)用 52

5.4.1 絕對定位 52

5.4.2 相對定位 54

5.4.3 固定定位 55

5.4.4 層疊定位屬性的使用 55

5.5 頁面背景的設(shè)定 57

5.5.1 使用背景色定義背景 57

5.5.2 背景圖片的默認(rèn)使用 57

5.5.3 背景圖片的重復(fù) 58

5.5.4 背景圖片的位置 59

5.5.5 背景圖片的附件 61

5.6 背景的綜合應(yīng)用 62

5.6.1 背景顏色和背景圖片的層疊 62

5.6.2 背景圖片的重復(fù)和位置的關(guān)系 63

5.6.3 背景屬性在內(nèi)聯(lián)元素中的使用 64

5.6.4 背景屬性的縮寫 64

5.6.5 頁面文本的樣式 65

5.6.6 鏈接的樣式 66

5.7 布局的基礎(chǔ)知識 67

5.7.1 頁面布局的步驟 67

5.7.2 使用id還是class 67

5.7.3 控制內(nèi)容顯示的display屬性 68

5.7.4 控制內(nèi)容顯示的visibility屬性 69

5.7.5 使用text-align屬性的水平居中 70

5.7.6 使用margin屬性的水平居中 71

5.8 浮動屬性 72

5.8.1 浮動屬性詳解 72

5.8.2 相鄰的浮動元素和固定元素 72

5.8.3 相鄰的兩個(gè)浮動元素 74

5.8.4 相鄰的多個(gè)浮動元素 75

5.9 關(guān)于ul和li的樣式詳解 75

5.9.1 使用list-style-type屬性 76

5.9.2 使用list-style-position屬性 76

5.9.3 使用list-style-image屬性 77

5.9.4 使用list-style屬性 78

5.10 一個(gè)縱向?qū)Ш讲藛蔚闹谱? 78

5.10.1 菜單原理 78

5.10.2 制作菜單內(nèi)容和結(jié)構(gòu)部分 79

5.10.3 CSS代碼編寫 79

5.11 一個(gè)橫向?qū)Ш讲藛蔚闹谱? 83

5.11.1 菜單原理 83

5.11.2 制作菜單內(nèi)容和結(jié)構(gòu)部分 83

5.11.3 CSS代碼編寫 84

5.12 清除浮動 87

5.12.1 清除浮動屬性詳解 87

5.12.2 清除浮動屬性的使用 88

5.13 頁面header部分的制作 90

5.13.1 效果圖分析（1） 90

5.13.2 第一次切圖 90

5.13.3 第二次切圖 91

5.13.4 制作前的準(zhǔn)備工作 92

5.13.5 效果圖分析（2） 93

5.13.6 頁面結(jié)構(gòu)的制作 93

5.13.7 基礎(chǔ)樣式的定義 94

5.13.8 banner部分樣式的定義 95

5.13.9 menu部分樣式的定義 96

5.13.10 頁面全部的CSS代碼 97

第6章 CSS容器屬性 99

6.1 什么是盒模型 99

6.1.1 內(nèi)容與盒模型 99

6.1.2 背景與盒模型 100

6.2 補(bǔ)白屬性 100

6.2.1補(bǔ)白屬性詳解 101

6.2.2 百分比值的使用 102

6.2.3 單側(cè)的補(bǔ)白屬性 103

6.2.4 補(bǔ)白屬性的簡寫 104

6.3 邊框?qū)傩? 106

6.3.1 邊框樣式 106

6.3.2 邊框?qū)挾? 107

6.3.3 邊框顏色 108

6.3.4 邊框的綜合定義 110

6.3.5 單側(cè)邊框的綜合定義 111

6.3.6 一個(gè)有用的表格邊框?qū)傩? 112

6.3.7 應(yīng)用邊框?qū)傩缘膶?shí)例 112

6.4 邊界屬性 113

6.4.1 整體邊界屬性 114

6.4.2 單側(cè)的邊界和簡寫 115

6.4.3 垂直方向的邊界重疊 116

6.4.4 水平方向的邊界 116

6.4.5 負(fù)的邊界值 117

6.4.6 在內(nèi)聯(lián)元素中使用邊界屬性 118

6.5 父元素與子元素之間的距離 119

6.5.1 子元素邊界屬性值為0 119

6.5.2 父元素的補(bǔ)白屬性為0 120

6.5.3 父元素含有padding屬性同時(shí)子元素

含有margin屬性 121

6.6 嵌套的元素中使用負(fù)邊界 122

6.7 固定大小的問題 123

6.7.1 盒模型大小的計(jì)算 123

6.7.2 使用overflow屬性固定長度和寬度 124

6.8 自適應(yīng)問題 125

6.8.1 什么叫自適應(yīng) 125

6.8.2 獨(dú)立元素的高度自適應(yīng) 125

6.8.3 利用背景色的兩列自適應(yīng) 127

6.8.4 左右均能自適應(yīng)的兩列布局 129

6.8.5 三列布局中有兩列內(nèi)容固定 131

6.8.6 三列布局中有一列內(nèi)容固定 133

6.8.7 三列布局中高度都不確定的情況 136

6.8.8 水平自適應(yīng)的原理 138

6.9 制作一個(gè)簡單的頁面框架 140

6.9.1 框架結(jié)構(gòu)分析 140

6.9.2 頁面結(jié)構(gòu)的制作 141

6.9.3 定義CSS代碼 141

6.9.4 頁面最終效果及注意的問題 145

6.10 header部分的進(jìn)一步完善 146

6.10.1 標(biāo)題及簽名部分的完善 146

6.10.2 導(dǎo)航部分的完善 147

6.10.3 調(diào)整后的頁面效果 149

6.11 頁面主體結(jié)構(gòu)的制作 149

6.11.1 效果圖分析 149

6.11.2 主體大表格和內(nèi)容部分 150

6.11.3 右側(cè)分類導(dǎo)航部分 152

6.12 頁面主體部分CSS的編寫 154

6.12.1 3個(gè)主要結(jié)構(gòu)的樣式 154

6.12.2 內(nèi)容部分的樣式 155

6.12.3 導(dǎo)航列表部分的CSS編寫 157

6.12.4 主體部分最后的顯示效果和CSS代碼 160

第7章 CSS定義文本屬性 163

7.1 文本的縮進(jìn)和對齊 163

7.1.1 段首縮進(jìn) 163

7.1.2 段首字符的下沉與大寫 164

7.1.3 文本的對齊 165

7.1.4 圖文混排 166

7.2 行高與間隔 167

7.2.1 行高屬性詳解 167

7.2.2 利用行高屬性使文本垂直居中 170

7.2.3 間隔與空白 171

7.2.4 文本的轉(zhuǎn)換 173

7.3 水平和垂直居中問題 174

7.3.1 已知容器大小和內(nèi)容大小時(shí)的水平和

垂直居中問題 174

7.3.2 未知容器大小、已知內(nèi)容大小時(shí)的水平和

垂直居中問題 175

7.3.3 已知容器大小、未知內(nèi)容大小時(shí)的水平和

垂直居中問題 176

7.3.4 容器大小及內(nèi)容大小均未知時(shí)的水平和

垂直居中問題 178

7.3.5 修飾圖片的水平和垂直居中問題 180

7.4 字體的綜合屬性 180

7.4.1 字體的選擇 180

7.4.2 字體的大小 181

7.4.3 字體的加粗 183

7.4.4 字體的樣式 184

7.4.5 字體的變形 185

7.4.6 字體屬性的簡寫 185

7.5 文本的修飾和鏈接 186

7.5.1 文本的修飾 187

7.5.2 鏈接屬性詳解 188

7.5.3 使用鏈接的順序 190

7.5.4 鏈接的繼承性 191

7.5.5 cursor屬性 192

7.6 完成頁面header部分的制作 193

7.6.1 標(biāo)題和簽名部分 193

7.6.2 menu導(dǎo)航部分 194

7.7 main部分的完善 197

7.7.1 內(nèi)容部分的完善 197

7.7.2 分類導(dǎo)航部分的完善 198

7.8 footer部分的制作 202

7.8.1 效果圖分析 202

7.8.2 結(jié)構(gòu)部分的制作 202

7.8.3 頁面樣式的添加 202

7.9 頁面在IE瀏覽器中的顯示效果 205

第8章 元素的修飾和CSS常見應(yīng)用 206

8.1 圖片的修飾 206

8.1.1 網(wǎng)頁中常用的圖片格式 206

8.1.2 需要使用圖片的情況 207

8.1.3 作為背景的圖片修飾 207

8.1.4 修飾內(nèi)容圖片 207

8.2 使用圖片制作簡單圓角框 209

8.2.1 單色或者單線圓角框自適應(yīng)高度 209

8.2.2 單色或者單線圓角框自適應(yīng)寬度 211

8.2.3 單色或者單線圓角框完全自適應(yīng) 212

8.3 復(fù)雜圓角框的制作 214

8.3.1 自適應(yīng)高度 215

8.3.2 自適應(yīng)寬度 216

8.3.3 完全自適應(yīng) 216

8.4 用CSS制作代替圖片的圓角 219

8.4.1 CSS圓角實(shí)現(xiàn)原理 219

8.4.2 CSS圓角的制作 220

8.5 表單的修飾 223

8.5.1 表單的分類 223

8.5.2 文本域的修飾 224

8.5.3 文本區(qū)域的修飾 225

8.5.4 按鈕的修飾 226

8.5.5 復(fù)選框的修飾 226

8.5.6 單選按鈕的修飾 226

8.5.7 列表的修飾 227

8.5.8 文件域的修飾 227

8.5.9 圖像域的修飾 228

8.6 登錄框的制作 228

8.6.1 效果圖分析 228

8.6.2 頁面結(jié)構(gòu)部分制作 229

8.6.3 CSS部分的編寫 229

8.7 滾動條的修飾 232

8.7.1 滾動條的顯示 232

8.7.2 滾動條的修飾 234

8.8 表格的修飾 235

8.8.1 控制表格的邊線和背景 235

8.8.2 表格的高度和寬度 236

8.8.3 表格的居中問題 236

8.8.4 表格的內(nèi)容與高度 237

8.9 分隔線的修飾 238

8.10 關(guān)于導(dǎo)航欄的制作和修飾 239

8.10.1 縱向?qū)Ш綑诘男揎? 240

8.10.2 制作鏈接樣式 241

8.10.3 制作鼠標(biāo)懸停效果 241

8.10.4 橫向?qū)Ш綑? 244

8.11 下拉菜單的制作 244

8.11.1 下拉菜單的顯示效果 244

8.11.2 菜單的原理 245

8.11.3 制作菜單結(jié)構(gòu)部分 245

8.11.4 編寫主導(dǎo)航部分的樣式 246

8.11.5 編寫子欄目的樣式 247

8.11.6 隱藏子欄目 247

8.11.7 制作顯示效果的樣式 248

8.11.8 使用的腳本代碼 248

8.12 遮蓋的問題 249

第3篇　整站的CSS定義技巧

第9章 DIV CSS布局基礎(chǔ) 252

9.1 初識DIV CSS布局的流程 252

9.2 了解盒模型 254

9.2.1 div標(biāo)簽的盒模型示例 254

9.2.2 基本盒模型 258

9.2.3 邊距 258

9.2.4 補(bǔ)白 262

9.2.5 邊框 264

9.3 頁面元素的布局 268

9.3.1 塊級元素與行內(nèi)元素 268

9.3.2 CSS布局方式：常規(guī)流 270

第10章 關(guān)于整站樣式表的分析 272

10.1 站點(diǎn)頁面的分析 272

10.1.1 規(guī)劃樣式表的原則 272

10.1.2 規(guī)劃樣式表的方法 272

10.1.3 實(shí)例的分析 273

10.2 站點(diǎn)二級頁面的制作 274

10.2.1 日志內(nèi)容頁面結(jié)構(gòu)的規(guī)劃 274

10.2.2 日志內(nèi)容頁面CSS部分的制作 275

10.2.3 日志列表頁的制作 278

第11章 關(guān)于標(biāo)準(zhǔn)的校驗(yàn) 281

11.1 為什么要進(jìn)行標(biāo)準(zhǔn)的校驗(yàn) 281

11.2 怎樣進(jìn)行標(biāo)準(zhǔn)的校驗(yàn) 281

11.2.1 XHTML校驗(yàn)的方法 281

11.2.2 CSS校驗(yàn)的方法 284

11.2.3 XHTML校驗(yàn)常見錯(cuò)誤 285

11.2.4 CSS校驗(yàn)常見錯(cuò)誤 285

11.3 實(shí)例頁面的校驗(yàn) 285

11.3.1 實(shí)例首頁的校驗(yàn) 286

11.3.2 一個(gè)二級頁面的校驗(yàn) 287

第4篇　DIV CSS布局實(shí)例

第12章 DIV CSS頁面布局設(shè)計(jì) 290

12.1 頁面布局的準(zhǔn)備 290

12.1.1 效果圖的制作 290

12.1.2 框架的規(guī)劃 291

12.1.3 布局圖片的分離與制作 295

12.2 頁面的制作 296

12.2.1 框架代碼的編寫 296

12.2.2 內(nèi)容代碼的編寫 298

12.2.3 CSS代碼的編寫 299

第13章 新聞系統(tǒng)的頁面布局 304

13.1 新聞系統(tǒng)的頁面分析 304

13.2 新聞系統(tǒng)首頁的設(shè)計(jì) 304

13.2.1 效果圖的設(shè)計(jì) 304

13.2.2 框架的規(guī)劃 305

13.2.3 布局圖片的分離與制作 308

13.2.4 框架代碼的編寫 309

13.2.5 內(nèi)容代碼的編寫 310

13.2.6 CSS代碼的編寫 311

13.2.7 預(yù)覽效果及微調(diào) 315

13.3 新聞系統(tǒng)欄目頁面的設(shè)計(jì) 315

13.3.1 效果圖的設(shè)計(jì) 315

13.3.2 框架的規(guī)劃 315

13.3.3 布局圖片的分離與制作 320

13.3.4 框架代碼的編寫 320

13.3.5 內(nèi)容代碼的編寫 322

13.3.6 CSS代碼的編寫 323

13.3.7 預(yù)覽效果及微調(diào) 323

13.4 新聞系統(tǒng)列表頁的設(shè)計(jì) 324

13.4.1 效果圖的設(shè)計(jì) 324

13.4.2 框架的規(guī)劃 325

13.4.3 布局圖片的分離與制作 325

13.4.4 框架代碼的編寫 326

13.4.5 內(nèi)容代碼的編寫 326

13.4.6 CSS代碼的編寫 327

13.4.7 預(yù)覽效果及微調(diào) 327

13.5 新聞系統(tǒng)內(nèi)容頁的設(shè)計(jì) 327

13.5.1 效果圖的設(shè)計(jì) 327

13.5.2 框架的規(guī)劃 327

13.5.3 布局圖片的分離與制作 329

13.5.4 框架代碼的編寫 329

13.5.5 內(nèi)容代碼的編寫 330

13.5.6 CSS代碼的編寫 330

13.5.7 預(yù)覽效果及微調(diào) 330

第14章 微博系統(tǒng)的頁面布局 331

14.1 微博系統(tǒng)的頁面分析 331

14.2 微博系統(tǒng)個(gè)人首頁的設(shè)計(jì) 331

14.2.1 效果圖的設(shè)計(jì) 331

14.2.2 框架的規(guī)劃 332

14.2.3 布局圖片的分離與制作 335

14.2.4 框架代碼的編寫 336

14.2.5 內(nèi)容代碼的編寫 339

14.2.6 CSS代碼的編寫 340

14.2.7 預(yù)覽效果及微調(diào) 342

14.3 微博系統(tǒng)相冊列表頁的設(shè)計(jì) 343

14.3.1 效果圖的設(shè)計(jì) 343

14.3.2 框架的規(guī)劃 344

14.3.3 布局圖片的分離與制作 344

14.3.4 框架代碼的編寫 344

14.3.5 CSS代碼的編寫 345

14.3.6 預(yù)覽效果及微調(diào) 346

14.4 微博系統(tǒng)相冊幻燈頁的設(shè)計(jì) 346

14.4.1 效果圖的設(shè)計(jì) 346

14.4.2 源代碼分析 346

14.4.3 布局圖片的分離與制作 348

14.5 微博系統(tǒng)日志詳情頁的設(shè)計(jì) 349

14.5.1 效果圖的設(shè)計(jì) 349

14.5.2 框架的規(guī)劃 349

14.5.3 框架代碼的編寫 351

14.5.4 CSS代碼的編寫 352

14.5.5 預(yù)覽效果及微調(diào) 353

14.6 微博系統(tǒng)微頻道（廣場）的設(shè)計(jì) 353

14.6.1 效果圖的設(shè)計(jì) 353

14.6.2 框架的規(guī)劃 353

14.6.3 框架代碼的編寫 354

14.6.4 內(nèi)容代碼的編寫 356

14.6.5 CSS代碼的編寫 356

14.6.6 預(yù)覽效果及微調(diào) 358

第15章 論壇系統(tǒng)的頁面布局 359

15.1 論壇系統(tǒng)的頁面分析 359

15.2 論壇系統(tǒng)首頁的設(shè)計(jì) 359

15.2.1 效果圖的設(shè)計(jì) 359

15.2.2 框架的規(guī)劃 359

15.2.3 布局圖片的分離與制作 363

15.2.4 框架代碼的編寫 363

15.2.5 內(nèi)容代碼的編寫 365

15.2.6 CSS代碼的編寫 366

15.2.7 預(yù)覽效果及微調(diào) 369

15.3 論壇系統(tǒng)欄目頁的設(shè)計(jì) 369

15.3.1 效果圖的設(shè)計(jì) 369

15.3.2 框架的規(guī)劃 369

15.3.3 布局圖片的分離與制作 371

15.3.4 框架代碼的編寫 371

15.3.5 內(nèi)容代碼的編寫 372

15.3.6 CSS代碼的編寫 373

15.3.7 預(yù)覽效果及微調(diào) 374

15.4 論壇系統(tǒng)版塊頁的設(shè)計(jì) 374

15.4.1 效果圖的設(shè)計(jì) 374

15.4.2 框架的規(guī)劃 375

15.4.3 布局圖片的分離與制作 377

15.4.4 框架代碼的編寫 377

15.4.5 內(nèi)容代碼的編寫 379

15.4.6 CSS代碼的編寫 380

15.4.7 預(yù)覽效果及微調(diào) 381

15.5 論壇系統(tǒng)內(nèi)容頁的設(shè)計(jì) 381

15.5.1 效果圖的設(shè)計(jì) 381

15.5.2 框架的規(guī)劃 383

15.5.3 布局圖片的分離與制作 384

15.5.4 框架代碼的編寫 384

15.5.5 內(nèi)容代碼的編寫 386

15.5.6 CSS代碼的編寫 387

15.5.7 預(yù)覽效果及微調(diào) 388

第16章 商城系統(tǒng)的頁面布局 389

16.1 商城系統(tǒng)的頁面分析 389

16.2 商城系統(tǒng)首頁的設(shè)計(jì) 389

16.2.1 效果圖的設(shè)計(jì) 389

16.2.2 框架的規(guī)劃 389

16.2.3 布局圖片的分離與制作 398

16.2.4 框架代碼的編寫 399

16.2.5 內(nèi)容代碼的編寫 405

16.2.6 CSS代碼的編寫 408

16.2.7 預(yù)覽效果及微調(diào) 411

附錄A CSS標(biāo)記速查 412

A.1 字體屬性 412

A.1.1 設(shè)置字體--font-family 412

A.1.2 設(shè)置字號--font-size 412

A.1.3 字體風(fēng)格--font-style 412

A.1.4 設(shè)置加粗字體--font-weight 413

A.1.5 小型的大寫字母--font-variant 413

A.1.6 復(fù)合屬性：字體--font 413

A.2 顏色及背景屬性 413

A.2.1 顏色屬性設(shè)置--color 413

A.2.2 背景顏色--background-color 414

A.2.3 背景圖像--background-image 414

A.2.4 背景重復(fù)--background-repeat 415

A.2.5 背景附件--background-attachment 415

A.2.6 背景位置--background-position 415

A.2.7 復(fù)合屬性：背景--background 415

A.3 文本屬性 416

A.3.1 單詞間隔--word-spacing 416

A.3.2 字符間隔--letter-spacing 416

A.3.3 文字修飾--text-decoration 416

A.3.4 縱向排列--vertical-align 416

A.3.5 文本轉(zhuǎn)換--text-transform 417

A.3.6 文本排列--text-align 417

A.3.7 文本縮進(jìn)--text-indent 417

A.3.8 文本行高--line-height 417

A.3.9 處理空白--white-space 417

A.3.10 文本反排--unicode-bidi與

direction 418

A.4 邊距與填充屬性 418

A.4.1 頂端邊距--margin-top 418

A.4.2 其他邊距--margin-bottom、margin-left、

margin-right 419

A.4.3 復(fù)合屬性：邊距--margin 419

A.4.4 頂端填充--padding-top 419

A.4.5 其他填充--padding-bottom、padding-left、

padding-right 419

A.4.6 復(fù)合屬性：填充--padding 419

A.5 邊框?qū)傩? 419

A.5.1 邊框樣式--border-style 420

A.5.2 邊框?qū)挾?-border-width 421

A.5.3 邊框顏色--border-color 421

A.5.4 邊框?qū)傩?-border 421

A.6 定位及尺寸屬性 422

A.6.1 定位方式--position 422

A.6.2 元素位置--top、right、bottom、left 422

A.6.3 層疊順序--z-index 423

A.6.4 浮動屬性--float 423

A.6.5 清除屬性--clear 423

A.6.6 可視區(qū)域--clip 423

A.6.7 設(shè)定大小--width、height 423

A.6.8 超出范圍--overflow 424

A.6.9 可見屬性--visibility 424

A.7 列表屬性 424

A.7.1 列表符號--list-style-type 424

A.7.2 圖像符號--list-style-image 425

A.7.3 列表縮進(jìn)--list-style-position 425

A.7.4 復(fù)合屬性：列表--list-style 425

A.8 光標(biāo)屬性--cursor 425

A.9 濾鏡屬性 426

A.9.1 不透明度--alpha 426

A.9.2動感模糊--blur 426

A.9.3 對顏色進(jìn)行透明處理--chroma 427

A.9.4 設(shè)置陰影--dropShadow 427

A.9.5 對象的翻轉(zhuǎn)--flipH、flipV 427

A.9.6發(fā)光效果--glow 427

A.9.7 灰度處理--gray 427

A.9.8 反相--invert 428

A.9.9 X光片效果--Xray 428

A.9.10 遮罩效果--mask 428

A.9.11 波形濾鏡--wave 428