HTML 5+CSS 3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)與制作全程揭秘（網(wǎng)頁(yè)設(shè)計(jì)與開發(fā)殿堂之路）

目錄
第1章  認(rèn)識(shí)HTML與HTML5
1.1　了解動(dòng)態(tài)網(wǎng)站的開發(fā)技術(shù) 1
1.1.1　網(wǎng)頁(yè)編輯軟件Dreamweaver 1
1.1.2　網(wǎng)頁(yè)標(biāo)記語(yǔ)言HTML 2
1.1.3　網(wǎng)頁(yè)表現(xiàn)語(yǔ)言CSS 2
1.1.4　網(wǎng)頁(yè)特效腳本語(yǔ)言JavaScript 2
1.1.5　動(dòng)態(tài)網(wǎng)頁(yè)編程語(yǔ)言ASP、PHP和JSP等 3
1.2　HTML基礎(chǔ) 3
1.2.1　什么是HTML 3
1.2.2　HTML的主要功能 4
1.2.3　HTML的編輯環(huán)境 4
1.2.4　認(rèn)識(shí)Dreamweaver 5
實(shí) 戰(zhàn)　制作個(gè)HTML頁(yè)面 6
1.3　HTML5基礎(chǔ) 7
1.3.1　HTML5概述 7
1.3.2　HTML5的優(yōu)勢(shì) 8
1.4　認(rèn)識(shí)HTML5 9
1.4.1　HTML5的文檔結(jié)構(gòu) 9
1.4.2　HTML5的基本語(yǔ)法 9
1.4.3　HTML5精簡(jiǎn)的頭部 10
1.5　HTML5中新增的標(biāo)簽 10
1.5.1　結(jié)構(gòu)標(biāo)簽 11
1.5.2　文本標(biāo)簽 11
1.5.3　應(yīng)用和輔助標(biāo)簽 11
1.5.4　進(jìn)度標(biāo)簽 11
1.5.5　交互性標(biāo)簽 11
1.5.6　在文檔和應(yīng)用中使用的標(biāo)簽 12
1.5.7　標(biāo)簽 12
1.5.8　其他標(biāo)簽 12
1.6　HTML5中廢棄的標(biāo)簽 12
1.7　HTML、CSS與JavaScript的結(jié)合 13 第2章  HTML主體標(biāo)簽
2.1　HTML頭部標(biāo)簽設(shè)置 14
2.1.1　標(biāo)簽 14
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)標(biāo)題 14
2.1.2　標(biāo)簽 15
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)基底網(wǎng)址 16
2.1.3　標(biāo)簽 16
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)關(guān)鍵字、說(shuō)明以及頁(yè)面定時(shí)跳轉(zhuǎn) 18
2.2　HTML主體標(biāo)簽設(shè)置 19
2.2.1　邊距屬性margin 19
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)整體內(nèi)容邊距 20
2.2.2　背景顏色屬性bgcolor 21
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)背景顏色 21
2.2.3　背景圖像屬性background 21
實(shí)戰(zhàn)　為網(wǎng)頁(yè)主體添加背景圖像 22
2.2.4　文字屬性text 22
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)文字默認(rèn)顏色 23
2.2.5　默認(rèn)鏈接屬性link 23
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)中超鏈接文字的默認(rèn)顏色 24
2.3　在HTML代碼中添加注釋 25
2.4　在HTML中調(diào)用外部程序 25
2.4.1　調(diào)用外部JavaScript程序 25
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中顯示當(dāng)前系統(tǒng)時(shí)間 25
2.4.2　區(qū)分客戶端與服務(wù)器端程序 27 第3章  文字與圖片標(biāo)簽的應(yīng)用
3.1　文字修飾 28
3.1.1　文字樣式標(biāo)簽 28
實(shí)戰(zhàn)　設(shè)置文字樣式 28
3.1.2　文字傾斜和標(biāo)簽 29
實(shí)戰(zhàn)　設(shè)置傾斜文字效果 30
3.1.3　文字加粗和標(biāo)簽 30
實(shí)戰(zhàn)　設(shè)置文字加粗效果 31
3.1.4　文字下畫線標(biāo)簽 31
實(shí)戰(zhàn)　為文字添加下畫線修飾 32
3.1.5　其他文字修飾方法 32
3.2　文字的分行與分段 33
3.2.1　文字換行
標(biāo)簽 33
實(shí)戰(zhàn)　為網(wǎng)頁(yè)中的文字內(nèi)容進(jìn)行換行處理 33
3.2.2　文字強(qiáng)制不換行標(biāo)簽 34
實(shí)戰(zhàn)　強(qiáng)制文字不自動(dòng)換行 34
3.2.3　文字分段標(biāo)簽 34
實(shí)戰(zhàn)　為網(wǎng)頁(yè)中的文字內(nèi)容進(jìn)行分段處理 34
3.2.4　標(biāo)題文字至標(biāo)簽 35
實(shí)戰(zhàn)　設(shè)置標(biāo)題文字 35
3.2.5　文字對(duì)齊屬性align 36
實(shí)戰(zhàn)　設(shè)置文字水平對(duì)齊效果 36
3.2.6　水平線標(biāo)簽 37
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中插入水平線 37
3.2.7　空格與特殊字符 38
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中插入空格和特殊字符 38
3.3　文本滾動(dòng)標(biāo)簽 39
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中實(shí)現(xiàn)滾動(dòng)文本效果 40
3.4　列表標(biāo)簽 41
3.4.1　認(rèn)識(shí)列表標(biāo)簽 41
3.4.2　無(wú)序列表標(biāo)簽 41
實(shí)戰(zhàn)　制作新聞列表 41
3.4.3　有序列表標(biāo)簽 43
實(shí)戰(zhàn)　制作音樂(lè)排行列表 43
3.4.4　定義列表標(biāo)簽 44
實(shí)戰(zhàn)　制作復(fù)雜的新聞列表 44
3.5　圖片標(biāo)簽 45
3.5.1　標(biāo)簽 45
實(shí)戰(zhàn)　制作圖像頁(yè)面 46
3.5.2　圖文混排 47
實(shí)戰(zhàn)　制作圖文介紹頁(yè)面 47
3.5.3　滾動(dòng)圖片 48
第4章  超鏈接與表格標(biāo)簽的應(yīng)用
4.1　超鏈接標(biāo)簽 49
4.1.1　超鏈接標(biāo)簽 49
4.1.2　相對(duì)鏈接和鏈接 50
4.1.3　超鏈接提示——alt屬性 50
4.1.4　超鏈接打開方式——target屬性 50
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中創(chuàng)建超鏈接 51
4.2　錨點(diǎn)鏈接 52
4.2.1　插入錨點(diǎn) 52
4.2.2　創(chuàng)建錨點(diǎn)鏈接 52
實(shí)戰(zhàn)　制作錨點(diǎn)鏈接頁(yè)面 52
4.3　創(chuàng)建特殊鏈接 53
4.3.1　空鏈接 54
4.3.2　文件下載鏈接 54
實(shí)戰(zhàn)　創(chuàng)建空鏈接和文件下載鏈接 54
4.3.3　腳本鏈接 55
4.3.4　E-mail鏈接 55
實(shí)戰(zhàn)　創(chuàng)建腳本鏈接和電子郵件鏈接 55
4.4　表格標(biāo)簽 56
4.4.1　表格的基本構(gòu)成、和標(biāo)簽 57
4.4.2　表格標(biāo)題標(biāo)簽 57
實(shí)戰(zhàn)　創(chuàng)建數(shù)據(jù)表格 57
4.4.3　表頭、表主體和表尾標(biāo)簽 58
實(shí)戰(zhàn)　設(shè)置表格中的表頭、表主體和表尾 59
4.5　iFrame框架 60
實(shí)戰(zhàn)　插入并設(shè)置iFrame框架 60
第5章  多媒體標(biāo)簽的應(yīng)用 5.1　使用標(biāo)簽嵌入傳統(tǒng)多媒體元素 62
5.1.1　使用標(biāo)簽在網(wǎng)頁(yè)中插入Flash動(dòng)畫 62
實(shí)戰(zhàn)　制作Flash歡迎頁(yè)面 62
5.1.2　使用標(biāo)簽為網(wǎng)頁(yè)添加背景音樂(lè) 63
實(shí)戰(zhàn) 　為網(wǎng)頁(yè)添加背景音樂(lè) 63
5.1.3　使用標(biāo)簽嵌入音頻 64
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中嵌入音頻 64
5.1.4　使用標(biāo)簽嵌入視頻 65
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中嵌入普通視頻 65
5.2　了解HTML5中的多媒體標(biāo)簽 66
5.2.1　在線多媒體的發(fā)展 66
5.2.2　檢查瀏覽器是否支持和標(biāo)簽 66
5.3　HTML5新增標(biāo)簽的應(yīng)用 67
5.3.1　標(biāo)簽所支持的音頻格式 67
5.3.2　使用標(biāo)簽 67
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中嵌入HTML5音頻播放 67
5.4　HTML5新增標(biāo)簽的應(yīng)用 68
5.4.1　標(biāo)簽所支持的視頻格式 68
5.4.2　使用標(biāo)簽 68
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中嵌入HTML5視頻播放 69
5.4.3　使用標(biāo)簽 70
5.5　與標(biāo)簽的屬性 70
5.5.1　元素的標(biāo)簽屬性 70
5.5.2　元素的接口屬性 71
5.6　與標(biāo)簽的接口方法與事件 72
5.6.1　元素的接口方法 72
5.6.2　元素的事件 72
實(shí)戰(zhàn)　自定義播放控制組件 73
第6章  表單標(biāo)簽的應(yīng)用
6.1　了解HTML表單 77
6.1.1　表單的作用 77
6.1.2　表單標(biāo)簽 77
6.1.3　表單的數(shù)據(jù)傳遞方式 78
6.2　普通的HTML表單元素 78
6.2.1　文本域 78
6.2.2　密碼域 78
6.2.3　文本區(qū)域 79
6.2.4　隱藏域 79
6.2.5　復(fù)選框 79
6.2.6　單選按鈕 79
6.2.7　選擇域 80
6.2.8　文件域 80
6.2.9　按鈕 80
6.2.10　圖像域 80
實(shí)戰(zhàn)　制作登錄表單 81
6.3　HTML5新增表單輸入類型 83
6.3.1　url類型 83
6.3.2　email類型 83
6.3.3　range類型 83
6.3.4　number類型 83
6.3.5　tel類型 84
6.3.6　search類型 84
6.3.7　color類型 84
6.3.8　date類型 84
6.3.9　month、week、time、datetime、datetime-local類型 85
實(shí)戰(zhàn)　制作留言表單頁(yè)面 85
6.3.10　瀏覽器對(duì)HTML5表單的支持情況 88
6.4　HTML5新增表單屬性 88
6.4.1　form屬性 88
6.4.2　formaction屬性 89
6.4.3　formmethod、formenctype、
　　　formnovalidate、formtarget屬性 89
6.4.4　placeholder屬性 89
6.4.5　autofocus屬性 89
實(shí)戰(zhàn)　為表單元素設(shè)置默認(rèn)提示內(nèi)容 90
6.4.6　autocomplete屬性 90
6.5　使用HTML5表單驗(yàn)證 91
6.5.1　用于實(shí)現(xiàn)驗(yàn)證的表單元素屬性 91
實(shí)戰(zhàn)　驗(yàn)證網(wǎng)頁(yè)表單元素 91
6.5.2　表單驗(yàn)證方法 92
6.5.3　表單驗(yàn)證事件 93 第7章  HTML5中標(biāo)簽的應(yīng)用
7.1　標(biāo)簽 95
7.1.1　了解標(biāo)簽 95
7.1.2　在網(wǎng)頁(yè)中使用標(biāo)簽 95
7.1.3　使用標(biāo)簽實(shí)現(xiàn)繪圖的流程 96
7.2　繪制基本圖形 97
7.2.1　繪制直線 97
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中繪制直線 97
7.2.2　繪制矩形 98
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中繪制矩形 99
7.2.3　繪制圓形 100
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中繪制圓形 101
7.2.4　繪制三角形 101
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中繪制三角形 102
7.2.5　圖形組合 102
7.3　繪制文本 104
7.3.1　使用文本 104
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中繪制文字 104
7.3.2　創(chuàng)建對(duì)象陰影 105
實(shí)戰(zhàn)　為網(wǎng)頁(yè)中所繪制的文字添加陰影 106
7.4　在網(wǎng)頁(yè)中繪制特殊形狀圖像 106
7.4.1　繪制圖像 106
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中繪制圖像 107
7.4.2　裁切區(qū)域 108
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中實(shí)現(xiàn)圓形圖像效果 108 第8章  HTML5文檔結(jié)構(gòu)標(biāo)簽的應(yīng)用
8.1　構(gòu)建HTML5頁(yè)面主體內(nèi)容 111
8.1.1　文章標(biāo)簽 111
8.1.2　章節(jié)標(biāo)簽 113
8.1.3　導(dǎo)航標(biāo)簽 114
8.1.4　輔助內(nèi)容標(biāo)簽 115
8.1.5　日期時(shí)間標(biāo)簽 116
8.2　HTML5文檔中的語(yǔ)義模塊標(biāo)簽 116
8.2.1　標(biāo)題標(biāo)簽 116
8.2.2　標(biāo)題分組標(biāo)簽 117
8.2.3　頁(yè)腳標(biāo)簽 118
8.2.4　聯(lián)系信息標(biāo)簽 118
8.3　制作HTML5文章頁(yè)面 119
實(shí)戰(zhàn)　制作HTML5文章頁(yè)面 119 第9章  CSS樣式基礎(chǔ)
9.1　了解CSS樣式 123
9.1.1　什么是CSS樣式 123
9.1.2　CSS樣式的發(fā)展 123
9.2　CSS樣式語(yǔ)法 124
9.2.1　CSS樣式基本語(yǔ)法 124
9.2.2　CSS樣式規(guī)則 125
9.3　創(chuàng)建和使用CSS選擇器 125
9.3.1　通配符選擇器 125
實(shí)戰(zhàn)　使用通配符選擇器控制網(wǎng)頁(yè)中的所有標(biāo)簽 126
9.3.2　標(biāo)簽選擇器 126
實(shí)戰(zhàn)　使用標(biāo)簽選擇器設(shè)置網(wǎng)頁(yè)整體樣式 127
9.3.3　ID選擇器 127
實(shí)戰(zhàn)　創(chuàng)建和使用ID CSS樣式 128
9.3.4　類選擇器 129
實(shí)戰(zhàn)　創(chuàng)建和使用類CSS樣式 129
9.3.5　偽類選擇器 130
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)中超鏈接偽類樣式 131
9.3.6　派生選擇器 132
實(shí)戰(zhàn)　創(chuàng)建派生選擇器樣式 133
9.3.7　群組選擇器 133
實(shí)戰(zhàn)　使用群組選擇器同時(shí)定義多個(gè)網(wǎng)頁(yè)元素樣式 134
9.4　在網(wǎng)頁(yè)中應(yīng)用CSS樣式的4種方式 135
9.4.1　內(nèi)聯(lián)CSS樣式 135
實(shí)戰(zhàn)　創(chuàng)建并應(yīng)用內(nèi)聯(lián)CSS樣式 135
9.4.2　內(nèi)部CSS樣式 136
實(shí)戰(zhàn)　創(chuàng)建并應(yīng)用內(nèi)部CSS樣式 136
9.4.3　外部CSS樣式 137
實(shí)戰(zhàn)　創(chuàng)建并鏈接外部CSS樣式表文件 137
9.4.4　導(dǎo)入外部CSS樣式 138
實(shí)戰(zhàn)　導(dǎo)入外部CSS樣式表文件 139
9.5　CSS樣式的特性 139
9.5.1　CSS樣式的繼承性 139
9.5.2　CSS樣式的特殊性 139
9.5.3　CSS樣式的層疊性 140
9.5.4　CSS樣式的重要性 140
第10章  CSS布局與定位方式
10.1　創(chuàng)建Div 142
10.1.1　了解Div 142
10.1.2　如何插入Div 142
10.1.3　塊元素與行內(nèi)元素 144
10.2　CSS基礎(chǔ)盒模型 145
10.2.1　CSS基礎(chǔ)盒模型概述 145
10.2.2　margin屬性——元素邊距 146
10.2.3　border屬性——元素邊框 146
10.2.4　padding屬性——元素填充 146
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)元素的盒模型相關(guān)屬性 147
10.3　網(wǎng)頁(yè)元素的定位方式 148
10.3.1　CSS定位屬性 148
10.3.2　相對(duì)定位relative 149
實(shí)戰(zhàn)　實(shí)現(xiàn)網(wǎng)頁(yè)元素的疊加顯示 149
10.3.3　定位absolute 150
實(shí)戰(zhàn)　網(wǎng)頁(yè)元素固定在右側(cè)顯示 150
10.3.4　固定定位fixed 151
實(shí)戰(zhàn)　實(shí)現(xiàn)固定位置的頂部Logo 151
10.3.5　浮動(dòng)定位 152
實(shí)戰(zhàn)　制作順序排列的圖像列表 152
10.3.6　空白邊疊加 155
實(shí)戰(zhàn)　網(wǎng)頁(yè)中空白邊疊加的應(yīng)用 155
10.4　常見(jiàn)的網(wǎng)頁(yè)布局方式 156
10.4.1　居中的布局 156
10.4.2　浮動(dòng)的布局 157
10.4.3　自適應(yīng)高度的解決方法 161
第11章  CSS基礎(chǔ)屬性詳解
11.1　使用CSS設(shè)置文字樣式 162
11.1.1　font-family屬性——字體 162
11.1.2　font-size屬性——字體大小 162
11.1.3　color屬性——文字顏色 163
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)文字基本效果 163
11.1.4　font-weight屬性——字體粗細(xì) 164
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)文字加粗效果 165
11.1.5　font-style屬性——字體樣式 165
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)文字傾斜效果 166
11.1.6　text-transform屬性——英文字體大小寫 166
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)中英文字體大小寫 167
11.1.7　text-decoration屬性——文字修飾 168
實(shí)戰(zhàn)　為網(wǎng)頁(yè)中的文字添加下畫線、頂畫線和刪除線效果 168
11.1.8　letter-spacing屬性——字符間距 169
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)中文字的字符間距 169
11.2　使用CSS設(shè)置段落樣式 170
11.2.1　line-height屬性——行間距 170
11.2.2　text-indent屬性——段落首行縮進(jìn) 170
實(shí)戰(zhàn)　美化網(wǎng)頁(yè)中的段落文本 170
11.2.3　段落首字下沉 171
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中實(shí)現(xiàn)段落文字首字下沉 172
11.2.4　text-align屬性——水平對(duì)齊方式 172
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)文本水平對(duì)齊效果 173
11.2.5　vertical-align屬性——垂直對(duì)齊方式 174
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)文本垂直對(duì)齊效果 174
11.3　使用CSS設(shè)置背景顏色和背景圖像 175
11.3.1　background-color屬性——背景顏色 176
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)的背景顏色 176
11.3.2　background-image屬性——背景圖像 176
11.3.3　background-repeat屬性——背景圖像重復(fù)方式 177
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)背景圖像及其重復(fù)方式 177
11.3.4　background-position屬性——背景圖像位置 179
實(shí)戰(zhàn)　定位網(wǎng)頁(yè)中的背景圖像 179
11.3.5　background-attachment屬性——固定背景圖像 180
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)中的背景圖像固定不動(dòng) 180
11.4　使用CSS設(shè)置邊框與圖片縮放樣式 181
11.4.1　border屬性——邊框 181
實(shí)戰(zhàn)　為網(wǎng)頁(yè)元素添加邊框效果 182
11.4.2　圖片縮放 184
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)中圖片的等比例縮放效果 184
11.5　使用CSS設(shè)置列表樣式 185
11.5.1　list-style-type屬性——設(shè)置列表符號(hào) 185
實(shí)戰(zhàn)　設(shè)置新聞列表效果 186
11.5.2　list-type-image屬性——自定義列表符號(hào) 187
實(shí)戰(zhàn)　使用自定義圖像作為列表符號(hào) 187
11.5.3　設(shè)置定義列表樣式 188
實(shí)戰(zhàn)　制作復(fù)雜的新聞列表 188
11.6　超鏈接CSS樣式偽類 189
11.6.1　:link偽類 189
11.6.2　:hover偽類 190
11.6.3　:active偽類 190
11.6.4　:visited偽類 190
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)中超鏈接文字效果 191
11.6.5　按鈕式超鏈接 193
實(shí)戰(zhàn)　制作網(wǎng)站導(dǎo)航菜單 193
11.7　cursor屬性——光標(biāo)指針效果 194
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中實(shí)現(xiàn)多種光標(biāo)指針效果 195
第12章  CSS3屬性詳解
12.1　了解CSS3 196
12.1.1　CSS3的發(fā)展 196
12.1.2　瀏覽器對(duì)CSS3的支持情況 196
12.1.3　了解CSS3的全新功能 197
12.2　CSS3新增選擇器 197
12.2.1　屬性選擇器 197
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中使用屬性選擇器 198
12.2.2　結(jié)構(gòu)偽類選擇器 199
12.2.3　UI元素狀態(tài)偽類選擇器 200
12.2.4　偽元素選擇器 200
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中使用偽元素選擇器 201
12.3　新增的顏色定義方法 202
12.3.1　RGBA顏色定義方法 202
實(shí)戰(zhàn)　使用RGBA方式設(shè)置半透明顏色 202
12.3.2　HSL顏色定義方法 203
12.3.3　HSLA顏色定義方法 203
實(shí)戰(zhàn)　使用HSL和HSLA方式定義網(wǎng)頁(yè)元素的背景顏色 203
12.4　新增的文字設(shè)置屬性 204
12.4.1　text-shadow屬性——文字陰影 204
實(shí)戰(zhàn)　為網(wǎng)頁(yè)文字添加陰影效果 205
12.4.2　text-overflow屬性——文本溢出 206
實(shí)戰(zhàn)　設(shè)置文字溢出處理方式 206
12.4.3　word-wrap屬性 207
實(shí)戰(zhàn)　設(shè)置長(zhǎng)文本內(nèi)容換行 207
12.4.4　word-break和word-space屬性 208
實(shí)戰(zhàn)　設(shè)置文字內(nèi)容換行處理方式 209
12.4.5　@font-face規(guī)則——嵌入Web字體 210
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中實(shí)現(xiàn)特殊字體效果 210
12.5　新增的背景設(shè)置屬性 212
12.5.1　background-size屬性——背景圖像大小 212
實(shí)戰(zhàn)　實(shí)現(xiàn)始終滿屏顯示的網(wǎng)頁(yè)背景 212
12.5.2　background-origin屬性——背景圖像原點(diǎn)位置 215
實(shí)戰(zhàn)　設(shè)置背景圖像顯示原點(diǎn)位置 215
12.5.3　background-clip屬性——背景圖像裁剪區(qū)域 216
實(shí)戰(zhàn)　設(shè)置元素背景圖像的顯示區(qū)域 217
12.5.4　background屬性——多背景圖像 217
實(shí)戰(zhàn)　為網(wǎng)頁(yè)設(shè)置多背景圖像效果 218
12.6　新增的邊框設(shè)置屬性 219
12.6.1　border-colors屬性——多種顏色邊框 219
實(shí)戰(zhàn)　實(shí)現(xiàn)多彩絢麗的邊框效果 219
12.6.2　border-radius屬性——圓角邊框 220
實(shí)戰(zhàn)　為網(wǎng)頁(yè)元素設(shè)置圓角效果 221
12.6.3　border-image屬性——圖像邊框 222
實(shí)戰(zhàn)　為網(wǎng)頁(yè)元素設(shè)置圖像邊框效果 222
12.6.4　box-shadow屬性——元素陰影 223
實(shí)戰(zhàn)　為網(wǎng)頁(yè)元素添加陰影效果 224
12.7　新增的多列布局屬性 225
12.7.1　columns屬性——多列布局 225
實(shí)戰(zhàn)　快速對(duì)網(wǎng)頁(yè)內(nèi)容分列 225
12.7.2　column-width屬性——列寬度 226
12.7.3　column-count屬性——列數(shù) 226
12.7.4　column-gap屬性——列間距 227
12.7.5　column-rule屬性——列分隔線 227
12.7.6　column-span屬性——橫跨列 228
實(shí)戰(zhàn) 　設(shè)置網(wǎng)頁(yè)內(nèi)容的分列布局效果 228
12.8　新增的盒模型設(shè)置屬性 230
12.8.1　opacity屬性——元素不透明度 230
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)元素的不透明度 230
12.8.2　overflow-x和overflow-y屬性——溢出內(nèi)容處理方式 231
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)元素內(nèi)容溢出的處理方式 232
12.8.3　resize屬性——自由縮放 233
實(shí)戰(zhàn)　實(shí)現(xiàn)網(wǎng)頁(yè)元素尺寸任意拖動(dòng)縮放 233
12.8.4　outline屬性——輪廓外邊框 234
實(shí)戰(zhàn)　為網(wǎng)頁(yè)元素添加輪廓外邊框效果 235
12.8.5　content屬性——賦予內(nèi)容 236
實(shí)戰(zhàn)　為網(wǎng)頁(yè)元素賦予文字內(nèi)容 237
第13章  使用CSS3實(shí)現(xiàn)動(dòng)畫效果
13.1　實(shí)現(xiàn)元素變形 238
13.1.1　transform屬性 238
13.1.2　使用rotate( )函數(shù)實(shí)現(xiàn)元素旋轉(zhuǎn) 238
實(shí)戰(zhàn)　實(shí)現(xiàn)網(wǎng)頁(yè)元素的旋轉(zhuǎn)變形效果 239
13.1.3　使用scale( )函數(shù)實(shí)現(xiàn)元素縮放和翻轉(zhuǎn)變形 239
實(shí)戰(zhàn)　實(shí)現(xiàn)網(wǎng)頁(yè)元素的縮放和翻轉(zhuǎn)效果 240
13.1.4　使用translate( )函數(shù)實(shí)現(xiàn)元素移動(dòng) 240
實(shí)戰(zhàn)　實(shí)現(xiàn)網(wǎng)頁(yè)元素的移動(dòng)效果 241
13.1.5　使用skew( )函數(shù)實(shí)現(xiàn)元素傾斜 241
實(shí)戰(zhàn)　實(shí)現(xiàn)網(wǎng)頁(yè)元素的傾斜效果 242
13.1.6　使用matrix( )函數(shù)實(shí)現(xiàn)元素矩陣變形 242
實(shí)戰(zhàn)　實(shí)現(xiàn)網(wǎng)頁(yè)元素的矩陣變形效果 243
13.1.7　定義變形中心點(diǎn) 244
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)元素的變形中心點(diǎn)位置 244
13.1.8　同時(shí)使用多個(gè)變形函數(shù) 245
實(shí)戰(zhàn)　為網(wǎng)頁(yè)元素同時(shí)應(yīng)用多種變形效果 245
13.2　CSS3實(shí)現(xiàn)過(guò)渡動(dòng)畫效果 246
13.2.1　transition屬性 246
13.2.2　transition-property屬性——實(shí)現(xiàn)過(guò)渡效果 247
實(shí)戰(zhàn)　制作網(wǎng)頁(yè)元素旋轉(zhuǎn)并放大動(dòng)畫效果 247
13.2.3　transition-duration屬性——設(shè)置過(guò)渡時(shí)間 248
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)元素變形動(dòng)畫持續(xù)時(shí)間 248
13.2.4　transition-delay屬性——實(shí)現(xiàn)過(guò)渡延遲效果 249
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)元素變形動(dòng)畫延遲時(shí)間 249
13.2.5　transition-timing-function屬性——設(shè)置過(guò)渡方式 250
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)元素變形動(dòng)畫過(guò)渡方式 251
第14章  JavaScript基礎(chǔ)
14.1　了解JavaScript 252
14.1.1　JavaScript概述 252
14.1.2　JavaScript在網(wǎng)頁(yè)中的作用 252
14.1.3　如何在網(wǎng)頁(yè)中應(yīng)用JavaScript 253
實(shí)戰(zhàn) 　編寫一個(gè)簡(jiǎn)單的JavaScript腳本 253
14.2　JavaScript語(yǔ)法基礎(chǔ) 254
14.2.1　JavaScript代碼格式 254
14.2.2