HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)經(jīng)典課堂

目錄
Chapter / 01
HTML5 入門(mén)
1.1 認(rèn)識(shí)HTML5        2
1.1.1 HTML 發(fā)展歷程        2
1.1.2 HTML5 和H5 的區(qū)別        2
1.2 新的特性         3
1.2.1 兼容性          3
1.2.2 化繁為簡(jiǎn)         3
1.2.3 通用訪問(wèn)         4
1.2.4 標(biāo)準(zhǔn)改進(jìn)         4
1.3 為何使用HTML5        4
1.3.1 頁(yè)面的交互性能更強(qiáng)大       5
1.3.2 字符集和DO CTYPE 的改進(jìn)       6
1.3.3 HTML5 的優(yōu)勢(shì)        6
1.4 元素的分類(lèi)        8
1.4.1 結(jié)構(gòu)性元素          8
1.4.2 級(jí)塊性元素          9
1.4.3 行內(nèi)語(yǔ)義性元素        9
1.4.4 交互性元素          9
1.5 新增元素        10
1.6 新增屬性        16
1.6.1 表單相關(guān)屬性        16
1.6.2 其他相關(guān)屬性        16
1.7 課堂練習(xí)        17
強(qiáng)化訓(xùn)練         18
Chapter / 02
在頁(yè)面中繪圖
2.1 canvas 入門(mén)       20
2.1.1 canvas 含義        20
2.1.2 canvas 坐標(biāo)        20
2.2 使用canvas       21
2.2.1 在頁(yè)面中加入canvas        21
2.2.2 繪制矩形和五角形       22
2.2.3 檢測(cè)瀏覽器是否支持        25
2.3 繪制曲線路徑        26
2.3.1 繪制路徑的方法         26
2.3.2 描邊樣式的使用        27
2.3.3 填充和曲線的繪制方法       28
2.4 繪制圖像        30
2.4.1 使用canvas 插入圖片        30
2.4.2 漸變顏色的使用        31
2.4.3 變形圖形的設(shè)置方法        33
2.4.4 組合圖形的繪制方法        34
2.4.5 使用canvas 繪制文字        35
2.5 課堂練習(xí)        37
強(qiáng)化訓(xùn)練         39
Chapter / 03
制作新型的表單
3.1 新的表單元素        42
3.1.1 datalist 元素        42
3.1.2 keygen 元素        42
3.1.3 output 元素        43
3.2 新的表單屬性        44
3.2.1 form 屬性         44
3.2.2 formaction 屬性         45
3.2.3 placeholder 屬性        45
3.2.4 list 屬性          46
3.2.5 min 和max 屬性        46
3.2.6 novalidate 屬性         47
3.2.7 multiple 屬性        47
3.2.8 step 屬性         48
3.3 表單的輸入型控件      48
3.3.1 Input 類(lèi)型E-mail        48
3.3.2 Input 類(lèi)型url        49
3.3.3 Input 類(lèi)型number       49
3.3.4 Input 類(lèi)型range        50
3.3.5 Input 類(lèi)型Date Pickers       50
3.3.6 Input 類(lèi)型color         51
3.4 制作一個(gè)表單        52
3.5 課堂練習(xí)        54
強(qiáng)化訓(xùn)練         56
Chapter / 04
地理位置請(qǐng)求
4.1 關(guān)于地理位置信息      58
4.1.1 經(jīng)度和緯度坐標(biāo)         58
4.1.2 IP 地址定位數(shù)據(jù)        58
4.1.3 GPS 和Wi-Fi 地理定位數(shù)據(jù)      58
4.1.4 用戶(hù)自定義的地理定位        59
4.2 瀏覽器對(duì)Geolocation 的支持     59
Contents
Contents
4.2.1 GeolocationAPI 概述       59
4.2.2 Geolocation 的瀏覽器支持情況      62
4.3 隱私處理        62
4.3.1 應(yīng)用隱私保護(hù)機(jī)制        62
4.3.2 處理位置信息         62
4.4 使用Geolocation API       63
4.4.1 檢測(cè)瀏覽器是否支持       63
4.4.2 位置請(qǐng)求         64
4.5 在地圖上顯示位置      66
4.6 課堂練習(xí)        69
強(qiáng)化訓(xùn)練         71
Chapter / 05
拖曳上傳的應(yīng)用
5.1 拖放API        74
5.1.1 實(shí)現(xiàn)拖放API 的過(guò)程       74
5.1.2 dataTransfer 對(duì)象的屬性與方法      74
5.2 拖放API 的應(yīng)用       75
5.2.1 拖放應(yīng)用          75
5.2.2 拖放列表         76
5.3 課堂練習(xí)        78
強(qiáng)化訓(xùn)練         80
Chapter / 06
CSS3 選擇器
6.1 CSS 選擇器       82
6.1.1 三大基礎(chǔ)選擇器         82
6.1.2 集體選擇器         85
6.1.3 屬性選擇器         86
6.2 CSS3 入門(mén)        88
6.2.1 CSS3 與之前版本的異同點(diǎn)      88
6.2.2 CSS3 新增的長(zhǎng)度單位       88
6.2.3 CSS3 新增結(jié)構(gòu)性偽類(lèi)       90
6.2.4 CSS3 新增UI 元素狀態(tài)偽類(lèi)      95
6.2.5 CSS3 新增屬性        97
6.3 課堂練習(xí)        101
強(qiáng)化訓(xùn)練         102
Chapter / 07
CSS3 設(shè)計(jì)動(dòng)畫(huà)
7.1 過(guò)渡基礎(chǔ)        104 Contents
7.1.1 過(guò)渡屬性          104
7.1.2 瀏覽器支持情況         104
7.2 實(shí)現(xiàn)過(guò)渡        105
7.2.1 單項(xiàng)屬性過(guò)渡        105
7.2.2 多項(xiàng)屬性過(guò)渡         105
7.2.3 利用過(guò)渡設(shè)計(jì)電腦桌面       107
7.3 實(shí)現(xiàn)動(dòng)畫(huà)        108
7.3.1 瀏覽器支持情況         108
7.3.2 動(dòng)畫(huà)屬性         109
7.3.3 實(shí)現(xiàn)動(dòng)畫(huà)效果         111
7.4 課堂練習(xí)        112
強(qiáng)化訓(xùn)練         114
Chapter / 08
多彩的樣式設(shè)計(jì)
8.1 設(shè)置多彩的文本樣式       116
8.1.1 設(shè)置文本陰影        116
8.1.2 設(shè)置文本溢出        124
8.1.3 給文本換行         125
8.1.4 把單詞拆分         127
8.1.5 設(shè)置圓角邊框        128
8.1.6 設(shè)置盒子陰影        128
8.2 頁(yè)面中多彩顏色的設(shè)置      130
8.2.1 使用HSL 顏色值        130
8.2.2 使用HSLA 顏色值        134
8.3 課堂練習(xí)        135
強(qiáng)化訓(xùn)練         137
Chapter / 09
CSS3 用戶(hù)的交互界面
9.1 自適應(yīng)顯示效果       140
9.1.1 多媒體查詢(xún)語(yǔ)法         140
9.1.2 多媒體查詢(xún)方法         140
9.1.3 自適應(yīng)的導(dǎo)航欄         142
9.2 用戶(hù)界面簡(jiǎn)介        146
9.2.1 讓用戶(hù)自調(diào)尺寸         146
9.2.2 調(diào)整方框的大小        147
9.2.3 修飾外形輪廓樣式       150
9.2.4 界面的多列布局        151
9.3 課堂練習(xí)        153
強(qiáng)化訓(xùn)練         154
Chapter / 10
彈性盒子模型
10.1 盒子模型       156
10.1.1 盒子簡(jiǎn)介         156
10.1.2 外邊距設(shè)置        156
10.1.3 外邊距合并        158
10.1.4 內(nèi)邊距設(shè)置        161
10.2 彈性盒子       161
10.2.1 彈性盒子基礎(chǔ)         161
10.2.2 對(duì)父級(jí)容器的設(shè)置       162
10.2.3 對(duì)子級(jí)內(nèi)容的設(shè)置       170
10.3 課堂練習(xí)       174
強(qiáng)化訓(xùn)練         176
Chapter / 11
顏色漸變和圖形轉(zhuǎn)換
11.1 漸變         178
11.1.1 瀏覽器支持        178
11.1.2 線性漸變         179
11.1.3 徑向漸變         180
11.2 2D 轉(zhuǎn)換        181
11.2.1 移動(dòng)translate()        181
11.2.2 旋轉(zhuǎn)rotate()        182
11.2.3 縮放scale()        183
11.2.4 傾斜skew()        185
11.3 3D 轉(zhuǎn)換        186
11.3.1 rotateX() 方法         186
11.3.2 rotateY() 方法         188
11.3.3 轉(zhuǎn)換屬性         188
11.3.4 3D 轉(zhuǎn)換方法        192
11.4 課堂練習(xí)       192
強(qiáng)化訓(xùn)練         194
Chapter / 12
JavaScript 入門(mén)必學(xué)
12.1 JavaScript 入門(mén)       196
12.1.1 JavaScript 的發(fā)展       196
12.1.2 JavaScript 的特點(diǎn)       196
12.1.3 JavaScript 應(yīng)用方向        197
12.1.4 JavaScript 的用法       197
12.2 JavaScript 的基本語(yǔ)法      199
12.2.1 數(shù)據(jù)類(lèi)型        200
12.2.2 常量和變量         202
12.2.3 運(yùn)算符和表達(dá)式       203
12.2.4 基本語(yǔ)句        209
12.3 JavaScript 事件分析       213
12.3.1 事件類(lèi)型         214
12.3.2 事件句柄         217
12.3.3 事件處理         218 Contents
12.4 課堂練習(xí)       219
強(qiáng)化訓(xùn)練         220
Chapter / 13
特效應(yīng)用
13.1 JavaScript 函數(shù)       222
13.1.1 JavaScript 函數(shù)定義       222
13.1.2 JavaScript 函數(shù)參數(shù)       224
13.1.3 JavaScript 函數(shù)調(diào)用方法       227
13.2 JavaScript 應(yīng)用表單       228
13.2.1 按鈕對(duì)象        228
13.2.2 復(fù)選框?qū)ο?nbsp;        229
13.2.3 列表框?qū)ο?nbsp;        230
13.3 JavaScript 事件分析       231
13.3.1 輪播圖效果        231
13.3.2 字體閃爍效果        235
13.3.3 鼠標(biāo)滑過(guò)效果        235
13.4 JavaScript 特效制作       237
13.4.1 顯示網(wǎng)頁(yè)停留時(shí)間        237
13.4.2 制作定時(shí)關(guān)閉窗口        238
13.5 課堂練習(xí)       239
強(qiáng)化訓(xùn)練         240
Chapter / 14
綜合實(shí)踐應(yīng)用
14.1 制作一顆流星       242
14.1.1 分析流星的尾部       242
14.1.2 繪制一顆流行        242
14.2 制作一場(chǎng)流星雨      244
14.2.1 制作流星星         244
14.2.2 鼠標(biāo)移動(dòng)的效果       246
參考文獻(xiàn)         251