ERIC MEYER談CSS（卷1）

第1章　轉(zhuǎn)換現(xiàn)有網(wǎng)頁(yè)　1
1.1　項(xiàng)目目標(biāo)　2
1.2　準(zhǔn)備工作　3
1.3　打下基礎(chǔ)　3
1.4　轉(zhuǎn)換文檔　5
1.4.1　徹底剝離　5
1.4.2　處理body　6
1.4.3　創(chuàng)建通用樣式　7
1.4.4　恢復(fù)頁(yè)頭效果　8
1.4.5　內(nèi)容和內(nèi)容頂部　10
1.4.6　給頁(yè)面的邊欄添加樣式　14
1.4.7　內(nèi)容單元格　16
1.4.8　恢復(fù)標(biāo)題　17
1.4.9　引用方塊的樣式　19
1.4.10　給頁(yè)面的右邊欄設(shè)置樣式　22
1.4.11　設(shè)置排行樣式　24
1.4.12　給提示信息添加樣式　25
1.4.13　修改頁(yè)腳　27
1.5　使用樣式的好處　29
1.6　練習(xí)　31
第2章　設(shè)置新聞稿頁(yè)面的樣式　33
2.1　項(xiàng)目目標(biāo)　33
2.2　準(zhǔn)備工作　34
2.3　打下基礎(chǔ)　34
2.4　編寫樣式　36
2.4.1　聯(lián)絡(luò)信息　36
2.4.2　頁(yè)腳　37
2.4.3　主要文字樣式　39
2.4.4　新聞標(biāo)題的樣式　41
2.4.5　潤(rùn)色頂部?jī)?nèi)容　42
2.5　修改樣式　43
2.5.1　修改頁(yè)面本身　43
2.5.2　頁(yè)面的頂部　44
2.6　制作外部樣式文件　47
2.7　添加到基礎(chǔ)設(shè)計(jì)中　49
2.7.1　再回到標(biāo)題　49
2.7.2　再次回到主要文字　50
2.7.3　頁(yè)腳　51
2.8　練習(xí)　53
第3章　設(shè)置日歷樣式　55
3.1　項(xiàng)目目標(biāo)　55
3.2　準(zhǔn)備工作　56
3.3　打下基礎(chǔ)　56
3.4　設(shè)置文檔樣式　59
3.4.1　設(shè)置日歷頂部的樣式　59
3.4.2　創(chuàng)建網(wǎng)格　60
3.4.3　區(qū)別月份　62
3.4.4　區(qū)分日期　63
3.4.5　修改7月份的日期樣式　65
3.4.6　突出顯示當(dāng)前日期　66
3.4.7　將日歷放到文檔中　67
3.5　給更詳細(xì)的日歷設(shè)置樣式　68
3.5.1　分割日期　69
3.5.2　總體修改　70
3.5.3　讓span元素塊狀顯示　71
3.5.4　日期靠角　72
3.5.5　重建網(wǎng)格　74
3.5.6　最后一些小修改　75
3.6　練習(xí)　77
第４章　讓鏈接生動(dòng)起來(lái)　79
4.1　項(xiàng)目目標(biāo)　79
4.2　準(zhǔn)備工作　80
4.3　打下基礎(chǔ)　80
4.4　設(shè)置文檔樣式　82
4.4.1　從頭開始　82
4.4.2　修改標(biāo)題　83
4.4.3　圖標(biāo)　85
4.4.4　修改主文字鏈接　87
4.4.5　幫助和新聞　88
4.4.6　清理工作　91
4.5　練習(xí)　93
第5章　如何設(shè)置菜單樣式　95
5.1　項(xiàng)目目標(biāo)　96
5.2　準(zhǔn)備工作　96
5.3　打下基礎(chǔ)　96
5.4　設(shè)置菜單樣式　98
5.4.1　讓鏈接以塊狀結(jié)構(gòu)顯示　98
5.4.2　設(shè)置字體和初始間距　100
5.4.3　給左邊導(dǎo)航加邊框　101
5.4.4　突出顯示當(dāng)前位置　103
5.4.5　給菜單增加懸停效果　104
5.4.6　添加一點(diǎn)額外的顏色　107
5.5　給菜單重新設(shè)置樣式　109
5.5.1　按鈕效果　110
5.5.2　圖標(biāo)按鈕　112
5.6　清理工作　113
5.7　練習(xí)　115
第6章　創(chuàng)建打印樣式　117
6.1　項(xiàng)目目標(biāo)　118
6.2　準(zhǔn)備工作　118
6.3　打下基礎(chǔ)　118
6.4　創(chuàng)建打印樣式　120
6.4.1　屏蔽樣式　120
6.4.2　從頭開始　120
6.4.3　隱藏左邊內(nèi)容　122
6.4.4　文章的更多樣式設(shè)置　124
6.4.5　頁(yè)腳　126
6.4.6　清理工作　126
6.4.7　隱藏URL　128
6.5　給新聞頁(yè)面設(shè)置打印樣式　128
6.5.1　檢查樣式　128
6.5.2　刪除背景　130
6.5.3　轉(zhuǎn)換成灰度顏色　130
6.6　為日歷創(chuàng)建打印樣式表　133
6.6.1　獲取一份最新的樣式表　133
6.6.2　開始工作　134
6.6.3　將鏈接變灰　136
6.6.4　淡化日期顏色　136
6.6.5　當(dāng)前日期沒有樣式　137
6.6.6　掃尾工作　138
6.7　練習(xí)　140
第7章　美化輸入表單　143
7.1　項(xiàng)目目標(biāo)　143
7.2　準(zhǔn)備工作　144
7.3　打下基礎(chǔ)　 144
7.4　設(shè)置文檔樣式　146
7.4.1　標(biāo)簽樣式　146
7.4.2　增大行間距　146
7.4.3　必填信息　147
7.4.4　提交按鈕區(qū)域　149
7.4.5　設(shè)置標(biāo)題的樣式　150
7.4.6　獲得焦點(diǎn)時(shí)的樣式　150
7.5　設(shè)置打印樣式表　151
7.5.1　填寫空格　152
7.5.2　處理select元素的另外一種方式　154
7.5.3　添加一些間距　155
7.5.4　提交按鈕區(qū)域(再次設(shè)置該區(qū)域)　156
7.5.5　添加地址　157
7.5.6　給必填信息項(xiàng)添加提示信息　158
7.5.7　給打印樣式添加點(diǎn)樂趣　159
7.6　最終效果　159
7.7　練習(xí)　162
第8章　創(chuàng)建在線賀卡　165
8.1　項(xiàng)目目標(biāo)　165
8.2　準(zhǔn)備工作　166
8.3　打下基礎(chǔ)　166
8.4　設(shè)置文檔樣式　167
8.4.1　讓賀卡居中對(duì)齊　167
8.4.2　建立上下文　169
8.4.3　保持可讀性　170
8.4.4　賀卡簽名　172
8.4.5　設(shè)置設(shè)計(jì)者姓名樣式　173
8.4.6　最終的結(jié)果　174
8.5　另一種樣式　175
8.5.1　重新放置簽名　177
8.5.2　讓設(shè)計(jì)者姓名可見　178
8.5.3　再來(lái)調(diào)整祝福語(yǔ)　179
8.5.4　另外一個(gè)改進(jìn)版　181
8.6　練習(xí)　182
第9章　多列布局　185
9.1　項(xiàng)目目標(biāo)　186
9.2　準(zhǔn)備工作　186
9.3　打下基礎(chǔ)　186
9.4　設(shè)置文檔樣式　188
9.4.1　定義基本的外觀　188
9.4.2　浮動(dòng)邊欄　189
9.4.3　改進(jìn)邊欄　190
9.4.4　調(diào)整布局　191
9.4.5　完成本輪工作　193
9.5　通過(guò)定位設(shè)置樣式　194
9.5.1　從浮動(dòng)到定位　194
9.5.2　定位的好處　197
9.5.3　實(shí)現(xiàn)相同位置的其他方法　197
9.6　設(shè)置3列的樣式　198
9.6.1　添加標(biāo)記　198
9.6.2　放置元素　199
9.6.3　與眾不同的外觀　200
9.6.4　調(diào)整新布局　201
9.6.5　利用定位的優(yōu)勢(shì)　202
9.6.6　整理工作　204
9.7　再次使用浮動(dòng)技術(shù)　206
9.7.1　換回到浮動(dòng)方式　206
9.7.2　不同點(diǎn)和共同點(diǎn)　207
9.8　練習(xí)　209
第10章　溜出盒子　211
10.1　項(xiàng)目目標(biāo)　212
10.2　準(zhǔn)備工作　212
10.3　打下基礎(chǔ)　212
10.4　設(shè)置文檔樣式　214
10.4.1　分離焦慮　214
10.4.2　移動(dòng)邊緣　216
10.4.3　菜單的魔力　217
10.4.4　考慮傾斜　219
10.5　創(chuàng)建曲線　222
10.5.1　創(chuàng)建傘形結(jié)構(gòu)　222
10.5.2　蘑菇頭的底部　223
10.5.3　圓形的標(biāo)題　224
10.5.4　設(shè)置蘑菇頭頂部的樣式　226
10.5.5　另外一邊的曲線　229
10.5.6　讓蘑菇頭成為一體　231
10.5.7　鏈接貓　231
10.5.8　稍作修改　232
10.6　練習(xí)　233
第11章　定位一個(gè)更漂亮的設(shè)計(jì)　235
11.1　項(xiàng)目目標(biāo)　236
11.2　準(zhǔn)備工作　236
11.3　打下基礎(chǔ)　236
11.4　設(shè)置文檔樣式　238
11.4.1　設(shè)置body的樣式　239
11.4.2　將內(nèi)容分幀　240
11.4.3　組合曲線　242
11.4.4　處理頁(yè)面頂部　243
11.4.5　設(shè)置內(nèi)容外邊距　245
11.4.6　裝飾封裝器　246
11.4.7　美化小節(jié)標(biāo)題　247
11.4.8　重新定位女人圖片　248
11.4.9　放置菜單和其他圖片　252
11.4.10　調(diào)整布局　255
11.4.11　適當(dāng)降低標(biāo)準(zhǔn)　258
11.5　練習(xí)　260
第12章　固定背景　263
12.1　項(xiàng)目目標(biāo)　264
12.2　準(zhǔn)備工作　264
12.3　打下基礎(chǔ)　264
12.4　設(shè)置文檔樣式　265
12.4.1　將文檔分塊　265
12.4.2　固定背景　267
12.4.3　潤(rùn)色內(nèi)容　269
12.4.4　設(shè)置標(biāo)題　270
12.4.5　設(shè)置鏈接的樣式　272
12.4.6　移動(dòng)固定的背景　275
12.4.7　調(diào)整布局　276
12.4.8　固定背景的力量　279
12.5　練習(xí)　280
第13章　用CSS制作本書　283
13.1　項(xiàng)目目標(biāo)　284
13.2　準(zhǔn)備工作　284
13.3　打下基礎(chǔ)　284
13.4　設(shè)置文檔樣式　285
13.4.1　邊欄　285
13.4.2　標(biāo)題頭　287
13.4.3　放置預(yù)覽圖片　290
13.4.4　標(biāo)題間距　291
13.4.5　列表　293
13.4.6　邊欄注釋　294
13.4.7　代碼塊和代碼片斷　298
13.4.8　插圖　299
13.4.9　代碼清單和表格　304
13.5　項(xiàng)目后分析　307
13.6　練習(xí)　309
索引　311