圖書簡介：
CSS+DIV技術是目前最流行的網頁制作技術。
本書主要介紹了超文本標記語言HTML和XHTML、CSS層疊樣式表的基礎理論和實際運用技術，通過實例分析講解了CSS語法、文字段落設置、背景圖片設置以及CSS濾鏡的應用等，重點講解了如何運用CSS+DIV進行網頁布局，注重實際操作，使讀者能更好地掌握CSS技術及CSS+DIV布局的精髓。本書最后給出了兩個常見類型的完整網頁的綜合實例，讓讀者進一步鞏固所學的知識，提高綜合應用的能力。
本書適合作為大中專院校計算機應用技術和電子商務類專業的教材，也可作為網頁設計技術培訓教程，還可以作為Web網站開發人員、網頁設計師、網頁前端架構師、用戶體驗設計師的參考書。
前 言
隨著Web 2.0標準的普及，網頁標準化CSS+DIV的設計方式正逐漸取代傳統的表格布局模式。采用CSS+DIV布局的優勢主要體現在：能縮減頁面代碼，提高頁面瀏覽速度；結構清晰，容易被搜索引擎搜索到，天生優化了SEO等方面。所以對CSS的學習是計算機應用技術人員從事網站設計的必修課程。
本書的定位是零基礎學習CSS+DIV布局技術的大中專學生，也可用于幫助有表格布局基礎的學生向CSS+DIV布局技術過渡，還可以作為工程技術人員的參考書。
全書共分9章。第1章介紹HTML和XHTML基礎，重點介紹HTML基本用法及如何轉換現有的文檔為XHTML。第2章介紹CSS基礎，重點介紹CSS選擇器和CSS的引用。第3章介紹用CSS設置文字與背景。第4章介紹CSS濾鏡的應用，重點介紹視覺濾鏡和轉換濾鏡。第5章介紹CSS框模型與定位技術，重點介紹CSS框模型和CSS定位與浮動技術。第6章介紹DIV+CSS布局基礎，重點介紹CSS排版觀念和常見的CSS+DIV布局的樣式的制作方法，并詳細介紹兩個CSS+DIV布局的例子。第7章介紹CSS與JavaScript的綜合應用，重點介紹JavaScript語法、內置對象、瀏覽器對象和用CSS結合JavaScript制作網頁的一些特效應用。第8章和第9章介紹兩個綜合案例，分別介紹博客網站和企業網站的布局方法。
本書內容翔實、結構清晰、循序漸進，通過大量的技術應用實例深入講解CSS+DIV布局方法。書中精選的網頁綜合實例有很強的實際應用價值，大部分章節配備了習題和上機實訓練習題，便于讀者學習。
本書由黃玉春編寫，王標為本書提供了部分案例。在本書編寫的過程中，得到了不少專家和任課教師的大力支持，在此一并表示衷心的感謝。
編 者
目 錄
第1章 HTML和XHTML基礎 1
1.1 HTML基本用法 1
1.1.1 HTML文檔基本結構 2
1.1.2 常用的HTML標簽 3
1.2 升級到XHTML 13
1.2.1 為什么要升級 13
1.2.2 XHTML與HTML比較 14
1.2.3 如何轉換現有的文檔為
XHTML 16
習題1 17
上機實驗1 21
第2章 CSS基礎 22
2.1 CSS基本概念 22
2.1.1 CSS的基本概念 22
2.1.2 CSS的特點 23
2.2 CSS選擇器 23
2.2.1 CSS樣式規則的定義 23
2.2.2 標記選擇器 24
2.2.3 CSS選擇器分組 24
2.2.4 派生選擇器 25
2.2.5 id選擇器 25
2.2.6 類選擇器 26
2.2.7 偽類選擇器 26
2.3 CSS的引用 27
2.3.1 內部樣式表 27
2.3.2 外部樣式表 28
2.3.3 內聯樣式表 29
2.3.4 輸入樣式表 30
2.3.5 多重樣式 31
2.4 CSS的繼承 33
2.4.1 CSS的繼承關系 33
2.4.2 CSS繼承的應用 34
習題2 34
上機實驗2 35
第3章 用CSS設置文字與背景 37
3.1 CSS文字與段落樣式 37
3.1.1 CSS文字樣式 37
3.1.2 CSS段落文字 43
3.1.3 CSS列表 46
3.2 CSS顏色與背景樣式 50
3.2.1 設置顏色 50
3.2.2 設置背景圖像 52
3.2.3 背景圖像的重復方式 54
3.2.4 固定背景圖像 56
3.2.5 背景圖片位置 58
3.2.6 背景樣式的縮寫 60
3.3 綜合實例 61
3.3.1 文字的綜合應用 61
3.3.2 背景的綜合應用 63
習題3 65
上機實驗3 67
第4章 CSS濾鏡的應用 68
4.1 濾鏡概述 68
4.2 視覺濾鏡 68
4.2.1 alpha屬性 69
4.2.2 blur屬性 72
4.2.3 Chroma屬性 73
4.2.4 DropShadow屬性 74
4.2.5 FlipH、FlipV屬性 75
4.2.6 Glow屬性 77
4.2.7 Gray屬性 78
4.2.8 Invert屬性 79
4.2.9 Mask屬性 80
4.2.10 Shadow屬性 81
4.2.11 Wave屬性 82
4.2.12 Xray屬性 84
4.3 轉換濾鏡 85
4.3.1 融合轉換濾鏡 86
4.3.2 揭示轉換濾鏡 87
4.3.3 網頁特效轉換 89
習題4 91
上機實驗4 92
第5章 CSS框模型與定位 93
5.1 CSS框模型 93
5.1.1 CSS框模型的概述 93
5.1.2 CSS內邊距 95
5.1.3 CSS邊框 97
5.1.4 CSS外邊距 104
5.1.5 外邊距合并 108
5.2 CSS定位和浮動 109
5.2.1 塊級元素 110
5.2.2 CSS定位機制 110
5.2.3 相對定位 111
5.2.4 絕對定位 113
5.2.5 z-index空間位置 116
5.2.6 CSS浮動 117
5.3 CSS定位實例 123
習題5 127
上機實驗5 128
第6章 DIV+CSS布局基礎 129
6.1 div標記與span標記 129
6.1.1 div標記與span標記概述 129
6.1.2 <div>與<span>標記的區別 131
6.2 CSS排版觀念 132
6.2.1 將頁面用div分塊 132
6.2.2 設計各塊的位置 133
6.2.3 用CSS定位 134
6.3 固定寬度且居中的版式 135
6.3.1 一列固定寬度居中 135
6.3.2 二列固定寬度居中 137
6.4 自適應寬度且居中的版式 139
6.4.1 一列自適應寬度且居中 139
6.4.2 二列寬度自適應 140
6.4.3 左列固定，右列寬度
自適應 142
6.4.4 三列浮動中間列寬度
自適應 144
6.5 一個常用的DIV+CSS網站布局的
基本框架結構實例 147
6.5.1 搭建框架 147
6.5.2 添加CSS樣式 148
6.6 排版實例：淘寶商城 150
6.6.1 搭建HTML框架 151
6.6.2 添加CSS樣式 155
6.6.3 采用CSS+DIV布局優勢 156
習題6 157
上機實驗6 158
第7章 CSS與JavaScript的
綜合應用 159
7.1 JavaScript概述 159
7.1.1 JavaScript簡介 159
7.1.2 JavaScript的特點 160
7.1.3 在網頁中使用JavaScript 160
7.2 JavaScript語法基礎 162
7.2.1 JavaScript的數據類型 162
7.2.2 常量、變量與表達式 162
7.2.3 函數的定義 165
7.2.4 條件分支語句 167
7.2.5 循環控制語句 169
7.3 JavaScript內置對象 171
7.3.1 String對象 171
7.3.2 Math對象 174
7.3.3 Array對象 175
7.3.4 Date對象 177
7.4 瀏覽器對象 179
7.4.1 瀏覽器對象簡介 179
7.4.2 window對象 181
7.5 JavaScript的事件處理 186
7.5.1 事件及響應方法 186
7.5.2 document的常用事件 188
7.6 實例一：圖片的間歇滾動 189
7.7 實例二：用CSS制作的導航菜單 192
7.8 實例三：用CSS實現PPT幻燈片 195
習題7 196
上機實驗7 199
第8章 整合案例一：我的博客 203
8.1 分析架構 203
8.1.1 設計分析 203
8.1.2 排版架構 204
8.2 模塊設計 205
8.2.1 導航與Banner 205
8.2.2 左側列表 206
8.2.3 內容部分 208
8.2.4 footer腳注 209
8.3 整體調整 210
8.4 網頁源碼 211
第9章 整合案例二：企業網站 217
9.1 分析架構 217
9.1.1 設計分析 217
9.1.2 排版架構 218
9.2 模塊設計 219
9.2.1 導航與Banner 219
9.2.2 左側部分 221
9.2.3 中間部分 222
9.2.4 右側部分 224
9.2.5 footer腳注 226
9.3 整體調整 227
9.4 網頁源碼 228
參考文獻 236
