ERIC MEYER談CSS（卷1）

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