Div+CSS 3.0網(wǎng)頁(yè)樣式與布局經(jīng)典范例

01 Div+CSS網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ) 1
1.1  網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ) 1
1.1.1  什么是網(wǎng)頁(yè)設(shè)計(jì) 1
1.1.2  網(wǎng)頁(yè)與網(wǎng)站 2
1.1.3  網(wǎng)頁(yè)設(shè)計(jì)的原則 3
1.1.4  網(wǎng)頁(yè)設(shè)計(jì)的成功要素 4
1.1.5  網(wǎng)頁(yè)配色的基本方法 4
1.1.6  網(wǎng)站制作流程 6
1.2  網(wǎng)站標(biāo)準(zhǔn)和布局方式 8
1.2.1  網(wǎng)站標(biāo)準(zhǔn) 8
1.2.2  網(wǎng)頁(yè)布局方式 9
1.3  掌握Dreamweaver的基本操作 12
1.3.1  使用Dreamweaver定義本地站點(diǎn) 12
1.3.2  使用Dreamweaver在網(wǎng)頁(yè)中插入Div 13
1.3.3  使用Dreamweaver定義CSS樣式 16
1.4  關(guān)于表格布局 17
1.4.1  表格布局的特點(diǎn) 17
1.4.2  冗余的嵌套表格和混亂的結(jié)構(gòu) 18
1.5  關(guān)于Div+CSS布局 18
1.5.1  什么是Web標(biāo)準(zhǔn) 18
1.5.2  Div+CSS的優(yōu)勢(shì) 19
1.6  本章小結(jié) 2002 HTML、XHTML和HTML 5基礎(chǔ) 21
2.1  了解HTML和XHTML 21
2.2  HTML基礎(chǔ) 21
2.2.1  HTML概述 22
2.2.2  HTML的基本結(jié)構(gòu) 22
2.2.3  HTML的基本語(yǔ)法 23
2.2.4  HTML的主要功能 24
2.3  HTML常用標(biāo)簽 24
2.3.1  基本標(biāo)簽 24
2.3.2  格式標(biāo)簽 25
2.3.3  文本標(biāo)簽 25
2.3.4  圖像標(biāo)簽 26
2.3.5  超鏈接標(biāo)簽 26
2.3.6  表格標(biāo)簽 26
2.3.7  分區(qū)標(biāo)簽 27
2.4  XHTML基礎(chǔ) 28
2.4.1  XHTML概述 28
2.4.2  XHTML的文檔結(jié)構(gòu) 28
2.4.3  XHTML的代碼規(guī)范 29
2.4.4  XHTML的文檔類型 31
2.4.5  使用XHTML的好處 32
2.4.6  制作第一個(gè)HTML頁(yè)面 32
2.5  HTML 5基礎(chǔ) 34
2.5.1  了解HTML 5 34
2.5.2  HTML 5的標(biāo)簽 34
2.5.3  HTML 5的標(biāo)準(zhǔn)屬性 37
2.6  HTML 5的應(yīng)用 39
2.6.1  ＜canvas＞標(biāo)簽的應(yīng)用 39
2.6.2  ＜audio＞標(biāo)簽的應(yīng)用 41
2.6.3  ＜video＞標(biāo)簽的應(yīng)用 42
2.7  實(shí)例精講——制作個(gè)人網(wǎng)站頁(yè)面 44
2.8  本章小結(jié) 4803 CSS基礎(chǔ) 49
3.1  了解CSS 49
3.1.1  CSS樣式概述 49
3.1.2  CSS的特點(diǎn) 50
3.1.3  CSS樣式能做什么 51
3.1.4  CSS樣式不能做什么 52
3.2  CSS樣式的語(yǔ)法 52
3.2.1  CSS的基本語(yǔ)法 52
3.2.2  CSS的樣式規(guī)則 53
3.3  在網(wǎng)頁(yè)中應(yīng)用CSS的4種方式 53
3.3.1  內(nèi)聯(lián)樣式 54
3.3.2  嵌入樣式 55
3.3.3  鏈接外部樣式 56
3.3.4  導(dǎo)入樣式 58
3.4  CSS中的單位和值 59
3.4.1  顏色設(shè)置 59
3.4.2  長(zhǎng)度單位 61
3.5  CSS文檔結(jié)構(gòu) 62
3.5.1  文檔結(jié)構(gòu) 62
3.5.2  CSS的繼承性 62
3.5.3  CSS的特殊性 64
3.5.4  CSS的層疊性 64
3.5.5  CSS的重要性 64
3.6  CSS選擇器 65
3.6.1  標(biāo)簽選擇器 65
3.6.2  類選擇器 66
3.6.3  ID選擇器 66
3.6.4  通配選擇器 67
3.6.5  偽類選擇器 67
3.6.6  組合選擇器 67
3.7  CSS選擇器聲明 67
3.7.1  群選擇器 68
3.7.2  派生選擇器 68
3.8  CSS3中新增的顏色定義方法 68
3.8.1  HSL colors 68
3.8.2  HSLA colors 70
3.8.3  RGBA colors 70
3.9  CSS3中新增的選擇器 71
3.9.1  屬性選擇器 72
3.9.2  結(jié)構(gòu)偽類選擇器 72
3.9.3  UI元素狀態(tài)偽類選擇器 73
3.10  實(shí)例精講——制作兒童類網(wǎng)站頁(yè)面 73
3.11  本章小結(jié) 8004  Div+CSS布局入門(mén) 81
4.1  定義Div 81
4.1.1  什么是Div 81
4.1.2  在網(wǎng)頁(yè)中插入Div 82
4.2  關(guān)于CSS盒模型 83
4.2.1  可視化盒模型 83
4.2.2  margin（邊界） 84
4.2.3  border（邊框） 85
4.2.4  padding（填充） 87
4.2.5  content（內(nèi)容） 88
4.3  常用定位方式 88
4.3.1  CSS定位屬性 88
4.3.2  相對(duì)定位 89
4.3.3  絕對(duì)定位 90
4.3.4  固定定位 91
4.3.5  浮動(dòng)定位 92
4.3.6  空白邊疊加 95
4.4  常用布局方式 97
4.4.1  居中布局 97
4.4.2  浮動(dòng)布局 98
4.4.3  自適應(yīng)高度的解決方法 101
4.5  塊元素和行內(nèi)元素 102
4.5.1  塊元素 102
4.5.2  行內(nèi)元素 103
4.6  CSS3中新增的彈性盒模型 103
4.6.1  盒子取向box-orient 104
4.6.2  盒子順序box-direction 105
4.6.3  盒子位置box-ordinal-group 107
4.6.4  盒子彈性空間box-flex 108
4.6.5  盒子空間管理box-pack和box-align 109
4.6.6  盒子空間溢出管理box-lines 110
4.7  實(shí)例精講——制作社區(qū)類網(wǎng)站頁(yè)面 111
4.8  本章小結(jié) 11805 使用CSS控制文字樣式 119
5.1  控制文字樣式 119
5.1.1  定義字體 119
5.1.2  定義字體大小 121
5.1.3  定義字體顏色 122
5.1.4  定義字體粗細(xì) 123
5.1.5  定義字體樣式 124
5.1.6  定義英文字體大小寫(xiě) 125
5.1.7  定義字體下畫(huà)線、頂畫(huà)線和刪除線 127
5.2  控制字間距和段落樣式 128
5.2.1  定義字間距 129
5.2.2  定義行間距 129
5.2.3  定義段落首字下沉 130
5.2.4  定義段落首行縮進(jìn) 131
5.2.5  定義段落水平對(duì)齊 132
5.2.6  定義文本垂直對(duì)齊 133
5.3  CSS樣式?jīng)_突 134
5.4  CSS3中新增的文字屬性 136
5.4.1  文字陰影text-shadow 136
5.4.2  控制文本換行word-wrap 137
5.4.3  文本溢出處理text-overflow 139
5.4.4  保持字體大小不變font-size-adjust 140
5.5  實(shí)例精講——制作工作室網(wǎng)站頁(yè)面 141
5.6  本章小結(jié) 14806 使用CSS控制背景和圖片樣式 149
6.1  使用CSS設(shè)置背景顏色 149
6.1.1  定義頁(yè)面背景顏色 149
6.1.2  通過(guò)背景顏色為頁(yè)面分塊 150
6.2  使用CSS設(shè)置背景圖像  151
6.2.1  定義背景圖像 151
6.2.2  定義背景圖像的重復(fù)方式 152
6.2.3  定義背景圖像的位置 155
6.2.4  固定背景圖像 156
6.3  使用CSS設(shè)置圖片樣式  157
6.3.1  定義圖片的邊框 158
6.3.2  定義圖片縮放 160
6.3.3  定義圖片的水平對(duì)齊 162
6.3.4  定義圖片的垂直對(duì)齊 163
6.4  創(chuàng)建圖文混排效果  165
6.4.1  使用CSS實(shí)現(xiàn)文字環(huán)繞效果 165
6.4.2  設(shè)置圖文混排的間距 166
6.5  CSS3中新增的背景屬性 167
6.5.1  背景圖像大小background-size 167
6.5.2  背景圖像顯示區(qū)域background-
         origin 169
6.5.3  背景圖像裁剪區(qū)域background-
         clip 170
6.6  CSS3中新增的邊框?qū)傩?nbsp;172
6.6.1  多重邊框顏色border-colors 172
6.6.2  圓角邊框border-radius 173
6.6.3  圖像邊框border-image 174
6.7  實(shí)例精講——制作設(shè)計(jì)幼兒園網(wǎng)頁(yè) 176
6.8  本章小結(jié) 18607 使用CSS控制列表樣式 187
7.1  列表概述 187
7.2  使用CSS定義列表樣式 188
7.2.1  定義ul無(wú)序列表樣式 188
7.2.2  定義ol有序列表樣式 189
7.2.3  更改列表項(xiàng)目樣式 190
7.2.4  使用圖片作為列表樣式 190
7.2.5  定義列表 191
7.3  使用列表制作導(dǎo)航菜單 192
7.3.1  使用CSS樣式創(chuàng)建橫向?qū)Ш讲藛?nbsp;192
7.3.2  使用CSS樣式將橫向菜單轉(zhuǎn)換為豎向菜單 194
7.4  CSS3中新增的內(nèi)容和透明度屬性 195
7.4.1  內(nèi)容content 195
7.4.2  透明度opacity 196
7.5   實(shí)例精講——制作音樂(lè)網(wǎng)站頁(yè)面 197
7.6  本章小結(jié) 20808 使用CSS控制表單樣式 209
8.1  關(guān)于表單元素 209
8.1.1  輸入域標(biāo)簽＜input＞ 209
8.1.2  文本域標(biāo)簽＜textarea＞ 210
8.1.3  選擇域標(biāo)簽＜select＞和＜o(jì)ption＞ 210
8.2  使用CSS控制表單元素 2