DIV+CSS 3網(wǎng)頁樣式與布局全程揭秘（第3版）

目錄
第1章  網(wǎng)頁和網(wǎng)站開發(fā)知識
1.1　了解網(wǎng)頁 1
1.1.1　網(wǎng)頁與網(wǎng)站的關(guān)系 1
1.1.2　網(wǎng)頁基本構(gòu)成元素 3
1.2　定義網(wǎng)頁設(shè)計 3
1.2.1　簡述網(wǎng)頁設(shè)計 3
1.2.2　網(wǎng)頁設(shè)計的特點 4
1.2.3　網(wǎng)頁設(shè)計的相關(guān)術(shù)語 6
1.2.4　常見網(wǎng)站類型 8
1.3　網(wǎng)站開發(fā)流程 11
1.3.1　網(wǎng)站策劃 11
1.3.2　規(guī)劃網(wǎng)站結(jié)構(gòu) 11
1.3.3　素材收集整理 11
1.3.4　網(wǎng)頁版式與布局分析 12
1.3.5　確定網(wǎng)站主色調(diào) 12
1.3.6　設(shè)計網(wǎng)站頁面 13
1.3.7　切割和優(yōu)化網(wǎng)頁 13
1.3.8　制作HTML頁面 13
1.3.9　使用CSS樣式控制網(wǎng)頁外觀 13
1.3.10　為網(wǎng)頁應(yīng)用JavaScript特效 14
1.3.11　網(wǎng)站后臺程序開發(fā) 14
1.3.12　申請域名和服務(wù)器空間 14
1.3.13　測試并上傳網(wǎng)站 14
1.4　關(guān)于DIV CSS布局 14
1.4.1　布局特點 14
1.4.2　DIV CSS布局的優(yōu)勢 15
1.5　Web標(biāo)準(zhǔn) 16
1.5.1　什么是Web標(biāo)準(zhǔn) 16
1.5.2　Web標(biāo)準(zhǔn)的內(nèi)容 16
1.5.3　結(jié)構(gòu)、表現(xiàn)、行為和內(nèi)容 16
1.5.4　遵循Web標(biāo)準(zhǔn)的好處 18
第2章  了解HTML5
2.1　HTML基本概念 19
2.1.1　了解HTML 19
2.1.2　HTML的作用 20
2.1.3　HTML的基礎(chǔ)結(jié)構(gòu) 20
2.1.4　HTML的基本語法 21
2.2　HTML發(fā)展史 22
2.2.1　HTML 22
2.2.2　XML  23
2.2.3　XHTML 23
2.2.4　制作HTML頁面 24
實例01　制作簡單的HTML頁面 24
2.3　HTML常用標(biāo)簽 25
2.3.1　區(qū)塊標(biāo)簽 25
2.3.2　文本標(biāo)簽 26
2.3.3　格式標(biāo)簽 26
2.3.4　圖像標(biāo)簽 27
2.3.5　表格標(biāo)簽 27
2.3.6　超鏈接標(biāo)簽 27
2.4　HTML5基礎(chǔ) 28
2.4.1　了解HTML5 28
2.4.2　HTML5的簡化操作 28
2.4.3　HTML5標(biāo)簽 29
2.4.4　HTML5廢棄標(biāo)簽 30
2.4.5　HTML5的選擇器 31
2.4.6　HTML5的優(yōu)勢 31
2.5　HTML5的應(yīng)用 32
2.5.1　標(biāo)簽 32
實例02　在網(wǎng)頁中實現(xiàn)繪圖效果 33
2.5.2　聲音和視頻標(biāo)簽 34
實例03　在網(wǎng)頁中嵌入音頻和視頻 35
第3章  初識CSS樣式 3.1　了解CSS樣式 38
3.1.1　使用CSS樣式的原因 38
3.1.2　使用CSS樣式的優(yōu)勢 39
3.1.3　使用CSS樣式的作用 40
3.1.4　使用CSS樣式的局限性 41
3.1.5　CSS樣式的基礎(chǔ)語法 41
3.1.6　認(rèn)識CSS規(guī)則的構(gòu)成 42
3.2　在網(wǎng)頁中應(yīng)用CSS樣式的4種方法 42
3.2.1　內(nèi)聯(lián)CSS樣式 42
實例04　使用style屬性添加內(nèi)聯(lián)CSS樣式 43
3.2.2　內(nèi)部CSS樣式 44
實例05　使用style標(biāo)簽添加內(nèi)部CSS樣式 44
3.2.3　鏈接外部CSS樣式文件 45
實例06　使用link標(biāo)簽鏈接外部CSS樣式文件 45
3.2.4　導(dǎo)入外部CSS樣式文件 46
實例07　使用@import命令導(dǎo)入外部CSS樣式文件 47
3.3　CSS選擇器 48
3.3.1　通配選擇器 48
3.3.2　標(biāo)簽選擇器 48
3.3.3　ID選擇器 48
3.3.4　類選擇器 48
3.3.5　偽類和偽對象選擇器 49
實例08　設(shè)置酒店網(wǎng)站文字鏈接效果 49
3.3.6　群選擇器 50
實例09　設(shè)置女裝網(wǎng)站圖片效果 50
3.3.7　派生選擇器 53
3.3.8　層次選擇器 54
3.4　CSS3中的選擇器 55
3.4.1　屬性選擇器 55
3.4.2　結(jié)構(gòu)偽類選擇器 56
3.4.3　UI元素狀態(tài)偽類選擇器 56
3.5　CSS樣式的特性 57
3.5.1　繼承性 57
3.5.2　層疊性 58
3.5.3　權(quán)重 58
3.6　CSS樣式中的顏色設(shè)置和單位 60
3.6.1　CSS中的多種顏色設(shè)置方法 60
3.6.2　CSS中的單位 61
3.6.3　CSS中的相對單位 61
3.6.4　CSS3中新增的顏色定義方法 62
第4章  使用CSS設(shè)置文本和段落樣式
4.1　設(shè)置文本CSS樣式 63
4.1.1　設(shè)置字體font-family 63
4.1.2　設(shè)置字體大小font-size 63
實例10　設(shè)置歡迎頁面中文字的字體和大小 64
4.1.3　設(shè)置字體顏色color 65
4.1.4　設(shè)置字體粗細(xì)font-weight 65
實例11　設(shè)置網(wǎng)頁中字體的顏色和粗細(xì) 66
4.1.5　設(shè)置字體樣式font-style 68
4.1.6　設(shè)置英文字體大小寫text-transform 68
4.1.7　設(shè)置文字修飾text-decoration 68
實例12　設(shè)置網(wǎng)頁中英文字體的屬性 68
4.2　設(shè)置段落樣式 72
4.2.1　字間距l(xiāng)etter-spacing 72
4.2.2　行間距l(xiāng)ine-height 72
實例13　在網(wǎng)頁中設(shè)計文字間距 72
4.2.3　段落首字下沉 74
4.2.4　段落首行縮進(jìn)text-indent 74
實例14　設(shè)置段落文字首字下沉和縮進(jìn)樣式 74
4.2.5　段落水平對齊text-align 76
4.2.6　文本垂直對齊vertical-align 76
實例15　設(shè)置文本水平居中和垂直居中對齊 76
4.3　使用CSS3嵌入Web字體 78
4.3.1　@font-face語法 78
4.3.2　自定義字體方法 79
4.3.3　聲明多個字體來源 79
4.3.4　@font-face規(guī)則的瀏覽器兼容性 80
4.4　在網(wǎng)頁中應(yīng)用特殊字體 80
實例16　在卡通網(wǎng)頁中使用特殊字體 80
4.5　CSS3中文字效果設(shè)置 82
4.5.1　文字陰影text-shadow 82
4.5.2　文本溢出處理text-overflow 83
實例17　為網(wǎng)頁中的文字設(shè)置效果 83
第5章  使用CSS設(shè)置背景和圖片樣式
5.1　設(shè)置背景顏色CSS樣式 86
5.1.1　背景顏色background-color 86
5.1.2　為頁面元素設(shè)置不同的背景顏色 86
實例18　為網(wǎng)頁設(shè)置背景顏色 86
5.1.3　背景圖像大小background-size 88
5.1.4　背景圖像顯示區(qū)域background-origin 88
5.1.5　背景圖像裁剪區(qū)域background-clip 88
實例19　控制網(wǎng)頁元素背景圖像 89
5.2　設(shè)置背景圖像CSS樣式 91
5.2.1　背景圖像background-image 91
5.2.2　背景圖像重復(fù)方式background-repeat 91
實例20　設(shè)置圖片網(wǎng)站背景圖像 91
5.2.3　背景圖像固定background-attachment 93
5.2.4　背景圖像位置background-position 93
實例21　設(shè)置網(wǎng)頁背景和圖像固定位置 94
5.2.5　漸變背景 95
5.3　設(shè)置圖片CSS樣式 96
5.3.1　圖片邊框border 96
實例22　設(shè)置卡通網(wǎng)站中的圖片邊框 99
5.3.2　圖片縮放 100
實例23　實現(xiàn)跟隨瀏覽器窗口縮放的圖片 100
5.3.3　圖片水平對齊 102
5.3.4　圖片的垂直對齊 103
5.4　在網(wǎng)頁中實現(xiàn)圖文混排 104
5.4.1　使用CSS樣式實現(xiàn)文本繞圖效果 104
5.4.2　設(shè)置文本繞圖間距 105
實例24　實現(xiàn)圖文混排并設(shè)置間距 105
5.5　網(wǎng)頁中特殊的圖像效果應(yīng)用 106
5.5.1　全屏大圖切換 106
實例25　設(shè)計作品展示頁面 107
5.5.2　鼠標(biāo)經(jīng)過圖像動態(tài)效果 109
實例26　制作圖片展示網(wǎng)頁 109
第6章  使用CSS設(shè)置列表樣式
6.1　了解網(wǎng)頁中的列表 113
6.2　設(shè)置列表的CSS樣式 113
6.2.1　ul無序項目列表 114
6.2.2　ol有序編號列表 114
實例27　制作無序列表和有序列表 114
6.2.3　dl定義列表 116
6.2.4　更改列表項目樣式 117
6.2.5　自定義列表符號 117
6.3　使用列表制作導(dǎo)航菜單 118
6.3.1　使用CSS樣式創(chuàng)建橫向?qū)Ш讲藛?118
實例28　制作游戲網(wǎng)站導(dǎo)航 118
6.3.2　使用CSS樣式創(chuàng)建豎向?qū)Ш讲藛?119
6.4　列表在網(wǎng)頁中的特殊應(yīng)用 120
6.4.1　滾動圖像 120
實例29　在網(wǎng)頁中實現(xiàn)四圖橫向滾動效果 120
6.4.2　動態(tài)堆疊卡 124
實例30　制作個性網(wǎng)站歡迎頁面 124
第7章  使用CSS設(shè)置超鏈接樣式
7.1　了解網(wǎng)頁超鏈接 128
7.1.1　什么是超鏈接 128
7.1.2　關(guān)于鏈接路徑 128
7.1.3　超鏈接對象 129
7.1.4　創(chuàng)建超鏈接原則 129
7.2　CSS樣式偽類 130
7.2.1　:link偽類 130
7.2.2　:hover偽類 130
7.2.3　:active偽類 131
7.2.4　:visited偽類 131
7.3　超鏈接CSS樣式應(yīng)用 132
7.3.1　超鏈接文字樣式 132
實例31　設(shè)置游戲網(wǎng)站文字超鏈接效果 132
7.3.2　按鈕式超鏈接 134
實例32　制作設(shè)計網(wǎng)站導(dǎo)航菜單 134
7.3.3　為超鏈接添加背景 136
實例33　背景翻轉(zhuǎn)導(dǎo)航菜單 136
7.4　設(shè)置網(wǎng)頁中的光標(biāo)效果 138
7.5　超鏈接在網(wǎng)頁中的特殊應(yīng)用 139
7.5.1　傾斜導(dǎo)航菜單 139
實例34　玩具網(wǎng)站傾斜導(dǎo)航 139
7.5.2　動感超鏈接 141
實例35　卡通網(wǎng)站動感導(dǎo)航菜單 142
第8章  使用CSS設(shè)置表格樣式
8.1　了解表格 145
8.1.1　認(rèn)識表格標(biāo)簽與結(jié)構(gòu) 145
8.1.2　表格標(biāo)題標(biāo)簽 147
8.1.3　表格列和標(biāo)簽 148
8.1.4　水平對齊和垂直對齊 149
8.2　使用CSS樣式控制表格外觀 150
8.2.1　設(shè)置表格邊框 150
8.2.2　設(shè)置表格背景顏色 150
8.2.3　設(shè)置表格背景圖像 150
實例36　制作網(wǎng)站新聞欄目 150
8.3　使用CSS樣式實現(xiàn)表格特效 154
8.3.1　設(shè)置單元行背景顏色 154
8.3.2　:hover偽類在表格中的應(yīng)用 154
實例37　使用CSS實現(xiàn)表格的交互效果 154
第9章  使用CSS設(shè)置表單元素樣式
9.1　關(guān)于表單 157
9.1.1　表單標(biāo)簽 157
9.1.2　輸入標(biāo)簽 158
9.1.3　文本域標(biāo)簽 158
9.1.4　選擇域標(biāo)簽和 159
9.1.5　其他表單元素 159
9.1.6　關(guān)于、和標(biāo)簽 162
實例38　創(chuàng)建簡單的網(wǎng)頁表單 163
9.2　使用CSS樣式控制表單元素 165
9.2.1　使用CSS樣式設(shè)置表單元素的背景色和邊框 165
實例39　制作網(wǎng)站登錄頁面 165
9.2.2　使用CSS樣式實現(xiàn)圓角文本字段 169
實例40　制作圓角登錄框 169
9.2.3　使用CSS樣式設(shè)置下拉列表效果 170
實例41　制作網(wǎng)站搜索欄 170
9.3　表單在網(wǎng)頁中的特殊應(yīng)用 173
9.3.1　聚焦型提示語消失 173
實例42　文本字段提示語效果1 173
9.3.2　輸入型提示語消失 176
實例43　文本字段提示語效果2 176
第10章  使用CSS設(shè)置動畫效果
10.1　CSS3變形屬性簡介 178
10.2　實現(xiàn)網(wǎng)頁元素2D變形效果 179
10.2.1　旋轉(zhuǎn)變形 179
實例44　實現(xiàn)網(wǎng)頁元素的旋轉(zhuǎn)效果 179
10.2.2　縮放和翻轉(zhuǎn)變形 181
實例45　實現(xiàn)網(wǎng)頁元素的縮放效果 181
10.2.3　移動變形 182
實例46　實現(xiàn)網(wǎng)頁元素位置的移動 183
10.2.4　傾斜變形 184
實例47　實現(xiàn)網(wǎng)頁元素的傾斜效果 184
10.2.5　矩陣變形 186
10.3　實現(xiàn)元素3D變形效果 186
10.3.1　3D位移 186
實例48　實現(xiàn)網(wǎng)頁元素的3D位移效果 187
10.3.2　3D旋轉(zhuǎn) 188
實例49　實現(xiàn)網(wǎng)頁元素的3D旋轉(zhuǎn)效果 189
10.3.3　3D縮放 191
實例50　實現(xiàn)網(wǎng)頁元素的3D縮放效果 191
10.3.4　3D矩陣 192
10.4　CSS3過渡簡介 193
10.4.1　CSS3過渡屬性 193
10.4.2　如何創(chuàng)建過渡動畫 193
10.5　CSS3實現(xiàn)元素過渡效果 194
10.5.1　transition-property屬性——實現(xiàn)過渡效果 194
10.5.2　transition-duration屬性——過渡時間 195
實例51　實現(xiàn)網(wǎng)頁元素的變形過渡效果 195
10.5.3　transition-delay屬性——過渡延遲時間 197
10.5.4　transition-timing-function屬性——過渡方式 198
10.6　CSS3關(guān)鍵幀動畫簡介 198
10.6.1　CSS3新增的animation屬性 198
10.6.2　@keyframes的語法 199
10.7　為網(wǎng)頁元素應(yīng)用關(guān)鍵幀動畫 200
10.7.1　使用@keyframes聲明動畫 200
10.7.2　調(diào)用@keyframes聲明的動畫 201
10.8　CSS3動畫子屬性詳解 201
10.8.1　animation-name屬性——調(diào)用動畫 201
10.8.2　animation-duration屬性——動畫播放時間 202
10.8.3　animation-timing-function屬性——動畫播放方式 202
10.8.4　animation-delay屬性——動畫開始播放時間 202
10.8.5　animation-iteration-count屬性——動畫播放次數(shù) 202
10.8.6　animation-direction屬性——動畫播放方向 202
10.8.7　animation-play-state屬性——動畫播放狀態(tài) 203
10.8.8　animation-fill-mode屬性——動畫時間外屬性 203
實例52　制作關(guān)鍵幀動畫效果 203
第11章  CSS樣式的瀏覽器兼容性
11.1　CSS選擇器的瀏覽器兼容性 207
11.1.1　基礎(chǔ)選擇器的瀏覽器兼容性 207
11.1.2　層次選擇器的瀏覽器兼容性 207
11.1.3　偽類選擇器的瀏覽器兼容性 208
實例53　美化超鏈接按鈕樣式 209
11.1.4　屬性選擇器的瀏覽器兼容性 211
11.2　文本屬性的瀏覽器兼容性 212
11.2.1　文字和段落樣式的瀏覽器兼容性 212
11.2.2　text-overflow屬性的瀏覽器兼容性 213
11.2.3　text-shadow屬性的瀏覽器兼容性 214
11.2.4　@font-face規(guī)則的瀏覽器兼容性 214
11.3　背景和圖片的瀏覽器兼容性 216
11.3.1　background-clip屬性的瀏覽器兼容性 216
11.3.2　CSS3多背景的瀏覽器兼容性 217
11.3.3　opacity屬性的瀏覽器兼容性 218
11.4　邊框?qū)傩缘臑g覽器兼容性 218
11.4.1　邊框基礎(chǔ)屬性的瀏覽器兼容性 218
11.4.2　border-color屬性的瀏覽器兼容性 219
11.4.3　border-radius屬性的瀏覽器兼容性 219
實例54　為網(wǎng)頁元素設(shè)置圓角效果 220
11.4.4　border-image屬性的瀏覽器兼容性 222
11.4.5　box-shadow屬性的瀏覽器兼容性 223
11.5　盒模型的瀏覽器兼容性 224
11.5.1　CSS盒模型的瀏覽器兼容性 224
11.5.2　定位屬性的瀏覽器兼容性 224
11.5.3　outline屬性的瀏覽器兼容性 226
11.5.4　多列布局屬性的瀏覽器兼容性 226
實例55　實現(xiàn)網(wǎng)頁內(nèi)容分列布局 227
11.6　CSS動畫的瀏覽器兼容性 229
11.6.1　CSS3變形屬性的瀏覽器兼容性 229
11.6.2　CSS3過渡屬性的瀏覽器兼容性 230
11.6.3　animation屬性的瀏覽器兼容性 231
11.6.4　@keyframes的瀏覽器兼容性 231
第12章   使用DIV CSS布局網(wǎng)頁
12.1　關(guān)于DIV 232
12.1.1　什么是DIV 232
12.1.2　如何在網(wǎng)頁中插入DIV 232
12.1.3　與標(biāo)簽的區(qū)別 233
12.2　ID與class 234
12.2.1　什么是ID 234
12.2.2　什么時候使用ID 235
12.2.3　什么是class 235
12.2.4　什么時候使用class 235
12.3　CSS盒模型 236
12.3.1　什么是CSS盒模型 236
12.3.2　CSS盒模型的要點 237
12.3.3　margin屬性 237
實例56　制作房產(chǎn)網(wǎng)站歡迎頁 237
12.3.4　border屬性 238
12.3.5　padding屬性 239
實例57　制作圖片網(wǎng)頁 239
12.3.6　content部分 240
12.4　CSS3中的彈性盒模型 240
12.4.1　box-orient屬性控制盒子取向 241
12.4.2　box-direction屬性控制盒子順序 242
12.4.3　box-ordinal-group屬性控制盒子位置 243
12.4.4　box-flex屬性控制盒子彈性空間 245
12.4.5　盒子空間管理box-pack和box-align屬性 246
12.4.6　盒子空間溢出管理box-lines屬性 248
12.5　網(wǎng)頁元素定位 248
12.5.1　關(guān)于position屬性 248
12.5.2　relative定位方式 249
實例58　實現(xiàn)圖像的疊加效果 249
12.5.3　absolute定位方式 250
實例59　制作科技公司網(wǎng)站頁面 250
12.5.4　fixed定位方式 252
實例60　固定不動的網(wǎng)站導(dǎo)航菜單 252
12.5.5　float定位方式 253
實例61　制作圖片列表頁面 253
12.6　常用DIV CSS布局解析 256
12.6.1　內(nèi)容居中的網(wǎng)頁布局 256
12.6.2　浮動的網(wǎng)頁布局 257
12.6.3　自適應(yīng)高度的解決方法 261
12.7　CSS3中的界面相關(guān)屬性 261
12.7.1　內(nèi)容溢出處理overflow 262
12.7.2　區(qū)域縮放調(diào)節(jié)resize 263
12.7.3　輪廓外邊框outline 264
12.7.4　多列布局column 265
12.7.5　航序列號nav-index 265
12.8　CSS3的其他屬性 265
12.8.1　判斷對象@media 265
實例62　根據(jù)不同的瀏覽器窗口顯示不同的背景顏色 266
12.8.2　加載服務(wù)器端字體@font-face 266
12.9　使用CSS3制作網(wǎng)頁特效 267
實例63　網(wǎng)頁動態(tài)交互導(dǎo)航菜單 267
第13章  CSS與JavaScript實現(xiàn)網(wǎng)頁特效
13.1　JavaScript基礎(chǔ) 272
13.1.1　JavaScript的發(fā)展 272
13.1.2　JavaScript的特點 273
13.1.3　JavaScript語法中的基本要求 273
13.1.4　CSS樣式與JavaScript 275
13.2　使用JavaScript的方法 275
13.2.1　使用