HTML5+CSS3 Web前端開發技術（任務式）（微課版）（第2版）
於麗娜
商品描述
本書以搭建新雲課堂項目為主線，講解HTML5+CSS3 Web前端開發技術。全書共12個任務，主要內容包括搭建項目開發環境、製作課程基礎頁面、製作課程播放頁面、使用表單製作頁面、在項目中引入CSS、使用CSS3美化頁面、使用盒子模型佈局頁面、使用CSS3浮動佈局頁面、使用CSS3定位佈局頁面、利用CSS3動畫美化頁面、使用CSS3彈性盒子佈局頁面、使用CSS3媒體查詢實現頁面響應式佈局。本書通過知識講解與任務實戰相結合的方式介紹網站項目開發的流程和方法，配備豐富的教學資源，支持線上線下混合式教學和項目式教學。
本書適合作為高職高專院校、職業本科院校Web前端技術相關課程的教材，也可供初學者自學參考。
作者簡介
于丽娜，全国课程思政名师，全国课程思政教学团队核心成员，全国教学能力大赛、学生技能大赛一等奖、二等奖指导教师 于丽娜，女，1977年5月出生，中共党员，教授，现为河北工业职业技术大学计算机技术系主任。2016-2021参与并指导教学能力大赛一等奖2项，二等奖5项，三等奖2项优异成绩。是全国物联网程序设计课程思政教学名师及核心成员。是国家级教学团队成员，是国家级精品共享课程主讲教师。是河北省技术能手，河北省三三三层次人选。主持并参与省级课题30余项，论文20余篇。 一直保持对IT企业最新技术关注和企业广泛联系，多次下企业实践，参与企业真实项目研发。根据职业教育特点，制定“岗课赛证”课程体系，将课程思政盐溶课程当中，构建五真五度教学模式，通过这种教学模式的改革，培养出一大批优秀毕业生，近三年获得全国大学生技能大赛一等奖两项，二等奖4项，三等奖6项，河北省一等奖50余项。
目錄大綱
任務01 搭建項目開發環境 1
1.1 任務概述 1
1.2 任務目標 2
1.3 知識圖譜 2
1.4 任務準備 2
1.4.1 Web概述 2
1.4.2 主流Web瀏覽器 3
1.4.3 常用Web開發工具 4
1.4.4 Web標準 5
1.4.5 HTML5的優勢 6
1.5 任務實戰 7
任務1：安裝Chrome瀏覽器 7
任務2：安裝HBuilderX IDE 9
任務3：使用HBuilderX創建項目 11
1.6 任務小結 15
1.7 知識鞏固 15
1.8 任務拓展 15
任務02 製作課程基礎頁面 16
2.1 任務概述 16
2.2 任務目標 16
2.3 知識圖譜 17
2.4 任務準備 17
2.4.1 HTML5基礎語法 17
2.4.2 HTML5語義化結構標簽 20
2.4.3 HTML5常用標簽 21
2.4.4 HTML5實體字符 24
2.4.5 HTML5超鏈接、框架標簽 26
2.4.6 HTML5元素分類 29
2.5 任務實戰 29
任務1：製作頁面通用尾部 29
任務2：製作頁面通用頭部 30
任務3：製作課程說明頁面 31
2.6 任務小結 32
2.7 知識鞏固 32
2.8 任務拓展 33
任務03 製作課程播放頁面 34
3.1 任務概述 34
3.2 任務目標 34
3.3 知識圖譜 35
3.4 任務準備 35
3.4.1 HTML5列表 35
3.4.2 HTML5表格 36
3.4.3 HTML5媒體元素 40
3.5 任務實戰 42
任務1：製作課程播放頁面“視頻列表”列表 42
任務2：製作課程推薦頁面“成長路線”列表 43
任務3：製作課程播放頁面“課程資料”表格 44
任務4：製作課程播放頁面播放區域 45
3.6 任務小結 46
3.7 知識鞏固 47
3.8 任務拓展 47
任務04 使用表單製作頁面 50
4.1 任務概述 50
4.2 任務目標 50
4.3 知識圖譜 51
4.4 任務準備 51
4.4.1 表單概述 51
4.4.2 表單發送方式 52
4.4.3 常用表單控件 53
4.4.4 表單驗證的作用 64
4.4.5 表單驗證的方法 65
4.5 任務實戰 71
任務1：製作信息登記頁面 71
任務2：製作用戶登錄頁面 72
任務3：製作用戶註冊頁面 73
4.6 任務小結 74
4.7 知識鞏固 75
4.8 任務拓展 75
任務05 在項目中引入CSS 77
5.1 任務概述 77
5.2 任務目標 77
5.3 知識圖譜 78
5.4 任務準備 78
5.4.1 CSS3概述 78
5.4.2 CSS3基礎語法 79
5.4.3 CSS3引入方式 79
5.4.4 CSS3基礎選擇器 83
5.4.5 CSS3高級選擇器 85
5.4.6 CSS3選擇器權重問題 90
5.5 任務實戰 92
任務1：美化課程說明頁面 92
任務2：美化課程播放頁面 93
5.6 任務小結 96
5.7 知識鞏固 96
5.8 任務拓展 96
任務06 使用CSS3美化頁面 97
6.1 任務概述 97
6.2 任務目標 97
6.3 知識圖譜 98
6.4 任務準備 98
6.4.1 文字樣式 98
6.4.2 文本樣式 101
6.4.3 超鏈接樣式 108
6.4.4 列表樣式 110
6.4.5 背景樣式 112
6.4.6 背景漸變 118
6.5 任務實戰 120
任務1：美化頁面通用尾部 120
任務2：美化頁面通用頭部 121
任務3：美化課程播放頁面中的“課程資料”表格 123
任務4：製作課程推薦頁面“更多好課”部分 125
6.6 任務小結 126
6.7 知識鞏固 126
6.8 任務拓展 127
任務07 使用盒子模型佈局頁面 129
7.1 任務概述 129
7.2 任務目標 129
7.3 知識圖譜 130
7.4 任務準備 130
7.4.1 盒子模型結構 130
7.4.2 盒子模型的組成 130
7.4.3 計算盒子模型的尺寸 135
7.4.4 IE盒子模型 135
7.4.5 使用Chrome調試工具檢查盒子尺寸 136
7.4.6 邊框圓角 137
7.4.7 使用border-radius屬性製作特殊圖形 139
7.4.8 盒子陰影 142
7.5 任務實戰 144
任務1：美化課程播放頁面中的“視頻列表”列表 144
任務2：美化用戶登錄頁面 146
任務3：美化用戶註冊頁面 148
7.6 任務小結 150
7.7 知識鞏固 150
7.8 任務拓展 151
任務08 使用CSS3浮動佈局頁面 152
8.1 任務概述 152
8.2 任務目標 152
8.3 知識圖譜 153
8.4 任務準備 153
8.4.1 標準文檔流 153
8.4.2 display屬性 153
8.4.3 浮動 154
8.4.4 清除浮動 157
8.5 任務實戰 163
任務1：使用浮動左右佈局 163
任務2：使用浮動單行佈局 166
任務3：使用浮動多行佈局 168
8.6 任務小結 170
8.7 知識鞏固 170
8.8 任務拓展 171
任務09 使用CSS3定位佈局頁面 173
9.1 任務概述 173
9.2 任務目標 173
9.3 知識圖譜 174
9.4 任務準備 174
9.4.1 定位概述 174
9.4.2 相對定位 175
9.4.3 絕對定位 176
9.4.4 固定定位 177
9.4.5 黏性定位 178
9.4.6 z-index 178
9.5 任務實戰 179
任務1：製作課程層疊角標 179
任務2：使用絕對定位實現用戶登錄頁面居中 184
任務3：固定定位置頂按鈕 186
任務4：黏性定位頁面通用頭部 188
9.6 任務小結 189
9.7 知識鞏固 190
9.8 任務拓展 190
任務10 利用CSS3動畫美化頁面 191
10.1 任務概述 191
10.2 任務目標 191
10.3 知識圖譜 192
10.4 任務準備 192
10.4.1 變形 192
10.4.2 過渡 198
10.4.3 動畫 200
10.5 任務實戰 203
任務1：製作鼠標指針懸浮過渡效果 203
任務2：使用動畫製作輪播區域 205
10.6 任務小結 208
10.7 知識鞏固 208
10.8 任務拓展 208
任務11 使用CSS3彈性盒子佈局頁面 210
11.1 任務概述 210
11.2 任務目標 210
11.3 知識圖譜 211
11.4 任務準備 211
11.4.1 彈性盒子 211
11.4.2 彈性盒子容器屬性 212
11.4.3 彈性盒子項目屬性 218
11.5 任務實戰 220
任務1：使用彈性盒子佈局課程推薦頁面 220
任務2：使用彈性盒子佈局課程播放頁面 224
11.6 任務小結 228
11.7 知識鞏固 228
11.8 任務拓展 228
任務12 使用CSS3媒體查詢實現頁面響應式佈局 230
12.1 任務概述 230
12.2 任務目標 230
12.3 知識圖譜 231
12.4 任務準備 231
12.4.1 媒體查詢與響應式佈局 231
12.4.2 媒體查詢語法 232
12.4.3 媒體查詢的引入方式 233
12.4.4 em與rem 235
12.5 任務實戰 235
任務1：為用戶登錄頁面應用響應式佈局 235
任務2：為課程推薦頁面應用響應式佈局 238
12.6 任務小結 243
12.7 知識鞏固 243
12.8 任務拓展 244
