CSS設(shè)計徹底研究

第1章　(X)HTML與CSS核心基礎(chǔ)　1
1.1　HTML與XHTML　2
1.1.1　追根溯源　2
1.1.2　DOCTYPE(文檔類型)的含義與選擇　3
1.1.3　XHTML與HTML的重要區(qū)別　4
1.2　(X)HTML與CSS　6
1.2.1　CSS標(biāo)準(zhǔn)簡介　6
1.2.2　在HTML中引入CSS的方法　7
1.3　基本CSS選擇器　10
1.3.1　標(biāo)記選擇器　11
1.3.2　類別選擇器　12
1.3.3　ID選擇器　15
1.4　復(fù)合選擇器　16
1.4.1　“交集”選擇器　16
1.4.2　“并集”選擇器　18
1.4.3　后代選擇器　20
1.5　CSS的繼承特性　22
1.5.1　繼承關(guān)系　22
1.5.2　CSS繼承的運用　24
1.6　CSS的層疊特性　26
1.7　本章小結(jié)　28
第2章　“CSS禪意花園”作品鑒賞　29
2.1　“CSS禪意花園”簡介　30
2.2　郊野——兩列布局　33
2.3　像素畫——三列布局　34
2.4　百合池塘——三列布局變體　35
2.5　郁金香——多列布局　36
2.6　日與夜——包含圓角的設(shè)計　36
2.7　Si6——包含傾斜的設(shè)計　38
2.8　清茶時光——裝飾性設(shè)計　39
2.9　愛之空氣——流體布局　40
2.10　谷香——食品主題設(shè)計　41
2.11　城市——建筑主題設(shè)計　41
2.12　“卡通版”禪意花園——特色效果　42
2.13　收音機——特色效果　43
2.14　殺手風(fēng)格——特色效果　44
2.15　海底世界——特色效果　45
2.16　博物館——特色設(shè)計　47
2.17　劇院效果——特色效果　48
2.18　本章小結(jié)　48
第3章　深入理解盒子模型3　49
3.1　盒子的內(nèi)部結(jié)構(gòu)　50
3.2　邊框(border)　51
3.2.1　實驗1——border-style 　52
3.2.2　屬性值的簡寫形式　53
3.2.3　實驗2——屬性的縮寫形式　54
3.2.4　實驗3——邊框與背景　55
3.3　內(nèi)邊距(padding)　56
3.4　外邊距(margin)　57
3.5　盒子之間的關(guān)系　59
3.5.1　HTML與DOM　59
3.5.2　標(biāo)準(zhǔn)文檔流　62
3.5.3　<div>標(biāo)記與<span>標(biāo)記　63
3.6　盒子在標(biāo)準(zhǔn)流中的定位原則　65
3.6.1　實驗1——行內(nèi)元素之間的水平margin　66
3.6.2　實驗2——塊級元素之間的豎直margin　67
3.6.3　實驗3——嵌套盒子之間的margin　68
3.6.4　實驗4——將margin設(shè)置為負值　70
3.7　CSS中的幾何題　71
3.8　本章小結(jié)　74
第4章　盒子的浮動與定位4　75
4.1　盒子的浮動　76
4.1.1　準(zhǔn)備代碼　76
4.1.2　實驗1——設(shè)置第1個浮動的div　77
4.1.3　實驗2——設(shè)置第2個浮動的div　78
4.1.4　實驗3——設(shè)置第3個浮動的div　79
4.1.5　實驗4——改變浮動的方向　79
4.1.6　實驗5——再次改變浮動的方向　80
4.1.7　實驗6——全部向左浮動　81
4.1.8　實驗7——使用clear屬性清除浮動的影響　82
4.1.9　實驗8——擴展盒子的高度　83
4.2　盒子的定位　84
4.2.1　static(靜態(tài)定位)　85
4.2.2　relative(相對定位)　86
4.2.3　absolute(絕對定位)　90
4.2.4　fixed(固定定位)　97
4.3　z-index空間位置　97
4.4　盒子的display屬性　97
4.5　本章小結(jié)　99
第5章　文字與圖像　101
5.1　CSS文字樣式　102
5.1.1　準(zhǔn)備網(wǎng)頁　102
5.1.2　設(shè)置字體　103
5.1.3　文字大小　104
5.1.4　行高　106
5.1.5　文字顏色與背景顏色　108
5.1.6　文字加粗、傾斜與大小寫　109
5.1.7　文字的裝飾效果　110
5.1.8　文字的水平對齊方式與段首縮進設(shè)置　111
5.1.9　文字布局　111
5.1.10　段落的垂直對齊方式　112
5.2　CSS圖像樣式　115
5.2.1　基本設(shè)置　115
5.2.2　背景圖像　116
5.2.3　標(biāo)題的圖像替換　120
5.2.4　為圖像增加投影效果　125
5.3　本章小結(jié)　133
第6章　鏈接與導(dǎo)航　135
6.1　豐富的超鏈接特效　136
6.1.1　動態(tài)超鏈接　136
6.1.2　按鈕式超鏈接　137
6.1.3　CSS控制鼠標(biāo)指針　139
6.1.4　浮雕背景超鏈接　140
6.1.5　讓下劃線動起來　143
6.2　項目列表　144
6.2.1　列表的符號　144
6.2.2　圖片符號　146
6.3　簡單的導(dǎo)航菜單　148
6.3.1　簡單的豎直排列菜單　148
6.3.2　橫豎自由轉(zhuǎn)換菜單　151
6.4　本章小結(jié)　152
第7章　豎直排列的導(dǎo)航菜單　153
7.1　雙豎線菜單　154
7.1.1　HTML框架　154
7.1.2　設(shè)置容器的CSS樣式　155
7.1.3　設(shè)置菜單項的CSS樣式　156
7.1.4　解決出現(xiàn)的問題　157
7.2　雙斜角橫線菜單　160
7.2.1　基本設(shè)置　161
7.2.2　菜單項設(shè)置　162
7.3　立體菜單　163
7.3.1　基本設(shè)置　164
7.3.2　菜單項設(shè)置　164
7.4　箭頭菜單　166
7.4.1　基本思路　166
7.4.2　基本設(shè)置　168
7.4.3　設(shè)置箭頭效果　169
7.5　帶說明信息的菜單　172
7.5.1　基本思路　172
7.5.2　設(shè)置方法　173
7.6　本章小結(jié)　175
第8章　水平導(dǎo)航菜單　177
8.1　自適應(yīng)的水平菜單　178
8.2　自適應(yīng)的斜角水平菜單　180
8.2.1　基本思路　180
8.2.2　基本設(shè)置　181
8.2.3　設(shè)置斜角效果　182
8.2.4　設(shè)置鼠標(biāo)經(jīng)過效果　184
8.3　應(yīng)用滑動門技術(shù)的玻璃效果菜單　185
8.3.1　基本思路　185
8.3.2　設(shè)置菜單整體效果　186
8.3.3　使用“滑動門”技術(shù)設(shè)置玻璃材質(zhì)背景　187
8.3.4　進一步解決的問題　189
8.4　三狀態(tài)玻璃效果菜單(雙層滑動門應(yīng)用)　192
8.4.1　設(shè)置菜單整體效果　192
8.4.2　設(shè)置第一層滑動門　193
8.4.3　設(shè)置第二層滑動門　195
8.4.4　設(shè)置表示當(dāng)前頁面的菜單項　195
8.4.5　進一步解決的問題　196
8.5　不使用圖像的圓角菜單　197
8.5.1　實現(xiàn)圓角效果　197
8.5.2　用列表進行改造　200
8.5.3　設(shè)置鼠標(biāo)響應(yīng)效果　202
8.6　會跳起的多彩菜單　203
8.6.1　實現(xiàn)跳起效果　203
8.6.2　實現(xiàn)多彩效果　205
8.6.3　本案例的完整代碼　206
8.6.4　實現(xiàn)向下彈出效果　210
8.7　本章小結(jié)　211
第9章　下拉菜單　213
9.1　HTML中的dl、dt和dd標(biāo)記　214
9.2　菜單的HTML結(jié)構(gòu)　215
9.3　對整體進行設(shè)置　216
9.4　對dl進行設(shè)置　217
9.5　對主菜單項(dt)進行設(shè)置　218
9.6　對子菜單項(dd)進行設(shè)置　219
9.7　對鼠標(biāo)響應(yīng)進行設(shè)置　220
9.8　實現(xiàn)主菜單項的不同顏色　222
9.9　IE 6兼容　223
9.10　本章小結(jié)　227
第10章　表格也精彩　229
10.1　控制表格　230
10.1.1　表格中的標(biāo)記　230
10.1.2　表格的邊框　232
10.1.3　表格寬度的確定　236
10.1.4　其他與表格相關(guān)的標(biāo)記　236
10.2　美化表格　237
10.2.1　搭建HTML結(jié)構(gòu)　238
10.2.2　整體設(shè)置　239
10.2.3　設(shè)置單元格樣式　239
10.2.4　隔行變色　240
10.2.5　設(shè)置列樣式　241
10.3　鼠標(biāo)指針經(jīng)過時整行變色提示的表格　243
10.3.1　搭建HTML結(jié)構(gòu)　244
10.3.2　在Firefox和IE 7中實現(xiàn)鼠標(biāo)指針經(jīng)過時整行變色　245
10.3.3　在IE 6中實現(xiàn)鼠標(biāo)指針經(jīng)過時整行變色　246
10.4　Excel方式二維變色提示的表格　247
10.4.1　改造CSS代碼　247
10.4.2　改造JavaScript代碼　248
10.5　多視圖模式日歷案例概述　250
10.6　制作中視圖模式　253
10.6.1　搭建HTML結(jié)構(gòu)　253
10.6.2　設(shè)置整體樣式和表頭樣式　254
10.6.3　設(shè)置日歷單元格樣式　255
10.6.4　總結(jié)經(jīng)驗　258
10.7　制作小視圖模式　259
10.7.1　整體設(shè)置　259
10.7.2　為IE 7和Firefox制作鼠標(biāo)指針經(jīng)過時彈出的信息框　260
10.7.3　為IE 6制作鼠標(biāo)指針經(jīng)過時彈出的信息框　263
10.8　制作大視圖模式　265
10.8.1　通過display屬性改變盒子的類型　265
10.8.2　設(shè)置日程安排項目　267
10.9　本章小結(jié)　269
第11章　圓角設(shè)計　271
11.1　圓角框的作用　272
11.2　固定寬度圓角框　273
11.2.1　兩背景圖像法　273
11.2.2　使用透明背景圖　276
11.2.3　帶邊框的固定寬度圓角框　277
11.2.4　單背景圖像的帶邊框固定寬度圓角框　279
11.3　不固定寬度的圓角框　281
11.3.1　不固定寬度圓角框的含義　281
11.3.2　“4圖像”單色不固定寬度圓角框　282
11.3.3　“4圖像滑動門”單色不固定寬度圓角框　285
11.4　“5圖像”二維滑動門經(jīng)典圓角框　288
11.4.1　準(zhǔn)備圖像　289
11.4.2　搭建HTML結(jié)構(gòu)　290
11.4.3　放置背景圖像　291
11.4.4　設(shè)置樣式并修復(fù)缺口　292
11.4.5　在整體頁面中使用圓角框　294
11.4.6　實現(xiàn)網(wǎng)頁換膚　296
11.5　本章小結(jié)　299
第12章　應(yīng)用Spry制作高級網(wǎng)頁組件　301
12.1　Tab菜單與Tab面板簡介　302
12.2　Tab菜單　303
12.2.1　搭建HTML結(jié)構(gòu)　303
12.2.2　設(shè)置整體的樣式　304
12.2.3　設(shè)置Tab的樣式　304
12.2.4　設(shè)置當(dāng)前頁的Tab樣式　306
12.3　借助于Spry實現(xiàn)Tab面板　307
12.3.1　建立基本的Tab面板　308
12.3.2　準(zhǔn)備背景圖片　310
12.3.3　設(shè)置整體的CSS樣式　310
12.3.4　設(shè)置單個Tab的CSS樣式　311
12.3.5　設(shè)置單個Tab的滑動門背景　312
12.3.6　設(shè)置鼠標(biāo)經(jīng)過效果　313
12.3.7　設(shè)置當(dāng)前頁效果　314
12.3.8　設(shè)置Tab頁內(nèi)容的CSS樣式　315
12.3.9　鼠標(biāo)經(jīng)過時換頁　316
12.4　折疊面板　317
12.4.1　建立基本的折疊面板　317
12.4.2　準(zhǔn)備背景圖片　318
12.4.3　整體設(shè)置　318
12.4.4　設(shè)置折疊面板的標(biāo)題　319
12.4.5　設(shè)置折疊面板的初始狀態(tài)　320
12.4.6　設(shè)置展開狀態(tài)的標(biāo)題背景　321
12.4.7　設(shè)置鼠標(biāo)經(jīng)過時的標(biāo)題背景　322
12.5　伸縮面板　323
12.5.1　建立基本的伸縮面板　323
12.5.2　設(shè)置標(biāo)題的樣式　324
12.5.3　對最上面的標(biāo)題進行特殊處理　325
12.6　本章小結(jié)　327
第13章　固定寬度布局剖析與制作　329
13.1　CSS排版觀念　330
13.1.1　MSN的首頁　330
13.1.2　Yahoo.com 　331
13.1.3　Times.com 　331
13.1.4　CNN.com　332
13.1.5　163.com 　333
13.2　單列布局　334
13.2.1　放置第一個圓角框　335
13.2.2　設(shè)置圓角框的CSS樣式　335
13.2.3　放置其他圓角框　338
13.3　“1-2-1”固定寬度布局　340
13.3.1　準(zhǔn)備工作　340
13.3.2　絕對定位法　342
13.3.3　浮動法　343
13.4　“1-3-1”固定寬度布局　346
13.5　“1-((1-2)+1)-1”固定寬度布局　348
13.6　魔術(shù)布局　350
13.6.1　制作步驟　351
13.6.2　修正缺陷　353
13.7　本章小結(jié)　356
第14章　變寬度網(wǎng)頁布局剖析與制作　359
14.1　“1-2-1”變寬度網(wǎng)頁布局　360
14.1.1　“1-2-1”等比例變寬布局　360
14.1.2　“1-2-1”單列變寬布局　362
14.2　“1-3-1”寬度適應(yīng)布局　367
14.2.1　“1-3-1”三列寬度等比例布局　367
14.2.2　“1-3-1”單側(cè)列寬度固定的變寬布局　367
14.2.3　“1-3-1”中間列寬度固定的變寬布局　370
14.2.4　進一步的思考　373
14.2.5　“1-3-1”雙側(cè)列寬度固定的變寬布局　373
14.2.6　“1-3-1”中列和側(cè)列寬度固定的變寬布局　376
14.3　變寬布局方法總結(jié)　378
14.4　分列布局背景色問題　379
14.4.1　固定寬度布局的列背景色設(shè)置　380
14.4.2　特殊寬度變化布局的列背景色設(shè)置　384
14.4.3　單列寬度變化布局的列背景色設(shè)置　384
14.4.4　多列等比例寬度變化布局的列背景色設(shè)置　385
14.5　CSS排版與傳統(tǒng)的表格方式排版的分析　388
14.6　本章小結(jié)　390
第15章　“CSS禪意花園”作品研究　393
15.1　“禪意花園”頁面HTML結(jié)構(gòu)分析　394
15.2　親自動手　397
15.2.1　結(jié)構(gòu)分析　397
15.2.2　整體設(shè)置　398
15.2.3　設(shè)置頁頭　399
15.2.4　設(shè)置supportingText部分和linkList部分　401
15.3　禪意花園作品的賞析與借鑒方法指導(dǎo)　403
15.3.1　191號作品分析　404
15.3.2　026號作品　411
15.3.3　175號作品　413
15.4　本章小結(jié)　414
第16章　綜合案例研究　415
16.1　《簡約夕陽》(158號作品)布局方法剖析　416
16.1.1　設(shè)置漸變的頁面背景　417
16.1.2　設(shè)置整體結(jié)構(gòu)　419
16.1.3　設(shè)置linkList　420
16.1.4　設(shè)置各個部分的標(biāo)題　420
16.1.5　設(shè)置footer　422
16.1.6　本案例的總結(jié)　423
16.2　《日記》(191號作品)布局方法剖析　423
16.2.1　準(zhǔn)備圖片　424
16.2.2　設(shè)置頁頭　426
16.2.3　設(shè)置supportingText部分　430
16.2.4　設(shè)置linkList部分　432
16.2.5　本案例總結(jié)　434
16.3　本章小結(jié)　434
第17章　從學(xué)習(xí)到創(chuàng)作　435
17.1　拍攝素材照片　436
17.2　在圖像軟件中設(shè)計方案　438
17.3　整體的結(jié)構(gòu)分析　440
17.4　CSS樣式設(shè)計與編碼　442
17.5　修改新頁面方案　448
17.6　本章小結(jié)　449
附錄　CSS英文小字典　451