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

目錄
第1章  網(wǎng)頁(yè)和網(wǎng)站開發(fā)知識(shí)
1.1　了解網(wǎng)頁(yè) 1
1.1.1　網(wǎng)頁(yè)與網(wǎng)站的關(guān)系 1
1.1.2　網(wǎng)頁(yè)基本構(gòu)成元素 3
1.2　定義網(wǎng)頁(yè)設(shè)計(jì) 3
1.2.1　簡(jiǎn)述網(wǎng)頁(yè)設(shè)計(jì) 3
1.2.2　網(wǎng)頁(yè)設(shè)計(jì)的特點(diǎn) 4
1.2.3　網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)術(shù)語(yǔ) 6
1.2.4　常見(jiàn)網(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)頁(yè)版式與布局分析 12
1.3.5　確定網(wǎng)站主色調(diào) 12
1.3.6　設(shè)計(jì)網(wǎng)站頁(yè)面 13
1.3.7　切割和優(yōu)化網(wǎng)頁(yè) 13
1.3.8　制作HTML頁(yè)面 13
1.3.9　使用CSS樣式控制網(wǎng)頁(yè)外觀 13
1.3.10　為網(wǎng)頁(yè)應(yīng)用JavaScript特效 14
1.3.11　網(wǎng)站后臺(tái)程序開發(fā) 14
1.3.12　申請(qǐng)域名和服務(wù)器空間 14
1.3.13　測(cè)試并上傳網(wǎng)站 14
1.4　關(guān)于DIV CSS布局 14
1.4.1　布局特點(diǎn) 14
1.4.2　DIV CSS布局的優(yōu)勢(shì) 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的基本語(yǔ)法 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頁(yè)面 24
實(shí)例01　制作簡(jiǎn)單的HTML頁(yè)面 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的簡(jiǎn)化操作 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)勢(shì) 31
2.5　HTML5的應(yīng)用 32
2.5.1　標(biāo)簽 32
實(shí)例02　在網(wǎng)頁(yè)中實(shí)現(xiàn)繪圖效果 33
2.5.2　聲音和視頻標(biāo)簽 34
實(shí)例03　在網(wǎng)頁(yè)中嵌入音頻和視頻 35
第3章  初識(shí)CSS樣式 3.1　了解CSS樣式 38
3.1.1　使用CSS樣式的原因 38
3.1.2　使用CSS樣式的優(yōu)勢(shì) 39
3.1.3　使用CSS樣式的作用 40
3.1.4　使用CSS樣式的局限性 41
3.1.5　CSS樣式的基礎(chǔ)語(yǔ)法 41
3.1.6　認(rèn)識(shí)CSS規(guī)則的構(gòu)成 42
3.2　在網(wǎng)頁(yè)中應(yīng)用CSS樣式的4種方法 42
3.2.1　內(nèi)聯(lián)CSS樣式 42
實(shí)例04　使用style屬性添加內(nèi)聯(lián)CSS樣式 43
3.2.2　內(nèi)部CSS樣式 44
實(shí)例05　使用style標(biāo)簽添加內(nèi)部CSS樣式 44
3.2.3　鏈接外部CSS樣式文件 45
實(shí)例06　使用link標(biāo)簽鏈接外部CSS樣式文件 45
3.2.4　導(dǎo)入外部CSS樣式文件 46
實(shí)例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　偽類和偽對(duì)象選擇器 49
實(shí)例08　設(shè)置酒店網(wǎng)站文字鏈接效果 49
3.3.6　群選擇器 50
實(shí)例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中的相對(duì)單位 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
實(shí)例10　設(shè)置歡迎頁(yè)面中文字的字體和大小 64
4.1.3　設(shè)置字體顏色color 65
4.1.4　設(shè)置字體粗細(xì)font-weight 65
實(shí)例11　設(shè)置網(wǎng)頁(yè)中字體的顏色和粗細(xì) 66
4.1.5　設(shè)置字體樣式font-style 68
4.1.6　設(shè)置英文字體大小寫text-transform 68
4.1.7　設(shè)置文字修飾text-decoration 68
實(shí)例12　設(shè)置網(wǎng)頁(yè)中英文字體的屬性 68
4.2　設(shè)置段落樣式 72
4.2.1　字間距l(xiāng)etter-spacing 72
4.2.2　行間距l(xiāng)ine-height 72
實(shí)例13　在網(wǎng)頁(yè)中設(shè)計(jì)文字間距 72
4.2.3　段落首字下沉 74
4.2.4　段落首行縮進(jìn)text-indent 74
實(shí)例14　設(shè)置段落文字首字下沉和縮進(jìn)樣式 74
4.2.5　段落水平對(duì)齊text-align 76
4.2.6　文本垂直對(duì)齊vertical-align 76
實(shí)例15　設(shè)置文本水平居中和垂直居中對(duì)齊 76
4.3　使用CSS3嵌入Web字體 78
4.3.1　@font-face語(yǔ)法 78
4.3.2　自定義字體方法 79
4.3.3　聲明多個(gè)字體來(lái)源 79
4.3.4　@font-face規(guī)則的瀏覽器兼容性 80
4.4　在網(wǎng)頁(yè)中應(yīng)用特殊字體 80
實(shí)例16　在卡通網(wǎng)頁(yè)中使用特殊字體 80
4.5　CSS3中文字效果設(shè)置 82
4.5.1　文字陰影text-shadow 82
4.5.2　文本溢出處理text-overflow 83
實(shí)例17　為網(wǎng)頁(yè)中的文字設(shè)置效果 83
第5章  使用CSS設(shè)置背景和圖片樣式
5.1　設(shè)置背景顏色CSS樣式 86
5.1.1　背景顏色background-color 86
5.1.2　為頁(yè)面元素設(shè)置不同的背景顏色 86
實(shí)例18　為網(wǎng)頁(yè)設(shè)置背景顏色 86
5.1.3　背景圖像大小background-size 88
5.1.4　背景圖像顯示區(qū)域background-origin 88
5.1.5　背景圖像裁剪區(qū)域background-clip 88
實(shí)例19　控制網(wǎng)頁(yè)元素背景圖像 89
5.2　設(shè)置背景圖像CSS樣式 91
5.2.1　背景圖像background-image 91
5.2.2　背景圖像重復(fù)方式background-repeat 91
實(shí)例20　設(shè)置圖片網(wǎng)站背景圖像 91
5.2.3　背景圖像固定background-attachment 93
5.2.4　背景圖像位置background-position 93
實(shí)例21　設(shè)置網(wǎng)頁(yè)背景和圖像固定位置 94
5.2.5　漸變背景 95
5.3　設(shè)置圖片CSS樣式 96
5.3.1　圖片邊框border 96
實(shí)例22　設(shè)置卡通網(wǎng)站中的圖片邊框 99
5.3.2　圖片縮放 100
實(shí)例23　實(shí)現(xiàn)跟隨瀏覽器窗口縮放的圖片 100
5.3.3　圖片水平對(duì)齊 102
5.3.4　圖片的垂直對(duì)齊 103
5.4　在網(wǎng)頁(yè)中實(shí)現(xiàn)圖文混排 104
5.4.1　使用CSS樣式實(shí)現(xiàn)文本繞圖效果 104
5.4.2　設(shè)置文本繞圖間距 105
實(shí)例24　實(shí)現(xiàn)圖文混排并設(shè)置間距 105
5.5　網(wǎng)頁(yè)中特殊的圖像效果應(yīng)用 106
5.5.1　全屏大圖切換 106
實(shí)例25　設(shè)計(jì)作品展示頁(yè)面 107
5.5.2　鼠標(biāo)經(jīng)過(guò)圖像動(dòng)態(tài)效果 109
實(shí)例26　制作圖片展示網(wǎng)頁(yè) 109
第6章  使用CSS設(shè)置列表樣式
6.1　了解網(wǎng)頁(yè)中的列表 113
6.2　設(shè)置列表的CSS樣式 113
6.2.1　ul無(wú)序項(xiàng)目列表 114
6.2.2　ol有序編號(hào)列表 114
實(shí)例27　制作無(wú)序列表和有序列表 114
6.2.3　dl定義列表 116
6.2.4　更改列表項(xiàng)目樣式 117
6.2.5　自定義列表符號(hào) 117
6.3　使用列表制作導(dǎo)航菜單 118
6.3.1　使用CSS樣式創(chuàng)建橫向?qū)Ш讲藛?118
實(shí)例28　制作游戲網(wǎng)站導(dǎo)航 118
6.3.2　使用CSS樣式創(chuàng)建豎向?qū)Ш讲藛?119
6.4　列表在網(wǎng)頁(yè)中的特殊應(yīng)用 120
6.4.1　滾動(dòng)圖像 120
實(shí)例29　在網(wǎng)頁(yè)中實(shí)現(xiàn)四圖橫向滾動(dòng)效果 120
6.4.2　動(dòng)態(tài)堆疊卡 124
實(shí)例30　制作個(gè)性網(wǎng)站歡迎頁(yè)面 124
第7章  使用CSS設(shè)置超鏈接樣式
7.1　了解網(wǎng)頁(yè)超鏈接 128
7.1.1　什么是超鏈接 128
7.1.2　關(guān)于鏈接路徑 128
7.1.3　超鏈接對(duì)象 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
實(shí)例31　設(shè)置游戲網(wǎng)站文字超鏈接效果 132
7.3.2　按鈕式超鏈接 134
實(shí)例32　制作設(shè)計(jì)網(wǎng)站導(dǎo)航菜單 134
7.3.3　為超鏈接添加背景 136
實(shí)例33　背景翻轉(zhuǎn)導(dǎo)航菜單 136
7.4　設(shè)置網(wǎng)頁(yè)中的光標(biāo)效果 138
7.5　超鏈接在網(wǎng)頁(yè)中的特殊應(yīng)用 139
7.5.1　傾斜導(dǎo)航菜單 139
實(shí)例34　玩具網(wǎng)站傾斜導(dǎo)航 139
7.5.2　動(dòng)感超鏈接 141
實(shí)例35　卡通網(wǎng)站動(dòng)感導(dǎo)航菜單 142
第8章  使用CSS設(shè)置表格樣式
8.1　了解表格 145
8.1.1　認(rèn)識(shí)表格標(biāo)簽與結(jié)構(gòu) 145
8.1.2　表格標(biāo)題標(biāo)簽 147
8.1.3　表格列和標(biāo)簽 148
8.1.4　水平對(duì)齊和垂直對(duì)齊 149
8.2　使用CSS樣式控制表格外觀 150
8.2.1　設(shè)置表格邊框 150
8.2.2　設(shè)置表格背景顏色 150
8.2.3　設(shè)置表格背景圖像 150
實(shí)例36　制作網(wǎng)站新聞欄目 150
8.3　使用CSS樣式實(shí)現(xiàn)表格特效 154
8.3.1　設(shè)置單元行背景顏色 154
8.3.2　:hover偽類在表格中的應(yīng)用 154
實(shí)例37　使用CSS實(shí)現(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
實(shí)例38　創(chuàng)建簡(jiǎn)單的網(wǎng)頁(yè)表單 163
9.2　使用CSS樣式控制表單元素 165
9.2.1　使用CSS樣式設(shè)置表單元素的背景色和邊框 165
實(shí)例39　制作網(wǎng)站登錄頁(yè)面 165
9.2.2　使用CSS樣式實(shí)現(xiàn)圓角文本字段 169
實(shí)例40　制作圓角登錄框 169
9.2.3　使用CSS樣式設(shè)置下拉列表效果 170
實(shí)例41　制作網(wǎng)站搜索欄 170
9.3　表單在網(wǎng)頁(yè)中的特殊應(yīng)用 173
9.3.1　聚焦型提示語(yǔ)消失 173
實(shí)例42　文本字段提示語(yǔ)效果1 173
9.3.2　輸入型提示語(yǔ)消失 176
實(shí)例43　文本字段提示語(yǔ)效果2 176
第10章  使用CSS設(shè)置動(dòng)畫效果
10.1　CSS3變形屬性簡(jiǎn)介 178
10.2　實(shí)現(xiàn)網(wǎng)頁(yè)元素2D變形效果 179
10.2.1　旋轉(zhuǎn)變形 179
實(shí)例44　實(shí)現(xiàn)網(wǎng)頁(yè)元素的旋轉(zhuǎn)效果 179
10.2.2　縮放和翻轉(zhuǎn)變形 181
實(shí)例45　實(shí)現(xiàn)網(wǎng)頁(yè)元素的縮放效果 181
10.2.3　移動(dòng)變形 182
實(shí)例46　實(shí)現(xiàn)網(wǎng)頁(yè)元素位置的移動(dòng) 183
10.2.4　傾斜變形 184
實(shí)例47　實(shí)現(xiàn)網(wǎng)頁(yè)元素的傾斜效果 184
10.2.5　矩陣變形 186
10.3　實(shí)現(xiàn)元素3D變形效果 186
10.3.1　3D位移 186
實(shí)例48　實(shí)現(xiàn)網(wǎng)頁(yè)元素的3D位移效果 187
10.3.2　3D旋轉(zhuǎn) 188
實(shí)例49　實(shí)現(xiàn)網(wǎng)頁(yè)元素的3D旋轉(zhuǎn)效果 189
10.3.3　3D縮放 191
實(shí)例50　實(shí)現(xiàn)網(wǎng)頁(yè)元素的3D縮放效果 191
10.3.4　3D矩陣 192
10.4　CSS3過(guò)渡簡(jiǎn)介 193
10.4.1　CSS3過(guò)渡屬性 193
10.4.2　如何創(chuàng)建過(guò)渡動(dòng)畫 193
10.5　CSS3實(shí)現(xiàn)元素過(guò)渡效果 194
10.5.1　transition-property屬性——實(shí)現(xiàn)過(guò)渡效果 194
10.5.2　transition-duration屬性——過(guò)渡時(shí)間 195
實(shí)例51　實(shí)現(xiàn)網(wǎng)頁(yè)元素的變形過(guò)渡效果 195
10.5.3　transition-delay屬性——過(guò)渡延遲時(shí)間 197
10.5.4　transition-timing-function屬性——過(guò)渡方式 198
10.6　CSS3關(guān)鍵幀動(dòng)畫簡(jiǎn)介 198
10.6.1　CSS3新增的animation屬性 198
10.6.2　@keyframes的語(yǔ)法 199
10.7　為網(wǎng)頁(yè)元素應(yīng)用關(guān)鍵幀動(dòng)畫 200
10.7.1　使用@keyframes聲明動(dòng)畫 200
10.7.2　調(diào)用@keyframes聲明的動(dòng)畫 201
10.8　CSS3動(dòng)畫子屬性詳解 201
10.8.1　animation-name屬性——調(diào)用動(dòng)畫 201
10.8.2　animation-duration屬性——動(dòng)畫播放時(shí)間 202
10.8.3　animation-timing-function屬性——動(dòng)畫播放方式 202
10.8.4　animation-delay屬性——動(dòng)畫開始播放時(shí)間 202
10.8.5　animation-iteration-count屬性——動(dòng)畫播放次數(shù) 202
10.8.6　animation-direction屬性——動(dòng)畫播放方向 202
10.8.7　animation-play-state屬性——動(dòng)畫播放狀態(tài) 203
10.8.8　animation-fill-mode屬性——動(dòng)畫時(shí)間外屬性 203
實(shí)例52　制作關(guān)鍵幀動(dòng)畫效果 203
第11章  CSS樣式的瀏覽器兼容性
11.1　CSS選擇器的瀏覽器兼容性 207
11.1.1　基礎(chǔ)選擇器的瀏覽器兼容性 207
11.1.2　層次選擇器的瀏覽器兼容性 207
11.1.3　偽類選擇器的瀏覽器兼容性 208
實(shí)例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
實(shí)例54　為網(wǎng)頁(yè)元素設(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
實(shí)例55　實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容分列布局 227
11.6　CSS動(dòng)畫的瀏覽器兼容性 229
11.6.1　CSS3變形屬性的瀏覽器兼容性 229
11.6.2　CSS3過(guò)渡屬性的瀏覽器兼容性 230
11.6.3　animation屬性的瀏覽器兼容性 231
11.6.4　@keyframes的瀏覽器兼容性 231
第12章   使用DIV CSS布局網(wǎng)頁(yè)
12.1　關(guān)于DIV 232
12.1.1　什么是DIV 232
12.1.2　如何在網(wǎng)頁(yè)中插入DIV 232
12.1.3　與標(biāo)簽的區(qū)別 233
12.2　ID與class 234
12.2.1　什么是ID 234
12.2.2　什么時(shí)候使用ID 235
12.2.3　什么是class 235
12.2.4　什么時(shí)候使用class 235
12.3　CSS盒模型 236
12.3.1　什么是CSS盒模型 236
12.3.2　CSS盒模型的要點(diǎn) 237
12.3.3　margin屬性 237
實(shí)例56　制作房產(chǎn)網(wǎng)站歡迎頁(yè) 237
12.3.4　border屬性 238
12.3.5　padding屬性 239
實(shí)例57　制作圖片網(wǎng)頁(yè) 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)頁(yè)元素定位 248
12.5.1　關(guān)于position屬性 248
12.5.2　relative定位方式 249
實(shí)例58　實(shí)現(xiàn)圖像的疊加效果 249
12.5.3　absolute定位方式 250
實(shí)例59　制作科技公司網(wǎng)站頁(yè)面 250
12.5.4　fixed定位方式 252
實(shí)例60　固定不動(dòng)的網(wǎng)站導(dǎo)航菜單 252
12.5.5　float定位方式 253
實(shí)例61　制作圖片列表頁(yè)面 253
12.6　常用DIV CSS布局解析 256
12.6.1　內(nèi)容居中的網(wǎng)頁(yè)布局 256
12.6.2　浮動(dòng)的網(wǎng)頁(yè)布局 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　航序列號(hào)nav-index 265
12.8　CSS3的其他屬性 265
12.8.1　判斷對(duì)象@media 265
實(shí)例62　根據(jù)不同的瀏覽器窗口顯示不同的背景顏色 266
12.8.2　加載服務(wù)器端字體@font-face 266
12.9　使用CSS3制作網(wǎng)頁(yè)特效 267
實(shí)例63　網(wǎng)頁(yè)動(dòng)態(tài)交互導(dǎo)航菜單 267
第13章  CSS與JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)特效
13.1　JavaScript基礎(chǔ) 272
13.1.1　JavaScript的發(fā)展 272
13.1.2　JavaScript的特點(diǎn) 273
13.1.3　JavaScript語(yǔ)法中的基本要求 273
13.1.4　CSS樣式與JavaScript 275
13.2　使用JavaScript的方法 275
13.2.1　使用