基本介紹
- 中文名：CSS+DIV網頁樣式布局實戰從入門到精通
- 作者：龍馬工作室
- 出版社：人民郵電出版社
- 出版時間：2019年6月
- 頁數：268 頁
- 定價：39.8 元
- 開本：16 開
- 裝幀：平裝
- ISBN：9787115366085
內容簡介,圖書目錄,
內容簡介
《CSS + DIV網頁樣式布局實戰從入門到精通》通過精選案例引導讀者深入學習，系統地介紹了利用CSS和DIV進行網頁樣式布局的相關知識和操作方法。
全書共21章。第 1～5章主要介紹網頁樣式布局的基礎知識，包括基本概念和語法、代碼的編寫方法、盒子模型及**特性等；第6～11章主要介紹網頁樣式布局的常用設定，包括網頁字型與對象尺寸、文本與段落、文本樣式、文本顏色與效果、背景顏色與圖像及圖像效果等；第 12～16章主要介紹網頁樣式布局的**設定，包括網頁表格、連結與項目列表、導航選單、固定寬度布局及變寬度布局等；第 17～21章通過實戰案例進一步講解了基礎知識的綜合套用方法，包括商務、時尚科技、線上購物、娛樂休閒及手機套用等多種類型網頁的布局方法。
在《CSS + DIV網頁樣式布局實戰從入門到精通》附贈的DVD多媒體教學光碟中，包含了17小時與圖書內容同步的教學錄像及所有實例的配套源檔案。此外，還贈送了大量相關學習內容的教學錄像及擴展學習電子書等。為了滿足讀者在手機和平板電腦上學習的需要，光碟中還贈送了本書教學錄像的手機版視頻學習檔案。
《CSS + DIV網頁樣式布局實戰從入門到精通》不僅適合網頁樣式布局的初、中級讀者學習使用，也可以作為各類院校相關專業學生和網頁製作培訓班的教材或輔導用書。
圖書目錄
第 1章 CSS入門
本章從CSS的基本概念出發，介紹CSS語言的特點，以及如何在網頁中引入CSS，並對CSS進行初步的體驗。
1.1 CSS的概念 002
1.1.1 網頁中標記的概念 002
1.1.2 HTML與CSS的互補 002
1.1.3 瀏覽器對CSS的支持 003
1.2 網頁設計中的CSS 003
1.2.1 CSS能做什麼 003
1.2.2 CSS的局限性 003
1.3 網站CSS賞析 004
1.3.1 商務網站CSS樣式賞析 004
1.3.2 遊戲網站CSS樣式賞析 004
1.4 實例——編寫我的第 一個CSS樣式 005
1.4.1 從零開始 005
1.4.2 加入CSS控制 006
1.4.3 控制圖片 006
1.4.4 CSS的注釋 007
高手私房菜 007
第 2章 CSS 3基本語法
本章重點介紹CSS如何控制頁面中的各個標記。先從控制HTML標記的不同方法入手，介紹各種選擇器的概念和聲明方法，以及CSS的有關屬性值。
2.1 構造CSS規則 010
2.2 實例1——基本CSS選擇器 010
2.2.1 標記選擇器 011
2.2.2 類別選擇器 012
2.2.3 ID選擇器 015
2.3 實例2——在HTML中使用CSS 016
2.3.1 行內樣式 016
2.3.2 內嵌式 017
2.3.3 連結式 018
2.3.4 導入式 019
2.3.5 各種方式的優先權 020
2.4 CSS 3的聲明 020
2.4.1 標準聲明 020
2.4.2 合併多重聲明 020
2.5 屬性值 021
2.5.1 整數和實數 021
2.5.2 長度值 022
2.5.3 百分比值 022
2.5.4 URL 022
2.5.5 顏色值 023
2.6 CSS的繼承 023
高手私房菜 024
第3章 手工與藉助工具編寫網頁樣式
本章分別通過使用手工與藉助工具設定標題、控制圖片、設定整體頁面等內容，來講述如何完成一個使用CSS技術的網頁。
3.1 實例1——手工編寫 026
3.1.1 從零開始 026
3.1.2 設定標題 028
3.1.3 控制圖片 028
3.1.4 設定正文 029
3.1.5 設定整體頁面 030
3.1.6 對段落進行分別設定 030
3.1.7 完整代碼 031
3.2 實例2——使用Dreamweaver編寫 032
3.2.1 使用Dreamweaver創建頁面 032
3.2.2 在Dreamweaver中新建CSS規則 034
3.2.3 在Dreamweaver中編輯CSS規則 038
3.2.4 為圖像創建CSS規則 038
高手私房菜 040
第4章 盒子模型
盒子模型是CSS控制頁面時一個很重要的概念。只有很好地掌握了盒子模型以及其中的每一個元素的用法，才能真正控制頁面中各個元素的位置。
4.1 盒子的內部結構 042
4.2 實例1——框線 042
4.2.1 框線類型 042
4.2.2 屬性值的簡寫形式 044
4.2.3 框線與背景 044
4.3 實例2——內邊距 045
4.4 實例3——外邊距 046
4.5 實例4——盒子之間的關係 047
4.5.1 HTML與DOM 047
4.5.2 標準文檔流 049
4.5.3 div標記與span標記 049
4.6 實例5——盒子在標準流中的定位原則 050
4.6.1 行元素之間的水平margin 050
4.6.2 塊元素之間的豎直margin 051
4.6.3 嵌套盒子之間的margin 052
4.6.4 將margin設為負值 052
4.7 實例6——盒子的浮動 053
4.7.1 準備代碼 053
4.7.2 設定浮動的div 054
4.7.3 改變浮動的方向 055
4.7.4 全部向右浮動 056
4.7.5 使用clear屬性清除浮動的影響 056
4.8 實例7——盒子的定位 057
4.8.1 靜態定位 058
4.8.2 相對定位 058
4.8.3 **定位 059
4.8.4 固定定位 060
高手私房菜 060
第5章 CSS 3的**特性
本章主要介紹CSS的複合選擇器、繼承性及層疊性等**特性，學習這些**特性，在提高頁面製作效率上會有很大幫助。
5.1 實例1——複合選擇器 062
5.1.1 交集選擇器 062
5.1.2 並集選擇器 062
5.1.3 後代選擇器 063
5.2 實例2——CSS的繼承特性 064
5.2.1 繼承關係 065
5.2.2 CSS繼承的運用 065
5.3 實例3——CSS的層疊特性 066
高手私房菜 068
第6章 網頁字型與對象尺寸
文字是網頁設計永遠不可缺少的元素，文字尺寸的設定關係著網頁是否美觀。本章從基礎文字設定出發，詳細講解CSS設定各種文字效果的方法。
6.1 實例1——指定字型屬性 070
6.1.1 font-weight屬性 070
6.1.2 font-variant屬性 071
6.1.3 font-style屬性 072
6.1.4 font簡寫屬性 072
6.2 實例2——字型族 073
6.2.1 泛型字型族 073
6.2.2 通常安裝的字型 074
6.3 實例3——設定字型 074
6.3.1 選擇字型集 074
6.3.2 設定字型尺寸 075
6.3.3 設定文字橫向拉伸變形 076
6.3.4 設定字型尺寸是否統一 076
6.4 實例4——設定對象尺寸 076
6.4.1 對象寬度設定 077
6.4.2 對象高度設定 077
6.4.3 對象尺寸範圍設定 078
6.4.4 文本行高控制 078
6.4.5 垂直對齊方式 079
高手私房菜 080
第7章 網頁文本與段落設計
本章主要介紹文字的有關設定和段落排版，如果說第6章是文字的設定基礎，那么本章就是文字的設定套用。
7.1 實例1——添加文本 082
7.1.1 普通文本 082
7.1.2 特殊文字元號 082
7.2 實例2——文本排版 083
7.2.1 段落標記p與換行標記br 084
7.2.2 標題標記h1~h6 084
7.2.3 文本水平居中標記center 085
7.3 實例3——網頁特殊字元 085
7.4 實例4——文本的套用 087
高手私房菜 088
第8章 文本樣式
本章通過介紹文本的顏色定義、字型設定效果、段落縮進、字詞間距等，來綜合講解排版布局中具體如何設定文本的樣式。
8.1 長度單位 090
8.2 實例1——顏色定義 090
8.3 實例2——準備頁面 091
8.4 實例3——設定文字的字型 092
8.5 實例4——設定文字的傾斜效果 093
8.6 實例5——設定文字的加粗效果 093
8.7 實例6——英文字母大小寫轉換 093
8.8 實例7——控制文字的大小 094
8.9 實例8——文字的裝飾效果 095
8.10 實例9——設定段落首行縮進 095
8.11 實例10——設定字詞間距 096
8.12 實例11——設定段落內部的文字行高 096
8.13 實例12——設定段落之間的距離 097
8.14 實例13——控制文本的水平位置 097
8.15 實例14——設定文字與背景的顏色 098
8.16 實例15——設定段落的垂直對齊方式 099
高手私房菜 100
第9章 文本顏色與效果
本章主要是深層次地介紹文本的顏色設定、特殊文本的效果設定以及控制文本間距的操作方法，從而使讀者熟練地掌握文本顏色設定和文本效果屬性。
9.1 實例1——文本顏色 102
9.1.1 定義顏色值 102
9.1.2 有效使用顏色 103
9.2 實例2——特殊文本效果 104
9.2.1 text-decoration屬性 104
9.2.2 text-transform屬性 105
9.3 實例3——控制文本間距 107
9.3.1 letter-spacing屬性 107
9.3.2 word-spacing屬性 108
9.3.3 white-spacing屬性 109
9.3.4 line-height屬性 111
高手私房菜 112
第 10章 背景顏色與圖像
任何一個網頁，它的背景顏色和圖案往往是給用戶的第 一印象，因此在頁面中控制背景和圖案是一個網站設計的重要步驟。本章主要講述CSS控制背景顏色和圖像的方法。
10.1 實例1——設定背景顏色 114
10.2 實例2——設定背景圖像 115
10.3 實例3——設定背景圖像平鋪 116
10.4 實例4——設定背景圖像位置 117
10.5 實例5——設定背景圖片位置固定 119
10.6 實例6——設定標題的圖像替換 119
10.7 實例7——使用滑動門技術的標題 120
高手私房菜 122
第 11章 圖像效果
本章通過講述設定圖片框線、圖片縮放、圖文混排、圖片與文字對齊方式等，綜合介紹圖像的設定方式。
11.1 實例1——設定圖片框線 124
11.1.1 基本屬性 124
11.1.2 為不同的框線分別設定樣式 125
11.2 實例2——圖片縮放 126
11.3 實例3——圖文混排 127
11.3.1 文字環繞 127
11.3.2 設定圖片與文字的間距 128
11.4 實例4——八大行星科普網頁 129
11.5 實例5——設定圖片與文字的對齊方式 134
11.5.1 橫向對齊方式 134
11.5.2 縱向對齊方式 135
高手私房菜 136
第 12章 網頁表格
網頁表格是網頁常見的元素，本章主要圍繞表格介紹CSS設定其樣式的方法。最後通過實例製作計算機報價表來總結本章的知識點。
12.1 實例1——創建表格 138
12.2 實例2——控制表格 139
12.2.1 表格中的標記 139
12.2.2 表格的框線 141
12.2.3 表格寬度的確定 141
12.2.4 其他與表格相關的標記 142
12.3 實例3——表格操作 144
12.3.1 合併單元格 144
12.3.2 設定對齊方式 145
12.3.3 用cellpadding屬性和cellspacing屬性設定距離 146
12.4 實例4——滑鼠指針經過時整行變色提示的表格 147
12.4.1 搭建HTML結構 147
12.4.2 在Firefox和IE9中實現滑鼠指針經過時整行變色 149
12.4.3 在IE6中實現滑鼠指針經過時整行變色 149
12.5 實例5——製作計算機報價表 150
高手私房菜 152
第 13章 連結與項目列表
網頁中除文字、圖像、表格等元素外，還有連結和項目列表。網站來源於連結，從本質上來說網站就是連結。
13.1 實例1——豐富的連結特效 154
13.1.1 動態超連結 154
13.1.2 按鈕式超連結 155
13.1.3 CSS控制滑鼠指針 156
13.1.4 浮雕背景超連結 158
13.1.5 讓下畫線動起來 159
13.2 實例2——項目列表 160
13.2.1 列表的符號 160
13.2.2 圖片符號 161
13.2.3 建立有序列表 162
13.2.4 建立無序列表 163
13.2.5 網頁列表的套用 164
高手私房菜 166
第 14章 導航選單
一個好的網站，導航選單是不可缺少的元素之一。導航選單的基調決定著網站的基調。本章主要介紹各種導航選單的製作方法。
14.1 實例1——簡單的導航選單 168
14.1.1 豎直導航選單 168
14.1.2 橫豎自由轉換選單 170
14.2 實例2——水平導航選單 171
14.2.1 自適應的斜角水平選單 171
14.2.2 套用滑動門技術的玻璃效果選單 174
14.2.3 會跳起的多彩選單 176
14.3 實例3——豎直排列的導航選單 180
14.3.1 雙豎線選單 180
14.3.2 雙斜角橫線選單 181
14.3.3 立體選單 183
14.3.4 箭頭選單 184
14.3.5 帶說明信息的選單 186
14.4 實例4——下拉選單 187
高手私房菜 190
第 15章 固定寬度布局
本章主要介紹CSS排版的觀念和具體方法，包括CSS排版的整體思路、兩種具體的排版結構。最後以製作魔術布局來總結分析CSS的布局方法。
15.1 CSS排版觀念 192
15.1.1 MSN的首頁 192
15.1.2 Hao123的首頁 193
15.1.3 Yahoo的首頁 193
15.2 實例1——單列布局 194
15.2.1 放置第 一個圓角框 194
15.2.2 設定圓角框的CSS樣式 195
15.2.3 放置其他圓角框 197
15.3 實例2——“1-2-1”固定寬度布局 198
15.3.1 準備工作 199
15.3.2 **定位法 200
15.3.3 浮動法 201
15.4 實例3——“1-3-1”固定寬度布局 202
15.5 實例4——魔術布局 205
15.5.1 魔術布局設計 205
15.5.2 製作魔術布局 207
15.5.3 修正缺陷 211
高手私房菜 212
第 16章 變寬度布局
本章主要講述常用變寬度布局的製作，變寬度的布局要比固定寬度的布局複雜一些，根本的原因在於寬度不確定，導致很多參數無法確定，必須使用一些技巧來完成。
16.1 實例1——“1-2-1”變寬度網頁布局 214
16.1.1 “1-2-1”等比例變寬布局 214
16.1.2 “1-2-1”單列變寬布局 215
16.2 實例2——“1-3-1”變寬度網頁布局 216
16.2.1 “1-3-1”三列寬度等比例布局 216
16.2.2 “1-3-1”單側列寬度固定的變寬布局 216
16.2.3 “1-3-1”中間列寬度固定的變寬布局 220
16.2.4 “1-3-1”雙側列寬度固定的變寬布局 224
16.2.5 “1-3-1”中列和側列寬度固定的變寬布局 228
16.3 實例3——分列布局背景顏色問題 232
16.3.1 設定固定寬度布局的列背景色 232
16.3.2 設定特殊寬度變化布局的列背景色 234
16.3.3 設定單列寬度變化布局的列背景色 235
16.3.4 設定多列等比例寬度變化布局的列背景色 237
高手私房菜 238
第 17章 製作商務類型網頁
本章主要以製作紅酒企業的網頁來講述商務類型網頁的製作方法，使讀者能掌握製作商務網頁的要點。
17.1 設計整體結構 240
17.1.1 設計分析 240
17.1.2 排版架構 240
17.2 整體設定 241
17.3 設定頁頭 242
17.4 設定中間部分 242
17.4.1 產品展示 242
17.4.2 新聞中心 243
17.4.3 促銷產品 245
17.5 頁腳部分 245
高手私房菜 246
第 18章 製作時尚科技類型網頁
本章主要以製作時尚科技類型網頁來講述企業網頁的製作方法，使讀者能掌握製作企業型網頁的要點。
18.1 整體布局 248
18.1.1 設計分析 248
18.1.2 排版架構 248
18.2 設計模組組成 248
18.2.1 導航區 249
18.2.2 Banner區 250
18.2.3 資訊區 250
18.2.4 頁腳 251
18.3 設定連結 252
高手私房菜 252
第 19章 製作線上購物類型網頁
網上購物是一種便捷的購物方式，也是目前**火的購物方式。本章主要講述購物網頁的整體布局和模組組成。
19.1 整體布局 254
19.1.1 設計分析 254
19.1.2 排版架構 254
19.2 設計模組組成 254
19.2.1 導航 254
19.2.2 Banner 255
19.2.3 產品類別 256
19.2.4 頁腳 256
19.3 設定連結 256
高手私房菜 256
第 20章 製作娛樂休閒類型網頁
本章主要介紹娛樂休閒網頁製作要點及娛樂休閒網頁模組組成，使讀者初步了解娛樂休閒網頁的製作方法。
20.1 設定網頁背景 258
20.2 整體布局 258
20.2.1 設計分析 258
20.2.2 排版架構 258
20.3 設計模組組成 259
20.3.1 註冊 259
20.3.2 導航 260
20.3.3 預告 261
20.3.4 新片 262
20.3.5 頁腳 263
20.4 設定連結 264
高手私房菜 264
第 21章 製作適合手機瀏覽的網頁
隨著智慧型手機的普及，製作手機網頁也成為了網頁製作中的重要部分。本章主要以一個簡單的手機網頁製作來講述其製作方法。
21.1 整體布局 266
21.1.1 設計分析 266
21.1.2 排版架構 266
21.2 設計導航選單 266
21.3 設定模組內容 267
高手私房菜 268
