任務1　創(chuàng)建個網頁1
1.1　基本條件和概念3
1.1.1　學習工具3
1.1.2　基本概念3
1.1.3　任務：建站點建網頁6
1.2　格式排版標簽9
1.2.1　段落標簽與換行標簽9
1.2.2　標題標簽10
1.2.3　水平線標簽10
1.2.4　無語義標簽11
1.2.5　文本標簽11
1.3　列表標簽13
1.3.1　有序列表14
1.3.2　無序列表15
1.3.3　自定義列表17
1.3.4　嵌套列表18
1.4　圖像20
1.5　超鏈接24
1.5.1　超鏈接的屬性24
1.5.2　郵箱鏈接26
1.5.3　錨點鏈接27
1.6　表格28
1.7　任務實施32
任務2　用CSS美化你的網頁36
2.1　CSS概念37
2.2　CSS的使用方法37
2.3　CSS聲明與應用39
2.3.1　CSS格式39
2.3.2　CSS注釋39
2.3.3　CSS單位39
2.3.4　CSS顏色39
2.3.5　選擇器40
2.4　CSS常見屬性48
2.4.1　CSS字體48
2.4.2　CSS文本56
2.4.3　CSS盒子模型66
2.4.4　CSS邊框72
2.4.5　CSS鏈接81
2.4.6　CSS列表83
2.4.7　CSS背景92
2.4.8　CSS浮動112
2.4.9　CSS定位124
2.5　任務實施129
任務3　規(guī)整網頁布局134
3.1　布局方式135
3.2　固定布局136
3.3　單列布局136
3.3.1　等寬單列布局136
3.3.2　非等寬單列布局139
3.4　兩列布局141
3.4.1　浮動方式實現兩列布局141
3.4.2　position實現兩列布局142
3.5　三列布局143
3.5.1　圣杯布局143
3.5.2　雙飛翼布局147
3.6　嵌套混合布局149
3.7　任務實施150
3.7.1　整體布局151
3.7.2　第二層布局153
3.7.3　第三層布局154
3.7.4　各模塊內容設計155
任務4　通過表單與用戶交互164
4.1　認識表單165
4.1.1　表單域166
4.1.2　表單元素168
4.1.3　HTML5新增表單類型與屬性172
4.1.4　表單驗證177
4.2　任務實施179
任務5　應用媒體標簽制作個性化播放器189
5.1　HTML5音頻標簽190
5.2　HTML5視頻標簽192
5.3　HTML5音視頻標簽使用中的“坑”193
5.4　音視頻標簽的DOM操作194
5.5　任務實施198
任務6　制作活動抽獎大轉盤206
6.1　CSS坐標系統(tǒng)與角度單位207
6.2　transform屬性209
6.3　transition屬性223
6.4　animation屬性228
6.5　@keyframes屬性230
6.6　任務實施233
任務7　純CSS實現瀑布流布局240
7.1　多列布局實現瀑布流網頁布局241
7.1.1　多列布局知識圖譜241
7.1.2　多列布局前導知識241
7.1.3　任務實施245
7.2　彈性布局實現瀑布流布局249
7.2.1　彈性布局知識圖譜249
7.2.2　彈性布局前導知識250
7.2.3　容器屬性251
7.2.4　項目屬性254
7.2.5　利用彈性布局設計微信底部導航欄257
7.2.6　任務實施264
7.3　網格布局實現瀑布流布局265
7.3.1　網格布局知識圖譜265
7.3.2　網格布局前導知識266
7.3.3　任務實施277
任務8　響應式網頁開發(fā)280
8.1　前導知識281
8.1.1　設備屏幕281
8.1.2　關于視口284
8.1.3　媒體查詢技術287
8.1.4　響應式圖片技術290
8.1.5　流式布局293
8.2　響應式框架制作旅游網頁299
8.2.1　安裝Bootstrap300
8.2.2　組件302
8.2.3　布局308