單元1 移動Web 開發(fā)概述 1
1.1 移動Web 開發(fā)簡介 1
1.1.1 什么是移動Web 開發(fā) 1
1.1.2 移動Web 開發(fā)與PC 端Web 開發(fā)的
區(qū)別 2
1.2 移動Web 開發(fā)技術入門 2
1.2.1 HTML5 簡介 2
1.2.2 CSS3 簡介 · 3
1.2.3 Bootstrap 簡介 · 3
1.2.4 移動端的Web 瀏覽器 3
1.3 基于HTML5 的移動Web 開發(fā) 4
1.4 開發(fā)工具HBuilderX 的使用 6
1.5 單元案例我的個人主頁 7
1.5.1 頁面效果分析 · 8
1.5.2 頁面實現 8
1.5.3 頁面樣式設計 · 9
1.6 單元小結 · 9
1.7 動手實踐 · 9
單元2 初識HTML5 · 11
2.1 HTML5 的優(yōu)勢 11
2.2 HTML5 網頁文檔結構 · 12
2.3 HTML5 常用標簽及其屬性 13
2.3.1 標簽的分類 13
2.3.2 標簽屬性 · 14
2.3.3 HTML5 文檔頭部相關標簽 · 14
2.3.4 HTML5 常用的文本標簽 16
2.4 HTML5 新增的語義化結構標簽 19
2.5 HTML5 新增的屬性 22
2.6 單元案例少壯不努力，
老大徒傷悲--古詩賞析 24
2.6.1 頁面效果分析 24
2.6.2 頁面實現 · 25
2.6.3 頁面功能設計 29
2.6.4 頁面樣式設計 29
2.7 單元小結 30
2.8 動手實踐 30
單元3 CSS3 基礎 · 32
3.1 結構與表現分離 32
3.2 CSS3 發(fā)展史及性能預覽 33
3.2.1 CSS3 發(fā)展史 · 33
3.2.2 CSS3 性能預覽 34
3.3 CSS3 核心基礎 · 38
3.3.1 CSS 樣式規(guī)則 38
3.3.2 引入CSS 樣式表 38
3.4 CSS3 選擇器 42
3.4.1 CSS3 屬性選擇器 42
3.4.2 CSS3 結構偽類選擇器 47
3.4.3 CSS3 UI 偽元素選擇器 54
3.5 單元案例仿寫軟大學院首頁 58
3.5.1 搭建項目 · 58
3.5.2 主要模塊開發(fā) 60
3.6 單元小結 68
3.7 動手實踐 69
單元4 CSS3 常用樣式 70
4.1 盒子模型概述 70
4.1.1 認識盒子模型 70
4.1.2 盒子的寬與高 72
4.2 盒子模型的相關屬性 73
4.2.1 邊框屬性 · 74
4.2.2 內邊距屬性 82
移動Web 開發(fā)實戰(zhàn)HTML5 CSS3 Bootstrap（慕課版）
2
4.2.3 外邊距屬性 84
4.3 CSS3 彈性盒布局 86
4.3.1 定義彈性容器 86
4.3.2 彈性容器屬性 88
4.3.3 彈性子元素屬性 · 95
4.4 背景設置 102
4.4.1 背景圖像的大小 102
4.4.2 背景的顯示區(qū)域 104
4.4.3 背景圖像的裁剪區(qū)域 105
4.4.4 多重背景圖像 106
4.4.5 背景復合屬性 107
4.5 CSS3 漸變屬性 109
4.5.1 線型漸變 109
4.5.2 徑向漸變 110
4.5.3 重復漸變 112
4.6 CSS3 盒子陰影與倒影 114
4.6.1 盒子陰影 114
4.6.2 盒子倒影 116
4.7 單元案例制作小信圖書
展示框 · 117
4.7.1 頁面效果分析 118
4.7.2 制作頁面結構 118
4.7.3 定義頁面CSS 樣式 120
4.8 單元小結 121
4.9 動手實踐 122
單元5 CSS3 高級應用 123
5.1 CSS3 過渡 · 123
5.1.1 transition 子屬性設置 123
5.1.2 transition 屬性復合設置 127
5.2 CSS3 變形 · 129
5.2.1 認識transform 屬性 129
5.2.2 2D 轉換 · 129
5.2.4 自定義轉換 · 136
5.3 CSS3 動畫 · 142
5.3.1 @keyframes 規(guī)則創(chuàng)建動畫 143
5.3.2 animation 屬性調用動畫 · 144
5.4 單元案例愛我中華
動畫制作 146
5.4.1 頁面效果分析 147
5.4.2 頁面動畫定義 147
5.4.3 頁面結構設計 148
5.4.4 頁面樣式設計 149
5.5 單元小結 150
5.6 動手實踐 151
單元6 HTML5 智能表單 · 152
6.1 表單 · 152
6.1.1 表單的構成 · 152
6.1.2 創(chuàng)建表單 153
6.2 表單控件 154
6.2.1 input 控件 · 154
6.2.2 textarea 控件 157
6.2.3 select 控件 159
6.3 HTML5 表單新屬性 161
6.3.1 HTML5 的Input 類型 162
6.3.2 HTML5 的表單元素 166
6.3.3 HTML5 的表單屬性 168
6.4 單元案例志愿者注冊頁面 172
6.4.1 表單注冊頁面效果分析 173
6.4.2 搭建表單注冊頁面結構 173
6.4.3 定義表單注冊頁面CSS 樣式 176
6.5 單元小結 178
6.6 動手實踐 178
單元7 基于HTML5 的移動
Web 應用-上 179
7.1 HTML5 音頻與視頻 179
7.1.1 HTML5 多媒體技術概述 179
7.1.2 HTML5 音頻 182
7.1.3 HTML5 視頻 184
7.1.4 音頻與視頻相關屬性、方法與事件 187
7.2 HTML5 拖放 190
7.2.1 拖放概述 190
7.2.2 拖放事件 191
7.2.3 dataTransfer 對象 · 194
目錄
3
7.3 文件操作 196
7.3.1 選擇文件 196
7.3.2 操作文件 197
7.4 單元案例DIY 視頻播放器 200
7.4.1 頁面功能分析 200
7.4.2 頁面效果展示 200
7.4.2 頁面設計與實現 200
7.5 單元小結 204
7.6 動手實踐 204
單元8 基于HTML5 的移動
Web 應用-下 · 206
8.1 認識Canvas 元素 · 206
8.2 繪制簡單圖形 · 210
8.2.1 繪制直線 210
8.2.2 繪制三角形 · 211
8.2.3 繪制矩形 213
8.2.4 清空畫布 215
8.3 繪制曲線 217
8.3.1 繪制圓 217
8.3.2 繪制其他曲線 218
8.4 圖形的變換 221
8.4.1 移動坐標空間 221
8.4.2 旋轉坐標空間 222
8.5 操作與使用圖像 224
8.5.1 繪制圖像 224
8.5.2 改變圖像大小 225
8.5.2 創(chuàng)建圖像切片 226
8.6 繪制文字 228
8.6.1 繪制填充文字 228
8.6.2 繪制輪廓文字 230
8.7 圖形的組合與裁切 233
8.7.1 圖形的組合 · 233
8.7.2 裁切路徑 234
8.8 更多的顏色和樣式選擇 235
8.8.1 繪制線性漸變 235
8.8.2 繪制放射性漸變 238
8.8.3 繪制圖案 239
8.9 SVG 創(chuàng)建2D 圖形 240
8.9.1 在頁面中添加SVG 241
8.9.2 應用SVG · 241
8.10 單元案例繪制桌面時鐘 243
8.10.1 頁面效果分析 · 244
8.10.2 頁面實現 244
8.11 單元小結 · 247
8.12 動手實踐 · 247
單元9 響應式Web 設計神器
Bootstrap 248
9.1 Bootstrap 環(huán)境安裝 · 248
9.2 Bootstrap 常用CSS 樣式 · 252
9.2.1 Bootstrap 柵格系統(tǒng) · 252
9.2.2 Bootstrap 排版 254
9.2.3 Bootstrap 表格 257
9.2.4 Bootstrap 表單 258
9.2.5 Bootstrap 按鈕 261
9.3 Bootstrap 布局組件 · 263
9.3.1 Bootstrap 字體圖標 · 263
9.3.2 Bootstrap 下拉菜單與按鈕組 264
9.3.3 Bootstrap 導航 266
9.3.4 Bootstrap 導航欄 267
9.3.5 Bootstrap 分頁和列表組 268
9.4 Bootstrap 常用插件 · 270
9.4.1 Bootstrap 標簽頁 270
9.4.2 Bootstrap 輪播插件 · 271
9.4.3 Bootstrap 折疊 274
9.5 單元案例新冠疫苗預約
網頁面 · 276
9.5.1 頁面效果分析 276
9.5.2 頁面實現 277
9.6 單元小結 279
9.7 動手實踐 279
單元10 實戰(zhàn)開發(fā)英語學習網站 · 281
10.1 Bootstrap 項目的搭建 · 281
10.2 首頁效果預覽與首頁結構搭建 · 282
移動Web 開發(fā)實戰(zhàn)HTML5 CSS3 Bootstrap（慕課版）
4
10.3 首頁導航與輪播圖實現 · 284
10.3.1 首頁導航欄實現 284
10.3.2 首頁輪播圖 285
10.4 首頁主體內容及底部菜單 288
10.4.1 主體內容 288
10.4.2 底部菜單 292
10.5 在線學習頁面 295
10.5.1 導航欄與底部菜單 295
10.5.2 主體內容實現 · 297
10.6 英語新聞頁面 300
10.6.1 導航欄與底部菜單 300
10.6.2 主體內容實現 · 302
10.7 單元小結 · 306
10.8 動手實踐 · 306