目錄
任務(wù)1 搭建Web前端開(kāi)發(fā)環(huán)境... 13
1.1 任務(wù)導(dǎo)入... 13
1.2 任務(wù)目標(biāo)... 13
1.3 核心知識(shí)... 13
1.3.1 網(wǎng)頁(yè)訪(fǎng)問(wèn)機(jī)制... 13
1.3.2 瀏覽器市場(chǎng)份額... 14
1.3.3 瀏覽器內(nèi)核及渲染過(guò)程... 15
1.3.4 PHP
Web服務(wù)器組件... 16
1.3.5 Web服務(wù)器啟動(dòng)失敗原因分析... 16
1.3.6 移動(dòng)前端開(kāi)發(fā)環(huán)境網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)... 17
1.3.7
WebStorm優(yōu)勢(shì)... 17
1.3.8 EMMET語(yǔ)法... 17
1.4 任務(wù)實(shí)施... 18
1.4.1 操作系統(tǒng)版本及位數(shù)識(shí)別... 18
1.4.2
Chrome瀏覽器... 19
1.4.3 搭建Web服務(wù)器... 22
1.4.4
WebStorm.. 26
1.4.5 移動(dòng)端測(cè)試環(huán)境... 32
1.5 強(qiáng)化訓(xùn)練... 33
任務(wù)2 編寫(xiě)網(wǎng)頁(yè)模板... 34
2.1 任務(wù)導(dǎo)入... 34
2.2 任務(wù)目標(biāo)... 34
2.3 核心知識(shí)... 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（文檔類(lèi)型）... 45
2.3.9 meta. 45
2.3.10
favicon. 46
2.3.11 CSS概述... 46
2.3.12 CSS 語(yǔ)法... 47
2.3.13 CSS存在方式... 47
2.3.14 CSS繼承與優(yōu)先級(jí)規(guī)則... 49
2.3.15 CSS3新增功能... 49
2.3.16 CSS3選擇器類(lèi)型... 50
2.3.17 鏈接JS. 52
2.3.18 HTML頁(yè)面模板... 53
2.4 任務(wù)實(shí)施... 53
2.4.1 建立項(xiàng)目... 53
2.4.2 編寫(xiě)HTML文件... 54
2.4.3 編寫(xiě)CSS樣式... 56
2.4.4 編寫(xiě)JS腳本... 60
2.4.5 瀏覽器測(cè)試... 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 核心知識(shí)... 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 文本對(duì)齊text-align. 80
3.3.22 垂直對(duì)齊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 編寫(xiě)HTML文件... 87
3.4.3 編寫(xiě)CSS樣式... 88
3.4.4 瀏覽器測(cè)試... 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 核心知識(shí)... 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 編寫(xiě)HTML文件... 97
4.4.3 編寫(xiě)CSS樣式... 97
4.4.4 瀏覽器測(cè)試... 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 核心知識(shí)... 101
5.3.1 圖片來(lái)源... 101
5.3.2 圖像質(zhì)量評(píng)價(jià)... 101
5.3.3 img標(biāo)記... 103
5.3.4 網(wǎng)頁(yè)圖片4大格式... 103
5.3.5
figure與figcaption. 105
5.3.6 CSS控制圖片大小... 106
5.3.7 CSS圖片左右對(duì)齊... 106
5.3.8 CSS圖片居中對(duì)齊... 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 編寫(xiě)HTML文件... 113
5.4.3 編寫(xiě)CSS樣式... 114
5.4.4 瀏覽器測(cè)試... 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 核心知識(shí)... 119
6.3.1 HTML列表類(lèi)型... 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 自定義列表符號(hào)... 123
6.4 任務(wù)實(shí)施... 124
6.4.1 建立項(xiàng)目... 124
6.4.2 編寫(xiě)HTML文件... 125
6.4.3 編寫(xiě)CSS樣式... 127
6.4.4 瀏覽器測(cè)試... 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 核心知識(shí)... 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 表格對(duì)齊... 136
7.3.8 條紋表格... 136
7.3.9 懸停表格... 136
7.4 任務(wù)實(shí)施... 137
7.4.1 建立項(xiàng)目... 137
7.4.2 編寫(xiě)HTML文件... 137
7.4.3 編寫(xiě)CSS樣式... 138
7.4.4 瀏覽器測(cè)試... 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 核心知識(shí)... 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 編寫(xiě)HTML文件... 149
8.4.3 編寫(xiě)CSS樣式... 151
8.4.4 編寫(xiě)JS腳本... 155
8.4.5 瀏覽器測(cè)試... 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 核心知識(shí)... 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 編寫(xiě)HTML文件... 167
9.4.3 編寫(xiě)CSS樣式... 168
9.4.4 瀏覽器測(cè)試... 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 核心知識(shí)... 172
10.3.1 選項(xiàng)卡HTML模型... 172
10.3.2 重置無(wú)序列表ul屬性... 173
10.3.3 浮動(dòng)定位float 173
10.3.4 絕對(duì)定位absolute. 173
10.3.5 選項(xiàng)卡切換原理... 174
10.4 任務(wù)實(shí)施... 174
10.4.1 建立項(xiàng)目... 174
10.4.2 編寫(xiě)HTML文件... 175
10.4.3 編寫(xiě)CSS樣式... 177
10.4.4 編寫(xiě)JS腳本... 179
10.4.5 瀏覽器測(cè)試... 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 核心知識(shí)... 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 編寫(xiě)HTML文件... 184
11.4.3 編寫(xiě)CSS樣式... 186
11.4.4 編寫(xiě)JS腳本... 188
11.4.5 瀏覽器測(cè)試... 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 核心知識(shí)... 191
12.3.1 全局導(dǎo)航... 191
12.3.2 多級(jí)下拉菜單結(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 絕對(duì)地址和相對(duì)地址... 198
12.3.10 鏈接目標(biāo)target 199
12.4 任務(wù)實(shí)施... 199
12.4.1 建立項(xiàng)目... 199
12.4.2 編寫(xiě)HTML文件... 200
12.4.3 編寫(xiě)CSS樣式... 202
12.4.4 瀏覽器測(cè)試... 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 核心知識(shí)... 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 顯示類(lèi)型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 編寫(xiě)HTML文件... 223
13.4.3 編寫(xiě)CSS樣式... 225
13.4.4 瀏覽器測(cè)試... 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 核心知識(shí)... 228
14.3.1 固定寬度布局... 228
14.3.2 流式布局... 229
14.4 任務(wù)實(shí)施... 229
14.4.1 建立項(xiàng)目... 229
14.4.2 編寫(xiě)HTML文件... 230
14.4.3 編寫(xiě)CSS樣式... 232
14.4.4 瀏覽器測(cè)試... 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 核心知識(shí)... 235
15.3.1 彈性布局... 235
15.3.2 彈性布局存在的問(wèn)題... 235
15.4 任務(wù)實(shí)施... 235
15.4.1 建立項(xiàng)目... 235
15.4.2 編寫(xiě)HTML文件... 235
15.4.3 編寫(xiě)CSS樣式... 237
15.4.4 瀏覽器測(cè)試... 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 核心知識(shí)... 241
16.3.1 定位（positioning）... 241
16.3.2 相對(duì)定位relative. 241
16.3.3 絕對(duì)定位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 編寫(xiě)HTML文件... 244
16.4.3 編寫(xiě)CSS樣式... 247
16.4.4 瀏覽器測(cè)試... 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 核心知識(shí)... 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 編寫(xiě)HTML文件... 254
17.4.3 編寫(xiě)CSS樣式... 255
17.4.4 瀏覽器測(cè)試... 257
17.5 強(qiáng)化訓(xùn)練... 257
任務(wù)18 響應(yīng)式頁(yè)面排版... 258
18.1 任務(wù)導(dǎo)入... 258
18.2 任務(wù)目標(biāo)... 258
18.3 核心知識(shí)... 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 編寫(xiě)HTML文件... 264
18.4.3 編寫(xiě)CSS樣式... 266
18.4.4 瀏覽器測(cè)試... 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 核心知識(shí)... 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媒體查詢(xún)... 276
19.4 任務(wù)實(shí)施... 277
19.4.1 下載BootStrap. 277
19.4.2 建立項(xiàng)目... 279
19.4.3 編寫(xiě)HTML文件... 279
19.4.4 編寫(xiě)CSS樣式... 284
19.4.5 瀏覽器測(cè)試... 286
19.5 強(qiáng)化訓(xùn)練... 286
書(shū)單推薦
