目錄
任務1 搭建Web前端開發(fā)環(huán)境... 13
1.1 任務導入... 13
1.2 任務目標... 13
1.3 核心知識... 13
1.3.1 網(wǎng)頁訪問機制... 13
1.3.2 瀏覽器市場份額... 14
1.3.3 瀏覽器內(nèi)核及渲染過程... 15
1.3.4 PHP
Web服務器組件... 16
1.3.5 Web服務器啟動失敗原因分析... 16
1.3.6 移動前端開發(fā)環(huán)境網(wǎng)絡拓撲結(jié)構(gòu)... 17
1.3.7
WebStorm優(yōu)勢... 17
1.3.8 EMMET語法... 17
1.4 任務實施... 18
1.4.1 操作系統(tǒng)版本及位數(shù)識別... 18
1.4.2
Chrome瀏覽器... 19
1.4.3 搭建Web服務器... 22
1.4.4
WebStorm.. 26
1.4.5 移動端測試環(huán)境... 32
1.5 強化訓練... 33
任務2 編寫網(wǎng)頁模板... 34
2.1 任務導入... 34
2.2 任務目標... 34
2.3 核心知識... 35
2.3.1 Web標準... 35
2.3.2 Web項目結(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 任務實施... 53
2.4.1 建立項目... 53
2.4.2 編寫HTML文件... 54
2.4.3 編寫CSS樣式... 56
2.4.4 編寫JS腳本... 60
2.4.5 瀏覽器測試... 61
2.5 強化訓練... 62
任務3 文本排版... 63
3.1 任務導入... 63
3.2 任務目標... 63
3.3 核心知識... 64
3.3.1 元素默認樣式屬性值... 64
3.3.2 瀏覽器默認樣式... 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 字體粗細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 上標(sup)下標(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 文本縮進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 任務實施... 87
3.4.1 建立項目... 87
3.4.2 編寫HTML文件... 87
3.4.3 編寫CSS樣式... 88
3.4.4 瀏覽器測試... 90
3.5 強化訓練... 90
任務4 Web字體圖標... 90
4.1 任務導入... 90
4.2 任務目標... 91
4.3 核心知識... 91
4.3.1
Sprite圖標的缺陷... 91
4.3.2 字體圖標... 92
4.3.3 Font
Awesome. 92
4.3.4
Glyphicons 93
4.3.5 CSS
content 屬性... 94
4.3.6 字體圖標定義... 94
4.3.7 字體圖標用法... 96
4.4 任務實施... 97
4.4.1 建立項目... 97
4.4.2 編寫HTML文件... 97
4.4.3 編寫CSS樣式... 97
4.4.4 瀏覽器測試... 99
4.5 強化訓練... 99
任務5 圖片排版... 99
5.1 任務導入... 99
5.2 任務目標... 100
5.3 核心知識... 101
5.3.1 圖片來源... 101
5.3.2 圖像質(zhì)量評價... 101
5.3.3 img標記... 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響應式圖片... 106
5.3.10 CSS圖像風格樣式... 107
5.3.11 疊加式圖片標題排版... 107
5.3.12 CSS精靈圖... 109
5.3.13 圖片陰影（box-shadow）... 110
5.3.14 CSS3的圓角（border-radius）... 111
5.4 任務實施... 112
5.4.1 建立項目... 112
5.4.2 編寫HTML文件... 113
5.4.3 編寫CSS樣式... 114
5.4.4 瀏覽器測試... 117
5.5 強化訓練... 117
任務6 列表排版... 118
6.1 任務導入... 118
6.2 任務目標... 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 列表默認樣式... 122
6.3.8 自定義列表符號... 123
6.4 任務實施... 124
6.4.1 建立項目... 124
6.4.2 編寫HTML文件... 125
6.4.3 編寫CSS樣式... 127
6.4.4 瀏覽器測試... 128
6.5 強化訓練... 128
任務7 表格排版... 129
7.1 任務導入... 129
7.2 任務目標... 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 任務實施... 137
7.4.1 建立項目... 137
7.4.2 編寫HTML文件... 137
7.4.3 編寫CSS樣式... 138
7.4.4 瀏覽器測試... 139
7.5 強化訓練... 140
任務8 表單排版... 141
8.1 任務導入... 141
8.2 任務目標... 141
8.3 核心知識... 142
8.3.1 表單工作原理... 142
8.3.2 form標簽... 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 任務實施... 148
8.4.1 建立項目... 148
8.4.2 編寫HTML文件... 149
8.4.3 編寫CSS樣式... 151
8.4.4 編寫JS腳本... 155
8.4.5 瀏覽器測試... 156
8.5 強化訓練... 158
任務9 按鈕... 158
9.1 任務導入... 158
9.2 任務目標... 159
9.3 核心知識... 159
9.3.1
button標簽與屬性... 159
9.3.2 按鈕基礎樣式... 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 任務實施... 167
9.4.1 建立項目... 167
9.4.2 編寫HTML文件... 167
9.4.3 編寫CSS樣式... 168
9.4.4 瀏覽器測試... 170
9.5 強化訓練... 170
任務10 選項卡Tab. 171
10.1 任務導入... 171
10.2 任務目標... 172
10.3 核心知識... 172
10.3.1 選項卡HTML模型... 172
10.3.2 重置無序列表ul屬性... 173
10.3.3 浮動定位float 173
10.3.4 絕對定位absolute. 173
10.3.5 選項卡切換原理... 174
10.4 任務實施... 174
10.4.1 建立項目... 174
10.4.2 編寫HTML文件... 175
10.4.3 編寫CSS樣式... 177
10.4.4 編寫JS腳本... 179
10.4.5 瀏覽器測試... 179
10.5 強化訓練... 180
任務11 輪播圖排版... 181
11.1 任務導入... 181
11.2 任務目標... 182
11.3 核心知識... 182
11.3.1 輪播圖結(jié)構(gòu)模型... 182
11.3.2 輪播圖HTML結(jié)構(gòu)... 183
11.3.3 輪播的JS實現(xiàn)... 184
11.4 任務實施... 184
11.4.1 建立項目... 184
11.4.2 編寫HTML文件... 184
11.4.3 編寫CSS樣式... 186
11.4.4 編寫JS腳本... 188
11.4.5 瀏覽器測試... 190
11.5 強化訓練... 190
任務12 下拉菜單... 190
12.1 任務導入... 190
12.2 任務目標... 191
12.3 核心知識... 191
12.3.1 全局導航... 191
12.3.2 多級下拉菜單結(jié)構(gòu)... 191
12.3.3 導航菜單層次結(jié)構(gòu)... 192
12.3.4
inlinke-block. 193
12.3.5 元素垂直居中... 193
12.3.6
box-shadow的理解... 193
12.3.7 繪制三角形圖標... 194
12.3.8 超鏈接... 196
12.3.9 絕對地址和相對地址... 198
12.3.10 鏈接目標target 199
12.4 任務實施... 199
12.4.1 建立項目... 199
12.4.2 編寫HTML文件... 200
12.4.3 編寫CSS樣式... 202
12.4.4 瀏覽器測試... 208
12.5 強化訓練... 209
任務13 浮動布局... 209
13.1 任務導入... 209
13.2 任務目標... 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 標準文檔流... 218
13.3.9 浮動float 218
13.3.10 清除clear 220
13.3.11 溢出（overflow）... 222
13.3.12
iframe(內(nèi)聯(lián)框架) 222
13.4 任務實施... 223
13.4.1 建立項目... 223
13.4.2 編寫HTML文件... 223
13.4.3 編寫CSS樣式... 225
13.4.4 瀏覽器測試... 226
13.5 強化訓練... 227
任務14 流式布局... 227
14.1 任務導入... 227
14.2 任務目標... 228
14.3 核心知識... 228
14.3.1 固定寬度布局... 228
14.3.2 流式布局... 229
14.4 任務實施... 229
14.4.1 建立項目... 229
14.4.2 編寫HTML文件... 230
14.4.3 編寫CSS樣式... 232
14.4.4 瀏覽器測試... 233
14.5 強化訓練... 234
任務15 彈性布局... 234
15.1 任務導入... 234
15.2 任務目標... 234
15.3 核心知識... 235
15.3.1 彈性布局... 235
15.3.2 彈性布局存在的問題... 235
15.4 任務實施... 235
15.4.1 建立項目... 235
15.4.2 編寫HTML文件... 235
15.4.3 編寫CSS樣式... 237
15.4.4 瀏覽器測試... 238
15.5 強化訓練... 239
任務16 定位布局... 240
16.1 任務導入... 240
16.2 任務目標... 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 任務實施... 243
16.4.1 建立項目... 243
16.4.2 編寫HTML文件... 244
16.4.3 編寫CSS樣式... 247
16.4.4 瀏覽器測試... 249
16.5 強化訓練... 249
任務17 CSS3多列布局... 249
17.1 任務導入... 249
17.2 任務目標... 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 任務實施... 253
17.4.1 建立項目... 253
17.4.2 編寫HTML文件... 254
17.4.3 編寫CSS樣式... 255
17.4.4 瀏覽器測試... 257
17.5 強化訓練... 257
任務18 響應式頁面排版... 258
18.1 任務導入... 258
18.2 任務目標... 258
18.3 核心知識... 258
18.3.1 響應式布局概述... 258
18.3.2 響應式布局關(guān)鍵技術(shù)... 259
18.3.3 響應式布局技巧... 262
18.3.4 Viewport定義... 263
18.3.5 響應式設計流程... 263
18.4 任務實施... 264
18.4.1 建立項目... 264
18.4.2 編寫HTML文件... 264
18.4.3 編寫CSS樣式... 266
18.4.4 瀏覽器測試... 271
18.5 強化訓練... 272
任務19 前端框架BootStrap. 273
19.1 任務導入... 273
19.2 任務目標... 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)絡系統(tǒng)... 275
19.3.5
Bootstrap媒體查詢... 276
19.4 任務實施... 277
19.4.1 下載BootStrap. 277
19.4.2 建立項目... 279
19.4.3 編寫HTML文件... 279
19.4.4 編寫CSS樣式... 284
19.4.5 瀏覽器測試... 286
19.5 強化訓練... 286
書單推薦
