CSS從入門到精通

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