內 容 簡 介
本書系統、全面地講解了CSS基礎理論和實際運用技術，通過大量實例，對CSS應用進行了深入淺出的分析。全書主要內容包括CSS的基本語法和概念，設置文字、圖片、背景、表格、表單和菜單等網頁元素的方法，以及CSS濾鏡的使用和CSS如何控制XML文檔樣式，著重講解如何利用CSS + DIV進行網頁布局，注重實際操作，使讀者在學習CSS應用技術的同時能夠掌握CSS + DIV的精髓。同時，本書還詳細講解了其他書中較少涉及的技術細節，包括擴展CSS與JavaScript和XML等綜合應用的內容，以幫助讀者設計符合Web標準的網頁，提升技術競爭力。
本書內容翔實、結構清晰、循序漸進，基礎知識與案例實戰緊密結合，既可作為CSS初學者的入門教材，也適合中高級用戶進一步學習和參考。
前 言
隨著Web技術的發展，網頁標準化CSS + DIV的設計方式正逐漸取代傳統的表格布局模式，學習CSS也成為設計人員的必修課。Web標準提出將網頁的內容與表現分離，同時要求HTML文檔具有良好的結構，因此需要拋棄傳統的表格布局方式，采用DIV布局，并且使用CSS實現網頁的外觀設計。
本書系統地講解了CSS層疊樣式表的基礎理論和實際應用技術，通過大量實例對CSS進行深入淺出的分析，著重講解如何用CSS + DIV進行網頁布局，注重實際操作，使讀者在學習CSS應用技術的同時能夠掌握CSS + DIV的精髓。本書的主要特征如下。
1. 講述系統性的基礎知識
本書系統地講解了CSS層疊樣式表在網頁設計中各個方面的應用知識，從為什么要用CSS開始講解，循序漸進，配合大量實例，幫助讀者奠定堅實的理論基礎。
2. 結合大量的應用案例
書中設置了任務實施，重點強調具體技術的靈活應用，并且全書結合了作者的網頁設計制作經驗，使讀者能真正體會到“學以致用”。
3. 深入剖析CSS + DIV布局
本書用相當多的篇幅重點介紹了用CSS + DIV進行網頁布局的方法和技巧，配合經典的布局案例，幫助讀者掌握CSS最核心的應用技術。
4. 介紹高級的混合應用技術
真正的網頁除了外觀表現之外，還需要結構標準語言和行為標準語言的結合，因此書中還特別講解了CSS與JavaScript、Ajax和XML的混合應用(這些都是Web 2.0網站中的主要技術)，使讀者能夠掌握高級的網頁制作技術。
本書在講述理論知識的基礎上注重培養學生的實際操作能力，通過一系列實例分析、實踐等環節的訓練，提高學生的實際應用能力。本書在編排上注重理論與實踐的結合，采用案例教學模式，突出了實踐環節。
本書由河北聯合大學的封超、趙爽老師編著，其中項目一至項目五由封超老師編寫，項目六至項目九由趙爽老師編寫。參與本書整理及校對工作的還有吳濤、闞連合、張航、李偉、劉博、王秀華、薛貴軍、周振江等，在此一并表示感謝。
由于作者水平有限，書中不妥之處在所難免，敬請讀者批評指正。
目 錄
項目一 利用CSS設計頁面排版 1
任務一：使用繼承制作網頁 6
知識儲備 6
任務實踐 17
任務二：設計百度Logo 19
知識儲備 19
任務實踐 29
任務三：排版新聞文稿 30
知識儲備 30
任務實踐 39
上機實訓：制作百度搜索 42
實訓背景 42
實訓內容和要求 43
實訓步驟 43
實訓素材 46
習題 46
項目二 使用CSS設置圖片和
控制背景圖像 49
任務一：設計淘寶網頁圖片的布局 55
知識儲備 55
任務實踐 65
任務二：設計個人網站的主頁 70
知識儲備 70
任務實踐 78
上機實訓：制作古詞
“念奴嬌·赤壁懷古”網頁 81
實訓背景 81
實訓內容和要求 82
實訓步驟 82
實訓素材 84
習題 85
項目三 使用CSS設計表格和表單 87
任務一：設計日歷 93
知識儲備 93
任務實踐 101
任務二：設計娛樂新聞調查表 105
知識儲備 105
任務實踐 111
上機實訓：制作新浪網民調查問卷 114
實訓背景 114
實訓內容和要求 114
實訓步驟 114
實訓素材 117
習題 117
項目四 使用CSS控制列表樣式和
定義鏈接 119
任務一：設計百度導航條 125
知識儲備 125
任務實踐 134
任務二：設計美食圖片欣賞網頁 137
知識儲備 137
任務實踐 147
上機實訓：制作網頁的Tab菜單 150
實訓背景 150
實訓內容和要求 151
實訓步驟 151
實訓素材 157
習題 157
項目五 初識CSS + DIV排版布局 159
任務一：設計圖片的簽名 164
知識儲備 164
任務實踐 174
任務二：設計個人網頁 176
知識儲備 176
任務實踐 186
上機實訓：制作咖啡店網頁 190
實訓背景 190
實訓內容和要求 191
實訓步驟 191
實訓素材 194
習題 195
項目六 剖析網頁排版和CSS + DIV
布局 197
任務一：設計交河故城網頁 205
知識儲備 205
任務實踐 210
任務二：設計禪意花園的兩列
三列布局 214
知識儲備 214
任務實踐 228
上機實訓：制作清明上河圖網頁 234
實訓背景 234
實訓內容和要求 235
實訓步驟 235
實訓素材 239
習題 239
項目七 使用CSS定位控制網頁 241
任務一：設計浪漫式網頁 246
知識儲備 246
任務實踐 253
任務二：設計展覽式網頁 257
知識儲備 257
任務實踐 273
上機實訓：制作電子相冊 276
實訓背景 276
實訓內容和要求 277
實訓步驟 277
實訓素材 284
習題 284
項目八 使用JavaScript控制CSS 287
任務：設計燈光效果 290
知識儲備 290
任務實踐 301
上機實訓：制作跑馬燈特效 302
實訓背景 302
實訓內容和要求 303
實訓步驟 303
實訓素材 304
習題 305
項目九 使用CSS設計XML文檔
樣式 307
任務：設計新聞網頁 309
知識儲備 309
任務實踐 316
上機實訓：制作詩情畫意的圖文網頁 318
實訓背景 318
實訓內容和要求 319
實訓步驟 319
實訓素材 320
習題 321
參考答案 323
參考文獻 325
