CSS從入門到精通

CSS從入門到精通

《CSS從入門到精通》從基本概念到具體實踐、從對網頁的認識到製作網頁、從使用CSS進行網頁局部的設計到進行整個網站的布局製作進行了詳細的闡述,以理論結合實際的方式循序漸進地講述了網頁基礎知識和CSS布局的實戰技術。

基本信息

內容簡介

本書內容豐富,注重思維方法的轉變和提高實際操作能力,以最簡單的方法介紹使用CSS進行符合Web標準的網頁設計的相關知識和技巧。全書以CSS布局為主體內容,探討CSS布局的入門知識與網站布局實戰技巧、版式布局到細節、瀏覽器兼容性等,幫助讀者改變傳統的網站設計思維,進入基於Web標準的網頁設計領域。本書含有大量實例,詳細描述各個CSS屬性,以及代碼編寫技巧,方便讀者模擬實踐。本書適合將要學習或者正在學習使用CSS布局技術用戶閱讀,並可作為Web前端代碼架構的從業人員的參考手冊。

圖書目錄

第一篇 基礎知識篇

第1章 與網頁有關的基本概念 3

1.1 網頁的基本構成 3

1.2 網頁的結構設計——HTML與XHTML 4

1.2.1 認識HTML 5

1.2.2 認識XHTML 5

1.2.3 製作一個簡單的XHTML網頁 6

1.2.4 XHTML的優勢 7

1.3 CSS入門 8

1.3.1 感性體驗CSS的魅力 8

1.3.2 CSS的概念 11

1.3.3 CSS的特點 11

1.3.4 CSS的優勢 12

1.3.5 發揮CSS的優勢 12

1.4 Web標準 13

1.4.1 什麼是Web標準 14

1.4.2 Web標準的構成 14

1.4.3 Web標準的表現層技術 15

1.5 CSS+DIV建設網站 15

1.5.1 CSS+DIV的含義 15

.1.5.2 CSS+DIV網站設計的優勢 15

1.6 小結 16

第2章 CSS基礎知識 18

2.1 CSS的基本語法 18

2.1.1 CSS的基本語法構成 18

2.1.2 一個CSS樣式的簡單實例 18

2.2 CSS的選擇符 19

2.2.1 類型選擇符 20

2.2.2 群組選擇符 20

2.2.3 包含選擇符 20

2.2.4 id、class選擇符 21

2.2.5 標籤指定式選擇符 22

2.2.6 組合選擇符 22

2.2.7 偽類和偽對象 23

2.2.8 通配選擇符 23

2.3 CSS的常用屬性及屬性值 24

2.3.1 color顏色屬性 24

2.3.2 常用CSS長度單位 25

2.3.3 百分比值 26

2.3.4 URL路徑 26

2.4 CSS的繼承性 27

2.5 CSS的添加方法 28

2.5.1 在XHTML標識符里添加CSS 28

2.5.2 在XHTML頭信息標識符里添加CSS 28

2.5.3 連結樣式表 29

2.5.4 聯合使用樣式表 30

2.6 CSS的開發環境 31

2.6.1 編輯軟體 31

2.6.2 瀏覽軟體 32

2.7 小結 33

第3章 XHTML與Javascript基礎 35

3.1 XHTML基礎知識 35

3.1.1 XHTML的格式檔案 35

3.1.2 XHTML基本結構 36

3.1.3 XHTML網頁實例 39

3.2 XHTML的語法構成 40

3.2.1 XHTML中的標籤 40

3.2.2 XHTML的標籤屬性 41

3.3 XHTML的語法規範 42

3.3.1 標籤不能重疊,可以嵌套 42

3.3.2 XHTML檔案一定要有正確的組織格式 42

3.3.3 標籤名字一定要用小寫字母 43

3.3.4 所有的 XHTML 元素一定要關閉 43

3.3.5 獨立的一個標籤也要結束用 /]來結束 43

3.4 div標籤 43

3.4.1 什麼是div 44

3.4.2 理解div 44

3.4.3 使用div 46

3.4.4 div的並列與嵌套 46

3.5 span標籤 47

3.5.1 什麼是span 47

3.5.2 span與div的區別 47

3.6 h1至h6標籤 49

3.7 列表製作標籤ul、ol、li 49

3.7.1 ul無序列表 50

3.7.2 ol有序列表 51

3.8 p標籤和br標籤 51

3.8.1 p標籤 51

3.8.2 br標籤 52

3.9 img標籤 53

3.9.1 img標籤的屬性 53

3.9.2 img標籤使用方法 53

3.10 表單標籤 54

3.10.1 form標籤 54

3.10.2 input標籤 54

3.10.3 分組標籤fieldset、legend 56

3.11 JavaScript簡介 57

3.12 JavaScript語言基礎 58

3.12.1 插入JavaScript 58

3.12.2 基本語法 59

3.12.3 變數和數據類型 59

3.12.4 語句 60

3.13 JavaScript的對象及其屬性和方法 63

3.14 事件處理 64

3.14.1 事件處理的類型 64

3.14.2 指定事件處理 64

3.15 小結 65

第4章 瀏覽器的兼容與解析問題 67

4.1 兼容問題的由來 67

4.2 需要兼容的常用瀏覽器 67

4.3 CSS hack技術 68

4.3.1 什麼是CSS hack 68

4.3.2 使用CSS hack 69

4.4 常用CSS hack方法介紹 69

4.4.1 禁止IE 6瀏覽器 70

4.4.2 僅IE 7識別 71

4.4.3 僅IE 6識別 71

4.4.4 僅IE識別 72

4.4.5 兼容IE 6、IE 7、Firefox瀏覽器 73

4.5 CSS hack管理 75

4.6 IE條件注釋功能 76

4.7 小結 76

第二篇 實例製作篇

第5章 使用CSS製作背景 81

5.1 製作顏色背景 81

5.2 給元素添加背景圖片 82

5.2.1 指定背景圖像 83

5.2.2 製作重複的背景圖像 85

5.3 製作不動的背景 86

5.4 給網頁添加背景 89

5.5 製作滾動的背景 91

5.6 綜合使用背景 92

5.7 小結 94

第6章 使用CSS布局頁面頂部內容 95

6.1 製作包含文本logo的頁面頂部 95

6.2 製作包含圖像logo的頁面頂部 97

6.2.1 製作實例 98

6.2.2 兼容問題 100

6.3 製作包含文本banner的頁面頂部 102

6.3.1 圖片logo的定位 103

6.3.2 定義捷徑的文本樣式.. 105

6.3.3 定義段落文本banner樣式 107

6.4 製作包含圖像banner的頁面頂部 108

6.5 小結 112

第7章 使用CSS製作網站導航 114

7.1 製作一個簡單的橫向文字導航條 114

7.2 製作方塊導航條 117

7.3 製作標籤式導航 119

7.4 製作按鈕導航條 122

7.5 CSS盒模型及盒模型hack 126

7.5.1 盒模型尺寸 126

7.5.2 盒模型hack 128

7.5.3 簡單盒模型hack方法 129

7.6 製作會動的長城型導航條 130

7.7 製作基於背景控制的導航條 135

7.8 製作左右自由伸展的導航條 138

7.8.1 九宮格技術原理 139

7.8.2 製作自由伸展的導航條實例 141

7.9 製作一個簡單的縱嚮導航條 144

7.9.1 使用ul、li列表標籤製作導航條 145

7.9.2 使用div+h1標籤製作 145

7.10 製作分行導航條 148

7.11 製作增亮導航條 149

7.12 製作動感的導航條 151

7.13 製作下拉式導航條 155

7.13.1 製作實例 155

7.13.2 兼容問題 159

7.14 製作多級彈出導航條 160

7.14.1 製作實例 160

7.14.2 兼容問題 165

7.15 小結 167

第8章 使用CSS製作列表 169

8.1 製作新聞列表 169

8.1.1 製作實例 170

8.1.2 兼容問題 173

8.2 製作排行榜 174

8.3 製作自定義圖片項目符號的列表 177

8.3.1 使用列表符號樣式屬性製作列表 177

8.3.2 使用背景圖片屬性製作列表符號 180

8.3.3 兼容問題 181

8.4 使用CSS改變列表排版 182

8.5 列表縮進排版 186

8.5.1 製作實例 186

8.5.2 兼容問題 189

8.6 複雜列表排版 191

8.6.1 overflow屬性語法結構 191

8.6.2 製作實例 191

8.6.3 兼容問題 196

8.7 小結 198

第9章 使用CSS製作表單 200

9.1 製作登錄表單 200

9.1.1 label標籤語法結構 201

9.1.2 製作登錄表單實例 201

9.1.3 兼容問題 204

9.2 製作用戶註冊表單 205

9.2.1 製作頁面的XHTML代碼 206

9.2.2 製作頁面的CSS樣式 208

9.3 製作符合W3C標準的表單 213

9.3.1 製作頁面的XHTML代碼 213

9.3.2 製作頁面的CSS樣式 216

9.3.3 兼容問題 224

9.4 小結 224

第10章 使用CSS製作內容的版式 226

10.1 製作分欄的文字排版 226

10.2 製作圖文混合排版 228

10.2.1 圖文混排基本方式 228

10.2.2 製作網站圖文混排版式的實例 230

10.3 製作全圖排版的實例 235

10.3.1 自由浮動布局 235

10.3.2 其他顯示方式布局 240

10.4 小結 242

第11章 使用CSS製作連結樣式 243

11.1 製作Windows風格樣式的CSS按鈕 243

11.1.1 仿Windows經典樣式的CSS按鈕 243

11.1.2 仿Windows XP風格的CSS按鈕 244

11.2 製作仿按鈕下陷效果的實例 245

11.3 麵包屑導航連結 246

11.3.1 製作實例 247

11.3.2 兼容問題 249

11.4 小結 250

第12章 使用CSS製作數據表格 252

12.1 製作基本的數據表格 252

12.1.1 表示數據的表格對象標籤 252

12.1.2 使用表格標籤製作表格 252

12.1.3 使用CSS修飾表格樣式 254

12.2 製作CSS風格的數據表格 258

12.2.1 表格對象標籤屬性 258

12.2.2 CSS屬性text-transform 259

12.2.3 製作數據表格實例 259

12.3 小結 266

第13章 使用CSS製作頁面底部內容 267

13.1 製作文本信息的頁面底部內容 267

13.1.1 a標籤的title屬性 267

13.1.2 製作包含文本信息的頁面底部XHTML結構代碼 267

13.1.3 製作頁面的CSS樣式 268

13.1.4 兼容問題 272

13.2 製作包含導航連結的頁面底部內容 273

13.2.1 製作包含導航連結頁面底部的XHTML代碼結構 273

13.2.2 製作頁面的CSS樣式 274

13.3 製作包含圖像友情連結的頁面底部內容 278

13.3.1 製作頁面底部的XHTML結構 278

13.3.2 製作頁面的CSS樣式 279

13.4 小結 282

第三篇 整體布局篇

第14章 CSS基本布局 287

14.1 一列固定寬度 287

14.2 一列寬度自適應 288

14.3 一列居中 290

14.4 二列固定寬度 292

14.5 二列寬度自適應 293

14.6 兩列右列寬度自適應 294

14.7 兩列固定寬度居中 297

14.8 三列浮動中間列寬度自適應 299

14.9 高度自適應 302

14.10 小結 303

第15章 CSS整體布局的實現 305

15.1 頂行三列布局的實現 305

15.1.1 製作思路 306

15.1.2 製作頂部三列式布局實例 307

15.2 多區域不規則布局 309

15.2.1 製作思路 310

15.2.2 製作多區域不規則布局的實例 313

15.3 小結 316

第16章 使用Dreamweaver製作頁面的實例 317

16.1 框架設計 317

16.1.1 頁面分析 318

16.1.2 框架製作 319

16.1.3 切圖 323

16.2 布局設計 326

16.2.1 頁面頂部布局設計 327

16.2.2 頁面中上部的布局設計 329

16.2.3 頁面中下部的布局設計 332

16.2.4 頁面底部的布局設計 336

16.3 模組設計 338

16.3.1 快速導航製作 338

16.3.2 “麵包屑”製作 341

16.3.3 數據表格製作 342

16.3.4 圖片排版 345

16.4 兼容性測試 348

16.5 小結 350

第四篇 綜合套用篇

第17章 部落格類網頁布局設計 353

17.1 頁面布局和規劃 354

17.1.1 界面設計分析 354

17.1.2 規劃頁面布局 354

17.2 CSS結構設計與整體布局設計 356

17.2.1 CSS結構設計 356

17.2.2 整體布局設計 357

17.3 頁面頭部布局設計 360

17.3.1 製作頭部的結構代碼 360

17.3.2 編寫頭部的CSS代碼 361

17.4 日誌部分的布局設計 363

17.4.1 製作日誌部分的結構代碼 364

17.4.2 編寫日誌部分的CSS代碼 365

17.5 邊欄區域的布局設計 369

17.5.1 製作邊欄區域的結構代碼 369

17.5.2 編寫右邊欄區域的CSS代碼 370

17.6 頁面底部的布局設計 372

17.6.1 製作底部的結構代碼 372

17.6.2 編寫底部的CSS代碼 373

17.7 小結 374

第18章 企業類網頁布局設計 375

18.1 頁面布局和規劃 375

18.1.1 界面設計分析 376

18.1.2 規劃頁面布局 377

18.2 CSS結構設計與整體布局設計 378

18.2.1 CSS檔案結構設計 378

18.2.2 首頁布局設計 379

18.3 頁面頭部布局設計 381

18.3.1 製作頭部的結構代碼 381

18.3.2 編寫頭部的CSS樣式 382

18.4 頁面banner區域的布局設計 383

18.4.1 製作banner區域主體的布局設計 383

18.4.2 製作banner區域各個元素的布局設計 384

18.5 頁面主內容區的布局設計 389

18.5.1 製作頁面主內容區結構 389

18.5.2 編寫CSS樣式 390

18.6 頻道頁面布局設計概述 393

18.7 小結... 394

作者簡介

本叢書的作者團隊對電腦程式設計類圖書市場有很好的敏感性,對出版動態有準確的把握,對計算機技術的發展進行長期跟蹤。該團隊長期以來致力於計算機圖書的內容提供和策劃,已經出版的多個系列圖書都在計算機圖書市場上有良好的口碑,都曾經引領了當年的電腦程式設計暢銷書。

相關詞條

相關搜尋

熱門詞條

聯絡我們