CSS設(shè)計(jì)徹底研究

第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)簡(jiǎ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繼承的運(yùn)用　24
1.6　CSS的層疊特性　26
1.7　本章小結(jié)　28
第2章　“CSS禪意花園”作品鑒賞　29
2.1　“CSS禪意花園”簡(jiǎn)介　30
2.2　郊野——兩列布局　33
2.3　像素畫(huà)——三列布局　34
2.4　百合池塘——三列布局變體　35
2.5　郁金香——多列布局　36
2.6　日與夜——包含圓角的設(shè)計(jì)　36
2.7　Si6——包含傾斜的設(shè)計(jì)　38
2.8　清茶時(shí)光——裝飾性設(shè)計(jì)　39
2.9　愛(ài)之空氣——流體布局　40
2.10　谷香——食品主題設(shè)計(jì)　41
2.11　城市——建筑主題設(shè)計(jì)　41
2.12　“卡通版”禪意花園——特色效果　42
2.13　收音機(jī)——特色效果　43
2.14　殺手風(fēng)格——特色效果　44
2.15　海底世界——特色效果　45
2.16　博物館——特色設(shè)計(jì)　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　實(shí)驗(yàn)1——border-style 　52
3.2.2　屬性值的簡(jiǎn)寫(xiě)形式　53
3.2.3　實(shí)驗(yàn)2——屬性的縮寫(xiě)形式　54
3.2.4　實(shí)驗(yàn)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　實(shí)驗(yàn)1——行內(nèi)元素之間的水平margin　66
3.6.2　實(shí)驗(yàn)2——塊級(jí)元素之間的豎直margin　67
3.6.3　實(shí)驗(yàn)3——嵌套盒子之間的margin　68
3.6.4　實(shí)驗(yàn)4——將margin設(shè)置為負(fù)值　70
3.7　CSS中的幾何題　71
3.8　本章小結(jié)　74
第4章　盒子的浮動(dòng)與定位4　75
4.1　盒子的浮動(dòng)　76
4.1.1　準(zhǔn)備代碼　76
4.1.2　實(shí)驗(yàn)1——設(shè)置第1個(gè)浮動(dòng)的div　77
4.1.3　實(shí)驗(yàn)2——設(shè)置第2個(gè)浮動(dòng)的div　78
4.1.4　實(shí)驗(yàn)3——設(shè)置第3個(gè)浮動(dòng)的div　79
4.1.5　實(shí)驗(yàn)4——改變浮動(dòng)的方向　79
4.1.6　實(shí)驗(yàn)5——再次改變浮動(dòng)的方向　80
4.1.7　實(shí)驗(yàn)6——全部向左浮動(dòng)　81
4.1.8　實(shí)驗(yàn)7——使用clear屬性清除浮動(dòng)的影響　82
4.1.9　實(shí)驗(yàn)8——擴(kuò)展盒子的高度　83
4.2　盒子的定位　84
4.2.1　static(靜態(tài)定位)　85
4.2.2　relative(相對(duì)定位)　86
4.2.3　absolute(絕對(duì)定位)　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)頁(yè)　102
5.1.2　設(shè)置字體　103
5.1.3　文字大小　104
5.1.4　行高　106
5.1.5　文字顏色與背景顏色　108
5.1.6　文字加粗、傾斜與大小寫(xiě)　109
5.1.7　文字的裝飾效果　110
5.1.8　文字的水平對(duì)齊方式與段首縮進(jìn)設(shè)置　111
5.1.9　文字布局　111
5.1.10　段落的垂直對(duì)齊方式　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　動(dòng)態(tài)超鏈接　136
6.1.2　按鈕式超鏈接　137
6.1.3　CSS控制鼠標(biāo)指針　139
6.1.4　浮雕背景超鏈接　140
6.1.5　讓下劃線動(dòng)起來(lái)　143
6.2　項(xiàng)目列表　144
6.2.1　列表的符號(hào)　144
6.2.2　圖片符號(hào)　146
6.3　簡(jiǎn)單的導(dǎo)航菜單　148
6.3.1　簡(jiǎn)單的豎直排列菜單　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è)置菜單項(xiàng)的CSS樣式　156
7.1.4　解決出現(xiàn)的問(wèn)題　157
7.2　雙斜角橫線菜單　160
7.2.1　基本設(shè)置　161
7.2.2　菜單項(xiàng)設(shè)置　162
7.3　立體菜單　163
7.3.1　基本設(shè)置　164
7.3.2　菜單項(xiàng)設(shè)置　164
7.4　箭頭菜單　166
7.4.1　基本思路　166
7.4.2　基本設(shè)置　168
7.4.3　設(shè)置箭頭效果　169
7.5　帶說(shuō)明信息的菜單　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)過(guò)效果　184
8.3　應(yīng)用滑動(dòng)門(mén)技術(shù)的玻璃效果菜單　185
8.3.1　基本思路　185
8.3.2　設(shè)置菜單整體效果　186
8.3.3　使用“滑動(dòng)門(mén)”技術(shù)設(shè)置玻璃材質(zhì)背景　187
8.3.4　進(jìn)一步解決的問(wèn)題　189
8.4　三狀態(tài)玻璃效果菜單(雙層滑動(dòng)門(mén)應(yīng)用)　192
8.4.1　設(shè)置菜單整體效果　192
8.4.2　設(shè)置第一層滑動(dòng)門(mén)　193
8.4.3　設(shè)置第二層滑動(dòng)門(mén)　195
8.4.4　設(shè)置表示當(dāng)前頁(yè)面的菜單項(xiàng)　195
8.4.5　進(jìn)一步解決的問(wèn)題　196
8.5　不使用圖像的圓角菜單　197
8.5.1　實(shí)現(xiàn)圓角效果　197
8.5.2　用列表進(jìn)行改造　200
8.5.3　設(shè)置鼠標(biāo)響應(yīng)效果　202
8.6　會(huì)跳起的多彩菜單　203
8.6.1　實(shí)現(xiàn)跳起效果　203
8.6.2　實(shí)現(xiàn)多彩效果　205
8.6.3　本案例的完整代碼　206
8.6.4　實(shí)現(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　對(duì)整體進(jìn)行設(shè)置　216
9.4　對(duì)dl進(jìn)行設(shè)置　217
9.5　對(duì)主菜單項(xiàng)(dt)進(jìn)行設(shè)置　218
9.6　對(duì)子菜單項(xiàng)(dd)進(jìn)行設(shè)置　219
9.7　對(duì)鼠標(biāo)響應(yīng)進(jìn)行設(shè)置　220
9.8　實(shí)現(xiàn)主菜單項(xiàng)的不同顏色　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)過(guò)時(shí)整行變色提示的表格　243
10.3.1　搭建HTML結(jié)構(gòu)　244
10.3.2　在Firefox和IE 7中實(shí)現(xiàn)鼠標(biāo)指針經(jīng)過(guò)時(shí)整行變色　245
10.3.3　在IE 6中實(shí)現(xiàn)鼠標(biāo)指針經(jīng)過(guò)時(shí)整行變色　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)驗(yàn)　258
10.7　制作小視圖模式　259
10.7.1　整體設(shè)置　259
10.7.2　為IE 7和Firefox制作鼠標(biāo)指針經(jīng)過(guò)時(shí)彈出的信息框　260
10.7.3　為IE 6制作鼠標(biāo)指針經(jīng)過(guò)時(shí)彈出的信息框　263
10.8　制作大視圖模式　265
10.8.1　通過(guò)display屬性改變盒子的類型　265
10.8.2　設(shè)置日程安排項(xiàng)目　267
10.9　本章小結(jié)　269
第11章　圓角設(shè)計(jì)　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圖像滑動(dòng)門(mén)”單色不固定寬度圓角框　285
11.4　“5圖像”二維滑動(dòng)門(mén)經(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　在整體頁(yè)面中使用圓角框　294
11.4.6　實(shí)現(xiàn)網(wǎng)頁(yè)換膚　296
11.5　本章小結(jié)　299
第12章　應(yīng)用Spry制作高級(jí)網(wǎng)頁(yè)組件　301
12.1　Tab菜單與Tab面板簡(jiǎn)介　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)前頁(yè)的Tab樣式　306
12.3　借助于Spry實(shí)現(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è)置單個(gè)Tab的CSS樣式　311
12.3.5　設(shè)置單個(gè)Tab的滑動(dòng)門(mén)背景　312
12.3.6　設(shè)置鼠標(biāo)經(jīng)過(guò)效果　313
12.3.7　設(shè)置當(dāng)前頁(yè)效果　314
12.3.8　設(shè)置Tab頁(yè)內(nèi)容的CSS樣式　315
12.3.9　鼠標(biāo)經(jīng)過(guò)時(shí)換頁(yè)　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è)置展開(kāi)狀態(tài)的標(biāo)題背景　321
12.4.7　設(shè)置鼠標(biāo)經(jīng)過(guò)時(shí)的標(biāo)題背景　322
12.5　伸縮面板　323
12.5.1　建立基本的伸縮面板　323
12.5.2　設(shè)置標(biāo)題的樣式　324
12.5.3　對(duì)最上面的標(biāo)題進(jìn)行特殊處理　325
12.6　本章小結(jié)　327
第13章　固定寬度布局剖析與制作　329
13.1　CSS排版觀念　330
13.1.1　MSN的首頁(yè)　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　放置第一個(gè)圓角框　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　絕對(duì)定位法　342
13.3.3　浮動(dòng)法　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)頁(yè)布局剖析與制作　359
14.1　“1-2-1”變寬度網(wǎng)頁(yè)布局　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　進(jìn)一步的思考　373
14.2.5　“1-3-1”雙側(cè)列寬度固定的變寬布局　373
14.2.6　“1-3-1”中列和側(cè)列寬度固定的變寬布局　376
14.3　變寬布局方法總結(jié)　378
14.4　分列布局背景色問(wèn)題　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　“禪意花園”頁(yè)面HTML結(jié)構(gòu)分析　394
15.2　親自動(dòng)手　397
15.2.1　結(jié)構(gòu)分析　397
15.2.2　整體設(shè)置　398
15.2.3　設(shè)置頁(yè)頭　399
15.2.4　設(shè)置supportingText部分和linkList部分　401
15.3　禪意花園作品的賞析與借鑒方法指導(dǎo)　403
15.3.1　191號(hào)作品分析　404
15.3.2　026號(hào)作品　411
15.3.3　175號(hào)作品　413
15.4　本章小結(jié)　414
第16章　綜合案例研究　415
16.1　《簡(jiǎn)約夕陽(yáng)》(158號(hào)作品)布局方法剖析　416
16.1.1　設(shè)置漸變的頁(yè)面背景　417
16.1.2　設(shè)置整體結(jié)構(gòu)　419
16.1.3　設(shè)置linkList　420
16.1.4　設(shè)置各個(gè)部分的標(biāo)題　420
16.1.5　設(shè)置footer　422
16.1.6　本案例的總結(jié)　423
16.2　《日記》(191號(hào)作品)布局方法剖析　423
16.2.1　準(zhǔn)備圖片　424
16.2.2　設(shè)置頁(yè)頭　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è)計(jì)方案　438
17.3　整體的結(jié)構(gòu)分析　440
17.4　CSS樣式設(shè)計(jì)與編碼　442
17.5　修改新頁(yè)面方案　448
17.6　本章小結(jié)　449
附錄　CSS英文小字典　451