Web前端工程師是互聯(lián)網(wǎng)時代Web產(chǎn)品研發(fā)中不可缺少的專業(yè)角色。本書從Web開發(fā)實際應(yīng)用的角度,以任務(wù)項目開發(fā)為主線,把HTML5、CSS3的Web前端開發(fā)理論知識、實戰(zhàn)技能融入8個任務(wù),引導(dǎo)讀者從HTML5設(shè)置網(wǎng)頁內(nèi)容、CSS定義樣式美化網(wǎng)頁布局等基礎(chǔ)任務(wù)開始,逐步掌握圖文網(wǎng)頁、表單交互網(wǎng)頁、音視頻媒體網(wǎng)頁、動畫特效網(wǎng)頁、瀑布流布局網(wǎng)頁等頁面開發(fā),并在熟練編程的基礎(chǔ)上,理解自適應(yīng)網(wǎng)頁設(shè)計和響應(yīng)式網(wǎng)頁設(shè)計關(guān)鍵技術(shù),掌握響應(yīng)式網(wǎng)頁的設(shè)計與開發(fā)。本書配以思維導(dǎo)圖幫助讀者梳理知識點,將知識點融入到Web前端開發(fā)實際崗位案例中,有效掌握核心技巧,力求提高讀者的Web網(wǎng)頁開發(fā)水平。本書既可作為高等職業(yè)院校計算機及相關(guān)專業(yè)Web前端設(shè)計與開發(fā)課程的教材,也可供從事網(wǎng)頁設(shè)計與制作、網(wǎng)頁編程、Web應(yīng)用開發(fā)等行業(yè)人員參考閱讀。
李利正,畢業(yè)學(xué)校:浙江師范大學(xué),學(xué)歷:本科,學(xué)位:碩士,職稱:副教授,研究方向:計算機應(yīng)用
任務(wù)1 創(chuàng)建個網(wǎng)頁1
1.1 基本條件和概念3
1.1.1 學(xué)習(xí)工具3
1.1.2 基本概念3
1.1.3 任務(wù):建站點建網(wǎng)頁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 任務(wù)實施32
任務(wù)2 用CSS美化你的網(wǎng)頁36
2.1 CSS概念37
2.2 CSS的使用方法37
2.3 CSS聲明與應(yīng)用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 任務(wù)實施129
任務(wù)3 規(guī)整網(wǎng)頁布局134
3.1 布局方式135
3.2 固定布局136
3.3 單列布局136
3.3.1 等寬單列布局136
3.3.2 非等寬單列布局139
3.4 兩列布局141
3.4.1 浮動方式實現(xiàn)兩列布局141
3.4.2 position實現(xiàn)兩列布局142
3.5 三列布局143
3.5.1 圣杯布局143
3.5.2 雙飛翼布局147
3.6 嵌套混合布局149
3.7 任務(wù)實施150
3.7.1 整體布局151
3.7.2 第二層布局153
3.7.3 第三層布局154
3.7.4 各模塊內(nèi)容設(shè)計155
任務(wù)4 通過表單與用戶交互164
4.1 認識表單165
4.1.1 表單域166
4.1.2 表單元素168
4.1.3 HTML5新增表單類型與屬性172
4.1.4 表單驗證177
4.2 任務(wù)實施179
任務(wù)5 應(yīng)用媒體標簽制作個性化播放器189
5.1 HTML5音頻標簽190
5.2 HTML5視頻標簽192
5.3 HTML5音視頻標簽使用中的“坑”193
5.4 音視頻標簽的DOM操作194
5.5 任務(wù)實施198
任務(wù)6 制作活動抽獎大轉(zhuǎn)盤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 任務(wù)實施233
任務(wù)7 純CSS實現(xiàn)瀑布流布局240
7.1 多列布局實現(xiàn)瀑布流網(wǎng)頁布局241
7.1.1 多列布局知識圖譜241
7.1.2 多列布局前導(dǎo)知識241
7.1.3 任務(wù)實施245
7.2 彈性布局實現(xiàn)瀑布流布局249
7.2.1 彈性布局知識圖譜249
7.2.2 彈性布局前導(dǎo)知識250
7.2.3 容器屬性251
7.2.4 項目屬性254
7.2.5 利用彈性布局設(shè)計微信底部導(dǎo)航欄257
7.2.6 任務(wù)實施264
7.3 網(wǎng)格布局實現(xiàn)瀑布流布局265
7.3.1 網(wǎng)格布局知識圖譜265
7.3.2 網(wǎng)格布局前導(dǎo)知識266
7.3.3 任務(wù)實施277
任務(wù)8 響應(yīng)式網(wǎng)頁開發(fā)280
8.1 前導(dǎo)知識281
8.1.1 設(shè)備屏幕281
8.1.2 關(guān)于視口284
8.1.3 媒體查詢技術(shù)287
8.1.4 響應(yīng)式圖片技術(shù)290
8.1.5 流式布局293
8.2 響應(yīng)式框架制作旅游網(wǎng)頁299
8.2.1 安裝Bootstrap300
8.2.2 組件302
8.2.3 布局308