CSS從入門到精通

第一篇　基礎(chǔ)知識篇
第1章　與網(wǎng)頁有關(guān)的基本概念 3
1.1　網(wǎng)頁的基本構(gòu)成 3
1.2　網(wǎng)頁的結(jié)構(gòu)設(shè)計——HTML與XHTML 4
1.2.1　認(rèn)識HTML 5
1.2.2　認(rèn)識XHTML 5
1.2.3　制作一個簡單的XHTML網(wǎng)頁 6
1.2.4　XHTML的優(yōu)勢 7
1.3　CSS入門 8
1.3.1　感性體驗CSS的魅力 8
1.3.2　CSS的概念 11
1.3.3　CSS的特點 11
1.3.4　CSS的優(yōu)勢 12
1.3.5　發(fā)揮CSS的優(yōu)勢 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è)計的優(yōu)勢 15
1.6　小結(jié) 16
第2章　CSS基礎(chǔ)知識 18
2.1　CSS的基本語法 18
2.1.1　CSS的基本語法構(gòu)成 18
2.1.2　一個CSS樣式的簡單實例 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　偽類和偽對象 23
2.2.8　通配選擇符 23
2.3　CSS的常用屬性及屬性值 24
2.3.1　color顏色屬性 24
2.3.2　常用CSS長度單位 25
2.3.3　百分比值 26
2.3.4　URL路徑 26
2.4　CSS的繼承性 27
2.5　CSS的添加方法 28
2.5.1　在XHTML標(biāo)識符里添加CSS 28
2.5.2　在XHTML頭信息標(biāo)識符里添加CSS 28
2.5.3　鏈接樣式表 29
2.5.4　聯(lián)合使用樣式表 30
2.6　CSS的開發(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ǔ)知識 35
3.1.1　XHTML的格式文件 35
3.1.2　XHTML基本結(jié)構(gòu) 36
3.1.3　XHTML網(wǎng)頁實例 39
3.2　XHTML的語法構(gòu)成 40
3.2.1　XHTML中的標(biāo)簽 40
3.2.2　XHTML的標(biāo)簽屬性 41
3.3　XHTML的語法規(guī)范 42
3.3.1　標(biāo)簽不能重疊，可以嵌套 42
3.3.2　XHTML文件一定要有正確的組織格式 42
3.3.3　標(biāo)簽名字一定要用小寫字母 43
3.3.4　所有的 XHTML 元素一定要關(guān)閉 43
3.3.5　獨立的一個標(biāo)簽也要結(jié)束用 />來結(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無序列表 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簡介 57
3.12　JavaScript語言基礎(chǔ) 58
3.12.1　插入JavaScript 58
3.12.2　基本語法 59
3.12.3　變量和數(shù)據(jù)類型 59
3.12.4　語句 60
3.13　JavaScript的對象及其屬性和方法 63
3.14　事件處理 64
3.14.1　事件處理的類型 64
3.14.2　指定事件處理 64
3.15　小結(jié) 65
第4章　瀏覽器的兼容與解析問題 67
4.1　兼容問題的由來 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識別 71
4.4.3　僅IE 6識別 71
4.4.4　僅IE識別 72
4.4.5　兼容IE 6、IE 7、Firefox瀏覽器 73
4.5　CSS hack管理 75
4.6　IE條件注釋功能 76
4.7　小結(jié) 76
第二篇　實例制作篇
第5章　使用CSS制作背景 81
5.1　制作顏色背景 81
5.2　給元素添加背景圖片 82
5.2.1　指定背景圖像 83
5.2.2　制作重復(fù)的背景圖像 85
5.3　制作不動的背景 86
5.4　給網(wǎng)頁添加背景 89
5.5　制作滾動的背景 91
5.6　綜合使用背景 92
5.7　小結(jié) 94
第6章　使用CSS布局頁面頂部內(nèi)容 95
6.1　制作包含文本logo的頁面頂部 95
6.2　制作包含圖像logo的頁面頂部 97
6.2.1　制作實例 98
6.2.2　兼容問題 100
6.3　制作包含文本banner的頁面頂部 102
6.3.1　圖片logo的定位 103
6.3.2　定義快捷方式的文本樣式 105
6.3.3　定義段落文本banner樣式 107
6.4　制作包含圖像banner的頁面頂部 108
6.5　小結(jié) 112
第7章　使用CSS制作網(wǎng)站導(dǎo)航 114
7.1　制作一個簡單的橫向文字導(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　簡單盒模型hack方法 129
7.6　制作會動的長城型導(dǎo)航條 130
7.7　制作基于背景控制的導(dǎo)航條 135
7.8　制作左右自由伸展的導(dǎo)航條 138
7.8.1　九宮格技術(shù)原理 139
7.8.2　制作自由伸展的導(dǎo)航條實例 141
7.9　制作一個簡單的縱向?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ǎo)航條 151
7.13　制作下拉式導(dǎo)航條 155
7.13.1　制作實例 155
7.13.2　兼容問題 159
7.14　制作多級彈出導(dǎo)航條 160
7.14.1　制作實例 160
7.14.2　兼容問題 165
7.15　小結(jié) 167
第8章　使用CSS制作列表 169
8.1　制作新聞列表 169
8.1.1　制作實例 170
8.1.2　兼容問題 173
8.2　制作排行榜 174
8.3　制作自定義圖片項目符號的列表 177
8.3.1　使用列表符號樣式屬性制作列表 177
8.3.2　使用背景圖片屬性制作列表符號 180
8.3.3　兼容問題 181
8.4　使用CSS改變列表排版 182
8.5　列表縮進(jìn)排版 186
8.5.1　制作實例 186
8.5.2　兼容問題 189
8.6　復(fù)雜列表排版 191
8.6.1　overflow屬性語法結(jié)構(gòu) 191
8.6.2　制作實例 191
8.6.3　兼容問題 196
8.7　小結(jié) 198
第9章　使用CSS制作表單 200
9.1　制作登錄表單 200
9.1.1　label標(biāo)簽語法結(jié)構(gòu) 201
9.1.2　制作登錄表單實例 201
9.1.3　兼容問題 204
9.2　制作用戶注冊表單 205
9.2.1　制作頁面的XHTML代碼 206
9.2.2　制作頁面的CSS樣式 208
9.3　制作符合W3C標(biāo)準(zhǔn)的表單 213
9.3.1　制作頁面的XHTML代碼 213
9.3.2　制作頁面的CSS樣式 216
9.3.3　兼容問題 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)站圖文混排版式的實例 230
10.3　制作全圖排版的實例 235
10.3.1　自由浮動布局 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　制作仿按鈕下陷效果的實例 245
11.3　面包屑導(dǎo)航鏈接 246
11.3.1　制作實例 247
11.3.2　兼容問題 249
11.4　小結(jié) 250
第12章　使用CSS制作數(shù)據(jù)表格 252
12.1　制作基本的數(shù)據(jù)表格 252
12.1.1　表示數(shù)據(jù)的表格對象標(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　表格對象標(biāo)簽屬性 258
12.2.2　CSS屬性text-transform 259
12.2.3　制作數(shù)據(jù)表格實例 259
12.3　小結(jié) 266
第13章　使用CSS制作頁面底部內(nèi)容 267
13.1　制作文本信息的頁面底部內(nèi)容 267
13.1.1　a標(biāo)簽的title屬性 267
13.1.2　制作包含文本信息的頁面底部XHTML結(jié)構(gòu)代碼 267
13.1.3　制作頁面的CSS樣式 268
13.1.4　兼容問題 272
13.2　制作包含導(dǎo)航鏈接的頁面底部內(nèi)容 273
13.2.1　制作包含導(dǎo)航鏈接頁面底部的XHTML代碼結(jié)構(gòu) 273
13.2.2　制作頁面的CSS樣式 274
13.3　制作包含圖像友情鏈接的頁面底部內(nèi)容 278
13.3.1　制作頁面底部的XHTML結(jié)構(gòu) 278
13.3.2　制作頁面的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　三列浮動中間列寬度自適應(yīng) 299
14.9　高度自適應(yīng) 302
14.10　小結(jié) 303
第15章　CSS整體布局的實現(xiàn) 305
15.1　頂行三列布局的實現(xiàn) 305
15.1.1　制作思路 306
15.1.2　制作頂部三列式布局實例 307
15.2　多區(qū)域不規(guī)則布局 309
15.2.1　制作思路 310
15.2.2　制作多區(qū)域不規(guī)則布局的實例 313
15.3　小結(jié) 316
第16章　使用Dreamweaver制作頁面的實例 317
16.1　框架設(shè)計 317
16.1.1　頁面分析 318
16.1.2　框架制作 319
16.1.3　切圖 323
16.2　布局設(shè)計 326
16.2.1　頁面頂部布局設(shè)計 327
16.2.2　頁面中上部的布局設(shè)計 329
16.2.3　頁面中下部的布局設(shè)計 332
16.2.4　頁面底部的布局設(shè)計 336
16.3　模塊設(shè)計 338
16.3.1　快速導(dǎo)航制作 338
16.3.2　“面包屑”制作 341
16.3.3　數(shù)據(jù)表格制作 342
16.3.4　圖片排版 345
16.4　兼容性測試 348
16.5　小結(jié) 350
第四篇　綜合應(yīng)用篇
第17章　博客類網(wǎng)頁布局設(shè)計 353
17.1　頁面布局和規(guī)劃 354
17.1.1　界面設(shè)計分析 354
17.1.2　規(guī)劃頁面布局 354
17.2　CSS結(jié)構(gòu)設(shè)計與整體布局設(shè)計 356
17.2.1　CSS結(jié)構(gòu)設(shè)計 356
17.2.2　整體布局設(shè)計 357
17.3　頁面頭部布局設(shè)計 360
17.3.1　制作頭部的結(jié)構(gòu)代碼 360
17.3.2　編寫頭部的CSS代碼 361
17.4　日志部分的布局設(shè)計 363
17.4.1　制作日志部分的結(jié)構(gòu)代碼 364
17.4.2　編寫日志部分的CSS代碼 365
17.5　邊欄區(qū)域的布局設(shè)計 369
17.5.1　制作邊欄區(qū)域的結(jié)構(gòu)代碼 369
17.5.2　編寫右邊欄區(qū)域的CSS代碼 370
17.6　頁面底部的布局設(shè)計 372
17.6.1　制作底部的結(jié)構(gòu)代碼 372
17.6.2　編寫底部的CSS代碼 373
17.7　小結(jié) 374
第18章　企業(yè)類網(wǎng)頁布局設(shè)計 375
18.1　頁面布局和規(guī)劃 375
18.1.1　界面設(shè)計分析 376
18.1.2　規(guī)劃頁面布局 377
18.2　CSS結(jié)構(gòu)設(shè)計與整體布局設(shè)計 378
18.2.1　CSS文件結(jié)構(gòu)設(shè)計 378
18.2.2　首頁布局設(shè)計 379
18.3　頁面頭部布局設(shè)計 381
18.3.1　制作頭部的結(jié)構(gòu)代碼 381
18.3.2　編寫頭部的CSS樣式 382
18.4　頁面banner區(qū)域的布局設(shè)計 383
18.4.1　制作banner區(qū)域主體的布局設(shè)計 383
18.4.2　制作banner區(qū)域各個元素的布局設(shè)計 384
18.5　頁面主內(nèi)容區(qū)的布局設(shè)計 389
18.5.1　制作頁面主內(nèi)容區(qū)結(jié)構(gòu) 389
18.5.2　編寫CSS樣式 390
18.6　頻道頁面布局設(shè)計概述 393
18.7　小結(jié) 394