CSS從入門到精通

第一篇　基礎知識篇
第1章　與網(wǎng)頁有關的基本概念 3
1.1　網(wǎng)頁的基本構(gòu)成 3
1.2　網(wǎng)頁的結(jié)構(gòu)設計——HTML與XHTML 4
1.2.1　認識HTML 5
1.2.2　認識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標準 13
1.4.1　什么是Web標準 14
1.4.2　Web標準的構(gòu)成 14
1.4.3　Web標準的表現(xiàn)層技術 15
1.5　CSS+DIV建設網(wǎng)站 15
1.5.1　CSS+DIV的含義 15
1.5.2　CSS+DIV網(wǎng)站設計的優(yōu)勢 15
1.6　小結(jié) 16
第2章　CSS基礎知識 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　標簽指定式選擇符 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標識符里添加CSS 28
2.5.2　在XHTML頭信息標識符里添加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基礎 35
3.1　XHTML基礎知識 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中的標簽 40
3.2.2　XHTML的標簽屬性 41
3.3　XHTML的語法規(guī)范 42
3.3.1　標簽不能重疊，可以嵌套 42
3.3.2　XHTML文件一定要有正確的組織格式 42
3.3.3　標簽名字一定要用小寫字母 43
3.3.4　所有的 XHTML 元素一定要關閉 43
3.3.5　獨立的一個標簽也要結(jié)束用 />來結(jié)束 43
3.4　div標簽 43
3.4.1　什么是div 44
3.4.2　理解div 44
3.4.3　使用div 46
3.4.4　div的并列與嵌套 46
3.5　span標簽 47
3.5.1　什么是span 47
3.5.2　span與div的區(qū)別 47
3.6　h1至h6標簽 49
3.7　列表制作標簽ul、ol、li 49
3.7.1　ul無序列表 50
3.7.2　ol有序列表 51
3.8　p標簽和br標簽 51
3.8.1　p標簽 51
3.8.2　br標簽 52
3.9　img標簽 53
3.9.1　img標簽的屬性 53
3.9.2　img標簽使用方法 53
3.10　表單標簽 54
3.10.1　form標簽 54
3.10.2　input標簽 54
3.10.3　分組標簽fieldset、legend 56
3.11　JavaScript簡介 57
3.12　JavaScript語言基礎 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技術 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　制作重復的背景圖像 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)站導航 114
7.1　制作一個簡單的橫向文字導航條 114
7.2　制作方塊導航條 117
7.3　制作標簽式導航 119
7.4　制作按鈕導航條 122
7.5　CSS盒模型及盒模型hack 126
7.5.1　盒模型尺寸 126
7.5.2　盒模型hack 128
7.5.3　簡單盒模型hack方法 129
7.6　制作會動的長城型導航條 130
7.7　制作基于背景控制的導航條 135
7.8　制作左右自由伸展的導航條 138
7.8.1　九宮格技術原理 139
7.8.2　制作自由伸展的導航條實例 141
7.9　制作一個簡單的縱向?qū)Ш綏l 144
7.9.1　使用ul、li列表標簽制作導航條 145
7.9.2　使用div+h1標簽制作 145
7.10　制作分行導航條 148
7.11　制作增亮導航條 149
7.12　制作動感的導航條 151
7.13　制作下拉式導航條 155
7.13.1　制作實例 155
7.13.2　兼容問題 159
7.14　制作多級彈出導航條 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　列表縮進排版 186
8.5.1　制作實例 186
8.5.2　兼容問題 189
8.6　復雜列表排版 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標簽語法結(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標準的表單 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風格樣式的CSS按鈕 243
11.1.1　仿Windows經(jīng)典樣式的CSS按鈕 243
11.1.2　仿Windows XP風格的CSS按鈕 244
11.2　制作仿按鈕下陷效果的實例 245
11.3　面包屑導航鏈接 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ù)的表格對象標簽 252
12.1.2　使用表格標簽制作表格 252
12.1.3　使用CSS修飾表格樣式 254
12.2　制作CSS風格的數(shù)據(jù)表格 258
12.2.1　表格對象標簽屬性 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標簽的title屬性 267
13.1.2　制作包含文本信息的頁面底部XHTML結(jié)構(gòu)代碼 267
13.1.3　制作頁面的CSS樣式 268
13.1.4　兼容問題 272
13.2　制作包含導航鏈接的頁面底部內(nèi)容 273
13.2.1　制作包含導航鏈接頁面底部的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　一列寬度自適應 288
14.3　一列居中 290
14.4　二列固定寬度 292
14.5　二列寬度自適應 293
14.6　兩列右列寬度自適應 294
14.7　兩列固定寬度居中 297
14.8　三列浮動中間列寬度自適應 299
14.9　高度自適應 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　框架設計 317
16.1.1　頁面分析 318
16.1.2　框架制作 319
16.1.3　切圖 323
16.2　布局設計 326
16.2.1　頁面頂部布局設計 327
16.2.2　頁面中上部的布局設計 329
16.2.3　頁面中下部的布局設計 332
16.2.4　頁面底部的布局設計 336
16.3　模塊設計 338
16.3.1　快速導航制作 338
16.3.2　“面包屑”制作 341
16.3.3　數(shù)據(jù)表格制作 342
16.3.4　圖片排版 345
16.4　兼容性測試 348
16.5　小結(jié) 350
第四篇　綜合應用篇
第17章　博客類網(wǎng)頁布局設計 353
17.1　頁面布局和規(guī)劃 354
17.1.1　界面設計分析 354
17.1.2　規(guī)劃頁面布局 354
17.2　CSS結(jié)構(gòu)設計與整體布局設計 356
17.2.1　CSS結(jié)構(gòu)設計 356
17.2.2　整體布局設計 357
17.3　頁面頭部布局設計 360
17.3.1　制作頭部的結(jié)構(gòu)代碼 360
17.3.2　編寫頭部的CSS代碼 361
17.4　日志部分的布局設計 363
17.4.1　制作日志部分的結(jié)構(gòu)代碼 364
17.4.2　編寫日志部分的CSS代碼 365
17.5　邊欄區(qū)域的布局設計 369
17.5.1　制作邊欄區(qū)域的結(jié)構(gòu)代碼 369
17.5.2　編寫右邊欄區(qū)域的CSS代碼 370
17.6　頁面底部的布局設計 372
17.6.1　制作底部的結(jié)構(gòu)代碼 372
17.6.2　編寫底部的CSS代碼 373
17.7　小結(jié) 374
第18章　企業(yè)類網(wǎng)頁布局設計 375
18.1　頁面布局和規(guī)劃 375
18.1.1　界面設計分析 376
18.1.2　規(guī)劃頁面布局 377
18.2　CSS結(jié)構(gòu)設計與整體布局設計 378
18.2.1　CSS文件結(jié)構(gòu)設計 378
18.2.2　首頁布局設計 379
18.3　頁面頭部布局設計 381
18.3.1　制作頭部的結(jié)構(gòu)代碼 381
18.3.2　編寫頭部的CSS樣式 382
18.4　頁面banner區(qū)域的布局設計 383
18.4.1　制作banner區(qū)域主體的布局設計 383
18.4.2　制作banner區(qū)域各個元素的布局設計 384
18.5　頁面主內(nèi)容區(qū)的布局設計 389
18.5.1　制作頁面主內(nèi)容區(qū)結(jié)構(gòu) 389
18.5.2　編寫CSS樣式 390
18.6　頻道頁面布局設計概述 393
18.7　小結(jié) 394