內容簡介

DIV+CSS技術是目前最流行的網頁制作技術。本書主要介紹了超文本標記語言HTML(HTML5)、CSS(CSS3)層疊樣式表和JavaScript(jQuery)的基礎知識和實際運用技術。通過實例的分析講解了CSS語法、文字段落設置、背景圖片設置以及CSS3新功能等。重點講解了如何運用DIV+CSS進行網頁布局，注重實際操作，使讀者更好地掌握CSS技術及DIV+CSS布局的精髓。本書最后提供了兩個常見類型的完整網頁的綜合實例，讓讀者進一步鞏固所學的知識，提高綜合應用的能力。

本書適合大中專院校計算機應用技術和電子商務類專業教材，也可作為社會上網頁設計技術的培訓教程，還可以作為廣大Web網站開發人員、網頁設計師、網頁前端架構師、用戶體驗設計師的參考書。

 

本書配套有實例源代碼及電子教案(PPT)。

 

第2版前言

　　本書多年來受到許多讀者歡迎，非常榮幸。此次改版是基于網頁設計技術的發展需要，增加了網頁設計技術的最新內容，刪減了一些不必要的內容。目前HTML5和CSS3是HTML和CSS的最新版本，現在它們仍處于發展階段，但大部分主流瀏覽器都支持HTML5和CSS3技術。用DIV+ CSS3技術實現網頁布局設計是網頁前端設計的主流技術。網頁前端三大技術是HTML、CSS和JavaScript(jQuery)。

　　本書作為網頁設計技術教程，最重要的特色就是將復雜、難以理解的問題簡單化，讓讀者輕松理解并掌握。與第1版相比，本書增加了HTML5、CSS3和jQuery知識，刪減了只有IE瀏覽器有較好支持的CSS濾鏡技術(CSS3技術可以很好地替代IE的CSS濾鏡效果)。本書案例均采用HTML5技術標準編寫。

　　全書共分9章。第1章介紹HTML與HTML5基礎，重點介紹HTML基本用法及HTML5新特點及新加標簽的使用。第2章介紹CSS基礎和CSS3新功能，重點介紹CSS選擇器和CSS及CSS3的應用。第3章介紹用CSS設置文字與背景，并介紹了一個綜合設置文字及背景的實例。第4章介紹CSS的框模型與定位技術，重點介紹CSS框模型和CSS定位與浮動技術。第5章介紹DIV+CSS布局基礎，重點介紹CSS排版觀念和常見的DIV+CSS布局的樣式的制作方法，并詳細介紹兩個DIV+CSS布局的例子。第6章介紹JavaScript基礎，重點介紹JavaScript語法、內置對象、瀏覽器對象和JavaScript制作網頁的一些特效應用。第7章介紹了CSS與jQuery的綜合應用，重點介紹了jQuery基本語法、jQuery常用效果、jQuery遍歷元素，并通過CSS3與jQuery結合的常用實例。第8章和第9章介紹了兩個綜合案例，分別介紹博客網站和公益網站首頁的布局方法。

　　本書沿襲了第1版內容翔實、結構清晰、循序漸進，通過大量的技術應用實例深入講解DIV+CSS布局方法的特點。書中精選的網頁綜合實例有很強的實際應用價值，大部分章節配備了習題和上機實訓練習題，便于讀者學習。

　　本書由黃玉春主編，王標為本書提供了部分案例。在本書編寫的過程中，得到了不少專家和任課教師的大力支持，在此一并表示衷心的感謝。

　　

　　

　　編  者  

　　

　　

第1版前言

　　

　　隨著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與HTML5基礎 1

1.1  HTML的基本用法 1

1.1.1  HTML文檔的基本結構 1

1.1.2  常用的HTML標記 3

1.2  升級到XHTML 18

1.2.1  為什么要升級HTML 18

1.2.2  XHTML與HTML比較 19

1.2.3  如何轉換現有的文檔

為XHTML 21

1.3  HTML5概述 22

1.3.1  HTML5的發展歷程 22

1.3.2  HTML5的優勢 23

1.3.3  HTML5的新元素 24

習題1 25

上機實驗1 29

第2章　CSS與CSS3基礎 30

2.1  CSS的基本概念和特點 30

2.1.1  CSS的基本概念 30

2.1.2  CSS的特點 31

2.2  CSS選擇器 31

2.2.1  CSS樣式規則的定義 31

2.2.2  標記選擇器 32

2.2.3  CSS選擇器分組 32

2.2.4  派生選擇器 32

2.2.5  id選擇器 33

2.2.6  類選擇器 34

2.2.7  偽類選擇器 34

2.3  CSS的引用 35

2.3.1  內部樣式表 35

2.3.2  外部樣式表 36

2.3.3  內聯樣式表 37

2.3.4  輸入樣式表 38

2.3.5  多重樣式表 39

2.4  CSS的繼承 41

2.4.1  CSS的繼承關系 41

2.4.2  CSS繼承的應用 42

2.5  CSS3簡介 43

2.5.1  CSS3的邊框 43

2.5.2  CSS3的漸變 45

2.5.3  CSS3的其他常用屬性 47

習題2 49

上機實驗2 50

第3章  用CSS設置文字與背景 51

3.1  CSS的文字與段落樣式 51

3.1.1  CSS的文字樣式 51

3.1.2  CSS的段落文字 57

3.1.3  CSS的列表 61

3.2  CSS的顏色與背景樣式 65

3.2.1  設置顏色 65

3.2.2  設置背景圖像 68

3.2.3  背景圖像的重復方式 69

3.2.4  固定背景圖像 72

3.2.5  背景圖片位置 73

3.2.6  背景樣式的縮寫 75

3.3  綜合實例 76

3.3.1  文字的綜合應用 76

3.3.2  背景的綜合應用 79

習題3 81

上機實驗3 83

第4章  CSS的框模型與定位 84

4.1  CSS的框模型 84

4.1.1  CSS的框模型概述 84

4.1.2  CSS的內邊距 86

4.1.3  CSS的邊框 88

4.1.4  CSS的外邊距 96

4.1.5  外邊距合并 99

4.2  CSS的定位和浮動 101

4.2.1  塊級元素 101

4.2.2  CSS的定位機制 102

4.2.3  相對定位 102

4.2.4  絕對定位 105

4.2.5  z-index空間位置 107

4.2.6  CSS的浮動 109

4.3  CSS的定位實例 116

習題4 120

上機實驗4 121

第5章  DIV+CSS布局基礎 122

5.1  div標記與span標記 122

5.1.1  div標記與span標記概述 122

5.1.2  <div>與<span>標記的區別 124

5.2  CSS的排版觀念 125

5.2.1  將頁面用div分塊 125

5.2.2  設計各塊的位置 126

5.2.3  用CSS定位 127

5.3  固定寬度且居中的版式 128

5.3.1  一列固定寬度居中 129

5.3.2  二列固定寬度居中 130

5.4  自適應寬度且居中的版式 132

5.4.1  一列自適應寬度且居中 132

5.4.2  二列寬度自適應 134

5.4.3  左列固定，右列寬度

自適應 135

5.4.4  三列浮動中間列寬度

自適應 137

5.5  一個常用的DIV+CSS網站布局的

基本框架結構實例 140

5.5.1  搭建框架 140

5.5.2  添加CSS樣式 141

5.6  排版實例：淘寶商城 143

5.6.1　搭建HTML框架 144

5.6.2　添加CSS樣式 148

5.6.3　采用CSS+DIV布局的

優勢 150

習題5 150

上機實驗5 151

第6章  JavaScript腳本語言 153

6.1  JavaScript概述 153

6.1.1  JavaScript簡介 153

6.1.2  JavaScript的特點 154

6.1.3  在網頁中使用JavaScript 154

6.2  JavaScript的語法基礎 156

6.2.1  JavaScript的數據類型 156

6.2.2  常量、變量與表達式 156

6.2.3  函數的定義及調用 159

6.2.4  條件分支語句 161

6.2.5  循環控制語句 163

6.3  JavaScript的內置對象 165

6.3.1  String對象 165

6.3.2  Math對象 168

6.3.3  Array對象 169

6.3.4  Date對象 171

6.4  瀏覽器對象 173

6.4.1  瀏覽器對象簡介 173

6.4.2  window對象 175

6.4.3  document 對象 180

6.5  JavaScript的事件處理 181

6.5.1  事件及響應方法 181

6.5.2  document的常用事件 183

習題6 185

上機實驗6 188

第7章  CSS與jQuery的整合使用 192

7.1  jQuery概述 192

7.1.1  jQuery簡介 192

7.1.2  在網頁中使用jQuery 193

7.1.3  jQuery的選擇器 193

7.1.4  jQuery的事件 194

7.1.5  jQuery效果實例 196

7.1.6  jQuery與HTML的關聯 206

7.1.7  jQuery的遍歷 211

7.2  CSS3與jQuery整合實例 216

7.2.1  實例一：圖片的輪播效果 216

7.2.2  實例二：下拉菜單的制作 220

7.2.3  實例三：標簽網頁的制作 224

習題7 226

上機實驗7 228

第8章  整合案例一：我的博客 230

8.1  分析架構 230

8.1.1  設計分析 230

8.1.2  排版架構 231

8.2  模塊設計 232

8.2.1  導航與Banner 232

8.2.2  左側列表 233

8.2.3  內容部分 235

8.2.4  footer腳注 237

8.3  整體調整 237

8.4  網頁源碼 238

第9章  整合案例二：公益網站首頁 245

9.1  分析架構 245

9.1.1  設計分析 246

9.1.2  排版架構 246

9.2  模塊設計 247

9.2.1  導航與logo 247

9.2.2  banner部分 249

9.2.3  內容主體部分 249

9.2.4  圖片導航部分 251

9.2.5  footer腳注 252

9.3  整體調整 253

9.4  網頁源碼 254

上機實驗9 263

習題答案 265

參考文獻 268