目錄
任務(wù)1 搭建Web前端開發(fā)環(huán)境... 13
1.1 任務(wù)導(dǎo)入... 13
1.2 任務(wù)目標(biāo)... 13
1.3 核心知識... 13
1.3.1 網(wǎng)頁訪問機(jī)制... 13
1.3.2 瀏覽器市場份額... 14
1.3.3 瀏覽器內(nèi)核及渲染過程... 15
1.3.4 PHP
Web服務(wù)器組件... 16
1.3.5 Web服務(wù)器啟動(dòng)失敗原因分析... 16
1.3.6 移動(dòng)前端開發(fā)環(huán)境網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)... 17
1.3.7
WebStorm優(yōu)勢... 17
1.3.8 EMMET語法... 17
1.4 任務(wù)實(shí)施... 18
1.4.1 操作系統(tǒng)版本及位數(shù)識別... 18
1.4.2
Chrome瀏覽器... 19
1.4.3 搭建Web服務(wù)器... 22
1.4.4
WebStorm.. 26
1.4.5 移動(dòng)端測試環(huán)境... 32
1.5 強(qiáng)化訓(xùn)練... 33
任務(wù)2 編寫網(wǎng)頁模板... 34
2.1 任務(wù)導(dǎo)入... 34
2.2 任務(wù)目標(biāo)... 34
2.3 核心知識... 35
2.3.1 Web標(biāo)準(zhǔn)... 35
2.3.2 Web項(xiàng)目結(jié)構(gòu)... 35
2.3.3 通用規(guī)范... 36
2.3.4 HTML規(guī)范... 37
2.3.5 CSS命名規(guī)范... 39
2.3.6 JS規(guī)范... 44
2.3.7 圖像規(guī)范... 45
2.3.8
DOCTYPE（文檔類型）... 45
2.3.9 meta. 45
2.3.10
favicon. 46
2.3.11 CSS概述... 46
2.3.12 CSS 語法... 47
2.3.13 CSS存在方式... 47
2.3.14 CSS繼承與優(yōu)先級規(guī)則... 49
2.3.15 CSS3新增功能... 49
2.3.16 CSS3選擇器類型... 50
2.3.17 鏈接JS. 52
2.3.18 HTML頁面模板... 53
2.4 任務(wù)實(shí)施... 53
2.4.1 建立項(xiàng)目... 53
2.4.2 編寫HTML文件... 54
2.4.3 編寫CSS樣式... 56
2.4.4 編寫JS腳本... 60
2.4.5 瀏覽器測試... 61
2.5 強(qiáng)化訓(xùn)練... 62
任務(wù)3 文本排版... 63
3.1 任務(wù)導(dǎo)入... 63
3.2 任務(wù)目標(biāo)... 63
3.3 核心知識... 64
3.3.1 元素默認(rèn)樣式屬性值... 64
3.3.2 瀏覽器默認(rèn)樣式... 65
3.3.3 字體屬性... 66
3.3.4 字族font-family. 66
3.3.5 字體大小font-size. 69
3.3.6 字體變形font-variant 71
3.3.7 字體樣式font-style. 71
3.3.8 字體粗細(xì)font-weight 71
3.3.9 字體屬性font 72
3.3.10 文本屬性text 74
3.3.11 文本顏色color 75
3.3.12 顏色模式... 75
3.3.13 上標(biāo)(sup)下標(biāo)(sub) 77
3.3.14 文本效果text-decoration. 77
3.3.15 字母間距l(xiāng)etter-spacing. 77
3.3.16 單詞間距word-spacing. 77
3.3.17 空白white-space. 78
3.3.18 文本換行word-wrap. 78
3.3.19 文本換行word-break. 79
3.3.20 文本縮進(jìn)text-indent 79
3.3.21 文本對齊text-align. 80
3.3.22 垂直對齊vertical-align. 80
3.3.23 文本陰影text-shadow.. 81
3.3.24 溢出文本text-overflow.. 83
3.3.25 文字方向direction. 84
3.3.26 行高line-height 84
3.4 任務(wù)實(shí)施... 87
3.4.1 建立項(xiàng)目... 87
3.4.2 編寫HTML文件... 87
3.4.3 編寫CSS樣式... 88
3.4.4 瀏覽器測試... 90
3.5 強(qiáng)化訓(xùn)練... 90
任務(wù)4 Web字體圖標(biāo)... 90
4.1 任務(wù)導(dǎo)入... 90
4.2 任務(wù)目標(biāo)... 91
4.3 核心知識... 91
4.3.1
Sprite圖標(biāo)的缺陷... 91
4.3.2 字體圖標(biāo)... 92
4.3.3 Font
Awesome. 92
4.3.4
Glyphicons 93
4.3.5 CSS
content 屬性... 94
4.3.6 字體圖標(biāo)定義... 94
4.3.7 字體圖標(biāo)用法... 96
4.4 任務(wù)實(shí)施... 97
4.4.1 建立項(xiàng)目... 97
4.4.2 編寫HTML文件... 97
4.4.3 編寫CSS樣式... 97
4.4.4 瀏覽器測試... 99
4.5 強(qiáng)化訓(xùn)練... 99
任務(wù)5 圖片排版... 99
5.1 任務(wù)導(dǎo)入... 99
5.2 任務(wù)目標(biāo)... 100
5.3 核心知識... 101
5.3.1 圖片來源... 101
5.3.2 圖像質(zhì)量評價(jià)... 101
5.3.3 img標(biāo)記... 103
5.3.4 網(wǎng)頁圖片4大格式... 103
5.3.5
figure與figcaption. 105
5.3.6 CSS控制圖片大小... 106
5.3.7 CSS圖片左右對齊... 106
5.3.8 CSS圖片居中對齊... 106
5.3.9 CSS響應(yīng)式圖片... 106
5.3.10 CSS圖像風(fēng)格樣式... 107
5.3.11 疊加式圖片標(biāo)題排版... 107
5.3.12 CSS精靈圖... 109
5.3.13 圖片陰影（box-shadow）... 110
5.3.14 CSS3的圓角（border-radius）... 111
5.4 任務(wù)實(shí)施... 112
5.4.1 建立項(xiàng)目... 112
5.4.2 編寫HTML文件... 113
5.4.3 編寫CSS樣式... 114
5.4.4 瀏覽器測試... 117
5.5 強(qiáng)化訓(xùn)練... 117
任務(wù)6 列表排版... 118
6.1 任務(wù)導(dǎo)入... 118
6.2 任務(wù)目標(biāo)... 119
6.3 核心知識... 119
6.3.1 HTML列表類型... 119
6.3.2 嵌套列表... 120
6.3.3 列表HTML結(jié)構(gòu)... 120
6.3.4
list-style-type屬性... 121
6.3.5
list-style-image屬性... 122
6.3.6
list-style-position屬性... 122
6.3.7 列表默認(rèn)樣式... 122
6.3.8 自定義列表符號... 123
6.4 任務(wù)實(shí)施... 124
6.4.1 建立項(xiàng)目... 124
6.4.2 編寫HTML文件... 125
6.4.3 編寫CSS樣式... 127
6.4.4 瀏覽器測試... 128
6.5 強(qiáng)化訓(xùn)練... 128
任務(wù)7 表格排版... 129
7.1 任務(wù)導(dǎo)入... 129
7.2 任務(wù)目標(biāo)... 130
7.3 核心知識... 130
7.3.1 表格HTML結(jié)構(gòu)... 130
7.3.2 表格的層次結(jié)構(gòu)... 131
7.3.3 行合并和列合并... 132
7.3.4 表格刪除和隱藏... 133
7.3.5 邊框border 134
7.3.6 表格邊框合并與分離... 135
7.3.7 表格對齊... 136
7.3.8 條紋表格... 136
7.3.9 懸停表格... 136
7.4 任務(wù)實(shí)施... 137
7.4.1 建立項(xiàng)目... 137
7.4.2 編寫HTML文件... 137
7.4.3 編寫CSS樣式... 138
7.4.4 瀏覽器測試... 139
7.5 強(qiáng)化訓(xùn)練... 140
任務(wù)8 表單排版... 141
8.1 任務(wù)導(dǎo)入... 141
8.2 任務(wù)目標(biāo)... 141
8.3 核心知識... 142
8.3.1 表單工作原理... 142
8.3.2 form標(biāo)簽... 142
8.3.3 文本框（input）... 143
8.3.4 文本域（textarea）... 145
8.3.5 選擇框（select）... 145
8.3.6 按鈕... 146
8.3.7 HTML5表單結(jié)構(gòu)... 146
8.3.8 表單控件大小... 147
8.4 任務(wù)實(shí)施... 148
8.4.1 建立項(xiàng)目... 148
8.4.2 編寫HTML文件... 149
8.4.3 編寫CSS樣式... 151
8.4.4 編寫JS腳本... 155
8.4.5 瀏覽器測試... 156
8.5 強(qiáng)化訓(xùn)練... 158
任務(wù)9 按鈕... 158
9.1 任務(wù)導(dǎo)入... 158
9.2 任務(wù)目標(biāo)... 159
9.3 核心知識... 159
9.3.1
button標(biāo)簽與屬性... 159
9.3.2 按鈕基礎(chǔ)樣式... 160
9.3.3 原始按鈕外觀... 160
9.3.4 按鈕大小... 161
9.3.5 按鈕狀態(tài)... 162
9.3.6 CSS3 漸變Gradient 162
9.3.7 陰影box-shadow.. 166
9.3.8 圓角border-radius 166
9.4 任務(wù)實(shí)施... 167
9.4.1 建立項(xiàng)目... 167
9.4.2 編寫HTML文件... 167
9.4.3 編寫CSS樣式... 168
9.4.4 瀏覽器測試... 170
9.5 強(qiáng)化訓(xùn)練... 170
任務(wù)10 選項(xiàng)卡Tab. 171
10.1 任務(wù)導(dǎo)入... 171
10.2 任務(wù)目標(biāo)... 172
10.3 核心知識... 172
10.3.1 選項(xiàng)卡HTML模型... 172
10.3.2 重置無序列表ul屬性... 173
10.3.3 浮動(dòng)定位float 173
10.3.4 絕對定位absolute. 173
10.3.5 選項(xiàng)卡切換原理... 174
10.4 任務(wù)實(shí)施... 174
10.4.1 建立項(xiàng)目... 174
10.4.2 編寫HTML文件... 175
10.4.3 編寫CSS樣式... 177
10.4.4 編寫JS腳本... 179
10.4.5 瀏覽器測試... 179
10.5 強(qiáng)化訓(xùn)練... 180
任務(wù)11 輪播圖排版... 181
11.1 任務(wù)導(dǎo)入... 181
11.2 任務(wù)目標(biāo)... 182
11.3 核心知識... 182
11.3.1 輪播圖結(jié)構(gòu)模型... 182
11.3.2 輪播圖HTML結(jié)構(gòu)... 183
11.3.3 輪播的JS實(shí)現(xiàn)... 184
11.4 任務(wù)實(shí)施... 184
11.4.1 建立項(xiàng)目... 184
11.4.2 編寫HTML文件... 184
11.4.3 編寫CSS樣式... 186
11.4.4 編寫JS腳本... 188
11.4.5 瀏覽器測試... 190
11.5 強(qiáng)化訓(xùn)練... 190
任務(wù)12 下拉菜單... 190
12.1 任務(wù)導(dǎo)入... 190
12.2 任務(wù)目標(biāo)... 191
12.3 核心知識... 191
12.3.1 全局導(dǎo)航... 191
12.3.2 多級下拉菜單結(jié)構(gòu)... 191
12.3.3 導(dǎo)航菜單層次結(jié)構(gòu)... 192
12.3.4
inlinke-block. 193
12.3.5 元素垂直居中... 193
12.3.6
box-shadow的理解... 193
12.3.7 繪制三角形圖標(biāo)... 194
12.3.8 超鏈接... 196
12.3.9 絕對地址和相對地址... 198
12.3.10 鏈接目標(biāo)target 199
12.4 任務(wù)實(shí)施... 199
12.4.1 建立項(xiàng)目... 199
12.4.2 編寫HTML文件... 200
12.4.3 編寫CSS樣式... 202
12.4.4 瀏覽器測試... 208
12.5 強(qiáng)化訓(xùn)練... 209
任務(wù)13 浮動(dòng)布局... 209
13.1 任務(wù)導(dǎo)入... 209
13.2 任務(wù)目標(biāo)... 210
13.3 核心知識... 210
13.3.1 盒子模型... 210
13.3.2 內(nèi)邊距padding. 213
13.3.3 外邊距margin. 213
13.3.4 box-sizing. 216
13.3.5 顯示類型display. 216
13.3.6 div嵌套... 217
13.3.7 id與class 217
13.3.8 標(biāo)準(zhǔn)文檔流... 218
13.3.9 浮動(dòng)float 218
13.3.10 清除clear 220
13.3.11 溢出（overflow）... 222
13.3.12
iframe(內(nèi)聯(lián)框架) 222
13.4 任務(wù)實(shí)施... 223
13.4.1 建立項(xiàng)目... 223
13.4.2 編寫HTML文件... 223
13.4.3 編寫CSS樣式... 225
13.4.4 瀏覽器測試... 226
13.5 強(qiáng)化訓(xùn)練... 227
任務(wù)14 流式布局... 227
14.1 任務(wù)導(dǎo)入... 227
14.2 任務(wù)目標(biāo)... 228
14.3 核心知識... 228
14.3.1 固定寬度布局... 228
14.3.2 流式布局... 229
14.4 任務(wù)實(shí)施... 229
14.4.1 建立項(xiàng)目... 229
14.4.2 編寫HTML文件... 230
14.4.3 編寫CSS樣式... 232
14.4.4 瀏覽器測試... 233
14.5 強(qiáng)化訓(xùn)練... 234
任務(wù)15 彈性布局... 234
15.1 任務(wù)導(dǎo)入... 234
15.2 任務(wù)目標(biāo)... 234
15.3 核心知識... 235
15.3.1 彈性布局... 235
15.3.2 彈性布局存在的問題... 235
15.4 任務(wù)實(shí)施... 235
15.4.1 建立項(xiàng)目... 235
15.4.2 編寫HTML文件... 235
15.4.3 編寫CSS樣式... 237
15.4.4 瀏覽器測試... 238
15.5 強(qiáng)化訓(xùn)練... 239
任務(wù)16 定位布局... 240
16.1 任務(wù)導(dǎo)入... 240
16.2 任務(wù)目標(biāo)... 240
16.3 核心知識... 241
16.3.1 定位（positioning）... 241
16.3.2 相對定位relative. 241
16.3.3 絕對定位absolute. 241
16.3.4 固定定位fixed. 242
16.3.5
z-index深度... 242
16.3.6 包含塊... 243
16.4 任務(wù)實(shí)施... 243
16.4.1 建立項(xiàng)目... 243
16.4.2 編寫HTML文件... 244
16.4.3 編寫CSS樣式... 247
16.4.4 瀏覽器測試... 249
16.5 強(qiáng)化訓(xùn)練... 249
任務(wù)17 CSS3多列布局... 249
17.1 任務(wù)導(dǎo)入... 249
17.2 任務(wù)目標(biāo)... 250
17.3 核心知識... 251
17.3.1 多列布局原理... 251
17.3.2
columns屬性... 251
17.3.3 列寬度column-width. 251
17.3.4 列數(shù)column-count 251
17.3.5 列間距column-gap. 252
17.3.6
column-rule. 252
17.3.7
column-span. 252
17.3.8 瀏覽器前綴... 253
17.4 任務(wù)實(shí)施... 253
17.4.1 建立項(xiàng)目... 253
17.4.2 編寫HTML文件... 254
17.4.3 編寫CSS樣式... 255
17.4.4 瀏覽器測試... 257
17.5 強(qiáng)化訓(xùn)練... 257
任務(wù)18 響應(yīng)式頁面排版... 258
18.1 任務(wù)導(dǎo)入... 258
18.2 任務(wù)目標(biāo)... 258
18.3 核心知識... 258
18.3.1 響應(yīng)式布局概述... 258
18.3.2 響應(yīng)式布局關(guān)鍵技術(shù)... 259
18.3.3 響應(yīng)式布局技巧... 262
18.3.4 Viewport定義... 263
18.3.5 響應(yīng)式設(shè)計(jì)流程... 263
18.4 任務(wù)實(shí)施... 264
18.4.1 建立項(xiàng)目... 264
18.4.2 編寫HTML文件... 264
18.4.3 編寫CSS樣式... 266
18.4.4 瀏覽器測試... 271
18.5 強(qiáng)化訓(xùn)練... 272
任務(wù)19 前端框架BootStrap. 273
19.1 任務(wù)導(dǎo)入... 273
19.2 任務(wù)目標(biāo)... 273
19.3 核心知識... 274
19.3.1
jQuery. 274
19.3.2
Bootstrap. 274
19.3.3 CDN.. 274
19.3.4
Bootstrap網(wǎng)絡(luò)系統(tǒng)... 275
19.3.5
Bootstrap媒體查詢... 276
19.4 任務(wù)實(shí)施... 277
19.4.1 下載BootStrap. 277
19.4.2 建立項(xiàng)目... 279
19.4.3 編寫HTML文件... 279
19.4.4 編寫CSS樣式... 284
19.4.5 瀏覽器測試... 286
19.5 強(qiáng)化訓(xùn)練... 286
書單推薦
