CSS從入門(mén)到精通（二版）

第一篇 基礎(chǔ)知識(shí)篇
第1章 與網(wǎng)頁(yè)有關(guān)的基本概念 2
1.1 網(wǎng)頁(yè)的基本構(gòu)成 2
1.2 網(wǎng)頁(yè)的結(jié)構(gòu)設(shè)計(jì)——HTML與XHTML 3
1.2.1 認(rèn)識(shí)HTML 3
1.2.2 認(rèn)識(shí)XHTML 4
1.2.3 制作一個(gè)簡(jiǎn)單的XHTML網(wǎng)頁(yè) 5
1.2.4 XHTML的優(yōu)勢(shì) 5
1.3 CSS入門(mén) 6
1.3.1 感性體驗(yàn)CSS的魅力 6
1.3.2 CSS的概念 8
1.3.3 CSS的特點(diǎn) 9
1.3.4 CSS的優(yōu)勢(shì) 9
1.3.5 發(fā)揮CSS的優(yōu)勢(shì) 10
1.4 Web標(biāo)準(zhǔn) 11
1.4.1 什么是Web標(biāo)準(zhǔn) 12
1.4.2 Web標(biāo)準(zhǔn)的構(gòu)成 12
1.4.3 Web標(biāo)準(zhǔn)的表現(xiàn)層技術(shù) 13
1.5 使用CSS+DIV建設(shè)網(wǎng)站 13
1.5.1 CSS+DIV的含義 13
1.5.2 CSS+DIV網(wǎng)站設(shè)計(jì)的優(yōu)勢(shì) 13
1.6 小結(jié) 14
1.7 習(xí)題 15
第2章 CSS基礎(chǔ)知識(shí) 16
2.1 CSS的基本語(yǔ)法 16
2.1.1 CSS的基本語(yǔ)法構(gòu)成 16
2.1.2 一個(gè)CSS樣式的簡(jiǎn)單實(shí)例 16
2.2 CSS的選擇符 18
2.2.1 類型選擇符 18
2.2.2 群組選擇符 18
2.2.3 包含選擇符 18
2.2.4 id、class選擇符 19
2.2.5 標(biāo)簽指定式選擇符 20
2.2.6 組合選擇符 20
2.2.7 偽類和偽對(duì)象 21
2.2.8 通配選擇符 21
2.3 CSS的常用屬性及屬性值 22
2.3.1 color顏色屬性 22
2.3.2 常用的CSS長(zhǎng)度單位 23
2.3.3 百分比值 24
2.3.4 URL路徑 24
2.4 CSS的繼承性 25
2.5 CSS的添加方法 26
2.5.1 在XHTML標(biāo)識(shí)符里添加CSS 26
2.5.2 在XHTML頭信息標(biāo)識(shí)符里添加CSS 26
2.5.3 鏈接樣式表 27
2.5.4 聯(lián)合使用樣式表 28
2.6 CSS的開(kāi)發(fā)環(huán)境 29
2.6.1 編輯軟件 29
2.6.2 瀏覽軟件 30
2.7 小結(jié) 31
2.8 習(xí)題 32
第3章 XHTML與JavaScript基礎(chǔ) 33
3.1 XHTML基礎(chǔ)知識(shí) 33
3.1.1 XHTML的格式文件 33
3.1.2 XHTML基本結(jié)構(gòu) 34
3.1.3 XHTML網(wǎng)頁(yè)實(shí)例 37
3.2 XHTML的語(yǔ)法構(gòu)成 38
3.2.1 XHTML中的標(biāo)簽 38
3.2.2 XHTML的標(biāo)簽屬性 39
3.3 XHTML的語(yǔ)法規(guī)范 39
3.3.1 標(biāo)簽不能重疊，可以嵌套 39
3.3.2 XHTML文件一定要有正確的組織格式 40
3.3.3 標(biāo)簽名字一定要用小寫(xiě)字母 40
3.3.4 所有的XHTML元素一定要關(guān)閉 41
3.3.5 獨(dú)立的一個(gè)標(biāo)簽也要用/>來(lái)結(jié)束 41
3.4 div標(biāo)簽 41
3.4.1 什么是div 41
3.4.2 理解div 42
3.4.3 使用div 43
3.4.4 div的并列與嵌套 44
3.5 span標(biāo)簽 44
3.5.1 什么是span 45
3.5.2 span與div的區(qū)別 45
3.6 h1至h6標(biāo)簽 46
3.7 列表制作標(biāo)簽ul、ol、li 46
3.7.1 ul無(wú)序列表 47
3.7.2 ol有序列表 48
3.8 p標(biāo)簽和br標(biāo)簽 48
3.8.1 p標(biāo)簽 48
3.8.2 br標(biāo)簽 49
3.9 img標(biāo)簽 49
3.9.1 img標(biāo)簽的屬性 49
3.9.2 img標(biāo)簽使用方法 50
3.10 表單標(biāo)簽 50
3.10.1 form標(biāo)簽 50
3.10.2 input標(biāo)簽 51
3.10.3 分組標(biāo)簽fieldset、legend 53
3.11 JavaScript簡(jiǎn)介 53
3.12 JavaScript語(yǔ)言基礎(chǔ) 54
3.12.1 插入JavaScript 55
3.12.2 基本語(yǔ)法 55
3.12.3 變量和數(shù)據(jù)類型 56
3.12.4 語(yǔ)句 57
3.13 JavaScript的對(duì)象及其屬性和方法 60
3.14 事件處理 61
3.14.1 事件處理的類型 61
3.14.2 指定事件處理 61
3.15 小結(jié) 62
3.16 習(xí)題 63
第4章 瀏覽器的兼容與解析問(wèn)題 65
4.1 兼容問(wèn)題的由來(lái) 65
4.2 需要兼容的常用瀏覽器 65
4.3 CSS hack技術(shù) 66
4.3.1 什么是CSS hack 66
4.3.2 使用CSS hack 67
4.4 常用CSS hack方法介紹 68
4.4.1 屏蔽IE 6瀏覽器 68
4.4.2 僅IE 7識(shí)別 68
4.4.3 僅IE 6識(shí)別 69
4.4.4 僅IE識(shí)別 70
4.4.5 兼容IE 6、IE 7、Firefox瀏覽器 70
4.5 CSS hack管理 72
4.6 IE條件注釋功能 73
4.7 小結(jié) 73
4.8 習(xí)題 74
第二篇 實(shí)例制作篇
第5章 使用CSS制作背景 76
5.1 制作背景顏色 76
5.2 給元素添加背景圖片 78
5.2.1 指定背景圖像 78
5.2.2 制作重復(fù)的背景圖像 80
5.3 制作不動(dòng)的背景 81
5.4 給網(wǎng)頁(yè)添加背景 84
5.5 制作滾動(dòng)頁(yè)面的背景 85
5.6 綜合使用背景 86
5.7 小結(jié) 87
5.8 習(xí)題 88
第6章 使用CSS布局頁(yè)面頂部?jī)?nèi)容 89
6.1 制作包含文本logo的頁(yè)面頂部 89
6.2 制作包含圖像logo的頁(yè)面頂部 91
6.2.1 制作實(shí)例 92
6.2.2 兼容問(wèn)題 94
6.3 制作包含文本banner的頁(yè)面頂部 95
6.3.1 圖片logo的定位 96
6.3.2 定義快捷方式的文本樣式 98
6.3.3 定義段落文本banner樣式 100
6.4 制作包含圖像banner的頁(yè)面頂部 101
6.5 小結(jié) 105
6.6 習(xí)題 106
第7章 使用CSS制作網(wǎng)站導(dǎo)航 107
7.1 制作一個(gè)簡(jiǎn)單的橫向文字導(dǎo)航條 107
7.2 制作方塊導(dǎo)航條 110
7.3 制作標(biāo)簽式導(dǎo)航 112
7.4 制作按鈕導(dǎo)航條 115
7.5 CSS盒模型及盒模型hack 118
7.5.1 盒模型尺寸 118
7.5.2 盒模型hack 120
7.5.3 簡(jiǎn)單盒模型hack方法 121
7.6 制作會(huì)動(dòng)的長(zhǎng)城形導(dǎo)航條 121
7.7 制作基于背景控制的導(dǎo)航條 126
7.8 制作左右自由伸展的導(dǎo)航條 129
7.8.1 九宮格技術(shù)原理 129
7.8.2 制作自由伸展的導(dǎo)航條實(shí)例 132
7.9 制作一個(gè)簡(jiǎn)單的縱向?qū)Ш綏l 134
7.9.1 使用ul、li列表標(biāo)簽制作導(dǎo)航條 134
7.9.2 使用div+h1標(biāo)簽制作 135
7.10 制作分行導(dǎo)航條 137
7.11 制作增亮導(dǎo)航條 139
7.12 制作動(dòng)感的導(dǎo)航條 141
7.13 制作下拉式導(dǎo)航條 144
7.13.1 制作實(shí)例 145
7.13.2 兼容問(wèn)題 147
7.14 制作多級(jí)彈出導(dǎo)航條 149
7.14.1 制作實(shí)例 149
7.14.2 兼容問(wèn)題 153
7.15 小結(jié) 154
7.16 習(xí)題 155
第8章 使用CSS制作列表 156
8.1 制作新聞列表 156
8.1.1 制作實(shí)例 157
8.1.2 兼容問(wèn)題 159
8.2 制作排行榜 160
8.3 制作自定義圖片項(xiàng)目符號(hào)的列表 163
8.3.1 使用列表符號(hào)樣式屬性制作列表 164
8.3.2 使用背景圖片屬性制作列表符號(hào) 166
8.3.3 兼容問(wèn)題 167
8.4 使用CSS改變列表排版 168
8.5 列表縮進(jìn)排版 171
8.5.1 制作實(shí)例 171
8.5.2 兼容問(wèn)題 174
8.6 復(fù)雜列表排版 175
8.6.1 overflow屬性語(yǔ)法結(jié)構(gòu) 176
8.6.2 制作實(shí)例 176
8.6.3 兼容問(wèn)題 181
8.7 小結(jié) 183
8.8 習(xí)題 184
第9章 使用CSS制作表單 185
9.1 制作登錄表單 185
9.1.1 label標(biāo)簽語(yǔ)法結(jié)構(gòu) 186
9.1.2 制作登錄表單實(shí)例 186
9.1.3 兼容問(wèn)題 189
9.2 制作用戶注冊(cè)表單 190
9.2.1 制作頁(yè)面的XHTML代碼 191
9.2.2 制作頁(yè)面的CSS樣式 193
9.3 制作符合W3C標(biāo)準(zhǔn)的表單 196
9.3.1 制作頁(yè)面的XHTML代碼 197
9.3.2 制作頁(yè)面的CSS樣式 200
9.3.3 兼容問(wèn)題 204
9.4 小結(jié) 205
9.5 習(xí)題 205
第10章 使用CSS制作內(nèi)容的版式 206
10.1 制作分欄的文字排版 206
10.2 制作圖文混合排版 208
10.2.1 圖文混排基本方式 208
10.2.2 制作網(wǎng)站圖文混排版式的實(shí)例 209
10.3 制作全圖排版的實(shí)例 212
10.3.1 自由浮動(dòng)布局 213
10.3.2 其他顯示方式布局 216
10.4 小結(jié) 218
10.5 習(xí)題 218
第11章 使用CSS制作鏈接樣式 219
11.1 制作Windows風(fēng)格樣式的CSS按鈕 219
11.1.1 仿Windows經(jīng)典樣式的CSS按鈕 219
11.1.2 仿Windows XP風(fēng)格的CSS按鈕 220
11.2 制作仿按鈕下陷效果的實(shí)例 221
11.3 面包屑導(dǎo)航鏈接 222
11.3.1 制作實(shí)例 223
11.3.2 兼容問(wèn)題 225
11.4 小結(jié) 226
11.5 習(xí)題 226
第12章 使用CSS制作數(shù)據(jù)表格 227
12.1 制作基本的數(shù)據(jù)表格 227
12.1.1 表示數(shù)據(jù)的表格對(duì)象標(biāo)簽 227
12.1.2 使用表格標(biāo)簽制作表格 227
12.1.3 使用CSS修飾表格樣式 229
12.2 制作CSS風(fēng)格的數(shù)據(jù)表格 232
12.2.1 表格對(duì)象標(biāo)簽屬性 232
12.2.2 CSS屬性text-transform 233
12.2.3 制作數(shù)據(jù)表格實(shí)例 233
12.3 小結(jié) 238
12.4 習(xí)題 239
第13章 使用CSS制作頁(yè)面底部?jī)?nèi)容 240
13.1 制作文本信息的頁(yè)面底部?jī)?nèi)容 240
13.1.1 a標(biāo)簽的title屬性 240
13.1.2 制作包含文本信息的頁(yè)面底部XHTML結(jié)構(gòu)代碼 240
13.1.3 制作頁(yè)面的CSS樣式 241
13.1.4 兼容問(wèn)題 244
13.2 制作包含導(dǎo)航鏈接的頁(yè)面底部?jī)?nèi)容 245
13.2.1 制作包含導(dǎo)航鏈接頁(yè)面底部的XHTML代碼結(jié)構(gòu) 245
13.2.2 制作頁(yè)面的CSS樣式 246
13.3 制作包含圖像友情鏈接的頁(yè)面底部?jī)?nèi)容 250
13.3.1 制作頁(yè)面底部的XHTML結(jié)構(gòu) 250
13.3.2 制作頁(yè)面的CSS樣式 251
13.4 小結(jié) 253
13.5 習(xí)題 254
第三篇 整體布局篇
第14章 CSS基本布局 256
14.1 一列固定寬度 256
14.2 一列寬度自適應(yīng) 258
14.3 一列居中 259
14.4 二列固定寬度 260
14.5 二列寬度自適應(yīng) 262
14.6 兩列右列寬度自適應(yīng) 263
14.7 兩列固定寬度居中 264
14.8 三列浮動(dòng)中間列寬度自適應(yīng) 266
14.9 高度自適應(yīng) 268
14.10 小結(jié) 270
14.11 習(xí)題 270
第15章 CSS整體布局的實(shí)現(xiàn) 271
15.1 頂行三列布局的實(shí)現(xiàn) 271
15.1.1 制作思路 272
15.1.2 制作頂部三列式布局實(shí)例 272
15.2 多區(qū)域不規(guī)則布局 274
15.2.1 制作思路 275
15.2.2 制作多區(qū)域不規(guī)則布局的實(shí)例 276
15.3 小結(jié) 279
15.4 習(xí)題 280
第16章 使用Dreamweaver制作頁(yè)面的實(shí)例 281
16.1 框架設(shè)計(jì) 281
16.1.1 頁(yè)面分析 282
16.1.2 框架制作 282
16.1.3 切圖 285
16.2 布局設(shè)計(jì) 288
16.2.1 頁(yè)面頂部布局設(shè)計(jì) 288
16.2.2 頁(yè)面中上部的布局設(shè)計(jì) 290
16.2.3 頁(yè)面中下部的布局設(shè)計(jì) 293
16.2.4 頁(yè)面底部的布局設(shè)計(jì) 296
16.3 模塊設(shè)計(jì) 298
16.3.1 快速導(dǎo)航制作 298
16.3.2 “面包屑”制作 300
16.3.3 數(shù)據(jù)表格制作 302
16.3.4 圖片排版 304
16.4 兼容性測(cè)試 306
16.5 小結(jié) 309
16.6 習(xí)題 310
第四篇 綜合應(yīng)用篇
第17章 博客類網(wǎng)頁(yè)布局設(shè)計(jì) 312
17.1 頁(yè)面布局和規(guī)劃 313
17.1.1 界面設(shè)計(jì)分析 313
17.1.2 規(guī)劃頁(yè)面布局 313
17.2 CSS結(jié)構(gòu)設(shè)計(jì)與整體布局設(shè)計(jì) 314
17.2.1 CSS結(jié)構(gòu)設(shè)計(jì) 314
17.2.2 整體布局設(shè)計(jì) 316
17.3 頁(yè)面頭部布局設(shè)計(jì) 319
17.3.1 制作頭部的結(jié)構(gòu)代碼 319
17.3.2 編寫(xiě)頭部的CSS代碼 320
17.4 日志部分的布局設(shè)計(jì) 322
17.4.1 制作日志部分的結(jié)構(gòu)代碼 322
17.4.2 編寫(xiě)日志部分的CSS代碼 323
17.5 邊欄區(qū)域的布局設(shè)計(jì) 326
17.5.1 制作邊欄區(qū)域的結(jié)構(gòu)代碼 326
17.5.2 編寫(xiě)右邊欄區(qū)域的CSS代碼 327
17.6 頁(yè)面底部的布局設(shè)計(jì) 329
17.6.1 制作底部的結(jié)構(gòu)代碼 330
17.6.2 編寫(xiě)底部的CSS代碼 330
17.7 小結(jié) 331
第18章 企業(yè)類網(wǎng)頁(yè)布局設(shè)計(jì) 332
18.1 頁(yè)面布局和規(guī)劃 332
18.1.1 界面設(shè)計(jì)分析 332
18.1.2 規(guī)劃頁(yè)面布局 334
18.2 CSS結(jié)構(gòu)設(shè)計(jì)與整體布局設(shè)計(jì) 334
18.2.1 CSS文件結(jié)構(gòu)設(shè)計(jì) 335
18.2.2 首頁(yè)布局設(shè)計(jì) 335
18.3 頁(yè)面頭部布局設(shè)計(jì) 338
18.3.1 制作頭部的結(jié)構(gòu)代碼 338
18.3.2 編寫(xiě)頭部的CSS樣式 338
18.4 頁(yè)面banner區(qū)域的布局設(shè)計(jì) 339
18.4.1 制作banner區(qū)域主體的布局設(shè)計(jì) 339
18.4.2 制作banner區(qū)域各個(gè)元素的布局設(shè)計(jì) 341
18.5 頁(yè)面主內(nèi)容區(qū)的布局設(shè)計(jì) 346
18.5.1 制作頁(yè)面主內(nèi)容區(qū)結(jié)構(gòu) 346
18.5.2 編寫(xiě)CSS樣式 347
18.6 頻道頁(yè)面布局設(shè)計(jì)概述 350
18.7 小結(jié) 351