回響式Web開發項目教程

1.黑馬程式設計師系列教材改版；

2.內容在第1版的基礎上進行最佳化升級；

3.本書配套資源豐富，包括教學PPT、教學大綱、教學設計、題庫、教學視頻等資源。

本書是面向Web前端開發學習者的一本入門教材，以通俗易懂的語言葛墊欠戲、豐富實用的案例，詳細講解了HTML5 + CSS3 + Bootstrap回響式開發技術。

全書共9章。第1～3章講解HTML5和CSS3的基礎內容；第4～6章講解HTML5表單的套用、HTML5畫布、HTML5視頻和音頻的內容；第7章講解回響式Web設計的基試碑尋礎知識；第8～9章講解Bootstrap，內容包括柵格系統、組件和樣式等相關內容，以及如何利用Bootstrap相關技術開發PC端登錄界面和後台管理系統。

本書既可作為高等教育本、專科院校計算機相關專業的Web前端開發課程的教材，也可作為廣大IT技術人員和編程愛好者的參考書。

第 1章 HTML5+CSS3初體驗 1

1.1　HTML5和CSS3的優勢　1

1.1.1　HTML5的優勢　1

1.1.2　CSS3的優勢　2

1.2　HTML5的基本使用　2

1.2.1　HTML5的基本語法　3

1.2.2　HTML5語義舟民朵化標籤　3

1.3　CSS的基本使用　4

1.3.1　CSS的引入方式　5

1.3.2　選擇器　5

1.3.3　盒子模型　8

1.3.4　浮動與定位　10

1.4　【項目1-1】三欄布局頁面　11

1.4.1　項目分析　11

1.4.2　編寫頭部和底部區域　12

1.4.3　編寫主體區域　13

1.4.4　實現左側邊欄效果　14

1.4.5　實現右側邊欄效果　14

1.4.6　項目總結　15

1.5　CSS3框線屬性　15

1.5.1　圓角框線　15

1.5.2　特殊框線效果　16

1.6　CSS3背景設定　18

1.7　CSS3陰影和漸變　19

1.7.1　陰影　19

1.7.2　線性漸變　20

1.7.3　徑向漸變　21

1.8　【項目1-2】許願牆　22

1.8.1　項目分析　22

1.8.2　編寫許願牆頁面結構　23

1.8.3　編寫許願牆頁面樣式　24

1.8.4　項目總結奔霸翻歸　24

課後練習　25

第2章 CSS3文本與圖示　26

2.1　HTML5中常用的文本標籤　26

2.2　CSS3文本樣式屬性　27

2.2.1　字型樣式屬性　27

2.2.2　文本外觀屬性　27

2.2.3　連結屬性　29

2.2.4　@font-face屬性　29

2.3　font-awesome字型圖示　31

2.3.1　下載font-awesome　31

2.3.2　使用font-awesome　31

2.4　CSS3用戶界面屬性　33

2.4.1　box-sizing屬性　33

2.4.2　resize調整尺寸　34

2.4.3　outline-offset外形修飾　36

2.5　【項目2】軟文推廣頁面　37

2.5.1　項目分析　37

2.5.2　編寫頭部頁面效果　38

2.5.3　編寫中籃記膠間部禁跨陵分頁面效果　38

2.5.4　編寫底部頁面效果　40

2.5.5　項目總結　40

課後練習　41

第3章　CSS3過渡、變形與動畫　42

3.1　CSS3過渡　42

3.1.1　什麼是過渡　42

3.1.2　transition的子屬性　43

3.2　CSS3變形　44

3.2.1　2D轉換　44

3.2.2　元素變形原點　45

3.2.3　3D轉換　46

3.3　CSS3動畫　49

3.3.1　@keyframes規則　49

3.3.2　animation屬性　49

3.4　【項目3】搖晃的桃子　51

3.4.1　項目分析　51

3.4.2　編寫搖晃達充桃子的基本頁面效果　52

3.4.3　編寫桃子的搖晃效果　54

3.4.4　項目總結　56

課後練習　56

第4章　HTML5表單的套用　57

4.1　介紹表單　57

4.1.1　標籤　57

4.1.2　標籤　58

4.1.3　其他表單標籤　60

4.2　【項目4-1】調查問卷頁面　65

4.2.1　項目分析　65

4.2.2　編寫用戶基本信息頁面效果　66

4.2.3　編寫上傳檔案和文本域頁面

　效果　68

4.2.4　項目總結　68

4.3　HTML5表單新特性　69

4.3.1　新特性　69

4.3.2　新特性　71

4.4　【項目4-2】登錄註冊頁面　72

4.4.1　項目分析　72

4.4.2　編寫登錄頁面效果　74

4.4.3　編寫註冊基本頁面效果　76

4.4.4　實現註冊信息驗證頁面效果　77

4.4.5　項目總結　78

課後練習　78

第5章　HTML5畫布　80

5.1　JavaScript的基礎知識　80

5.1.1　JavaScript引入方式　80

5.1.2　數據類型　81

5.1.3　變數　81

5.1.4　函式　82

5.1.5　對象　82

5.1.6　事件處理　82

5.1.7　DOM操作　84

5.1.8　getBoundingClientRect()方法　86

5.2　Canvas繪圖基本步驟　87

5.2.1　創建畫布　87

5.2.2　準備畫筆　87

5.2.3　定義坐標和起始點　87

5.2.4　繪製線條圖案　88

5.2.5　繪製三角形　90

5.3　Canvas常用方法　91

5.3.1　繪製幾何圖形　91

5.3.2　繪製笑臉　92

5.3.3　繪製圖片　94

5.4　Canvas其他方法　95

5.5　【項目5-1】塗鴉板　96

5.5.1　項目分析　96

5.5.2　編寫頁面結構，定義畫布　97

5.5.3　在JavaScript中繪製圖形　97

5.5.4　實現滑鼠塗鴉效果　98

5.5.5　項目總結　98

5.6　【項目5-2】發紅包看照片　99

5.6.1　項目分析　99

5.6.2　編寫頁面結構　100

5.6.3　編寫頁面樣式　101

5.6.4　繪製圓形圖片　102

5.6.5　實現單擊按鈕圖片顯示效果　102

5.6.6　項目總結　103

課後練習　103

第6章　HTML5視頻和音頻　104

6.1　JavaScript編程基礎　104

6.1.1　JavaScript運算符　104

6.1.2　分支結構　106

6.1.3　循環結構　107

6.2　視頻和音頻技術簡介　108

6.3　視頻的基本使用　108

6.3.1　在HTML5中嵌入視頻　108

6.3.2　視頻標籤的常用屬性　109

6.3.3　處理視頻檔案格式　110

6.4　音頻的基本使用　110

6.4.1　在HTML5中嵌入音頻　111

6.4.2　處理音頻檔案格式　111

6.5　視頻和音頻對象　112

6.5.1　視頻和音頻對象的常用方法　112

6.5.2　視頻和音頻對象的常用屬性　112

6.5.3　視頻和音頻對象的常用事件　113

6.6　【項目6-1】視頻播放器　114

6.6.1　項目分析　114

6.6.2　編寫播放器頁面結構　116

6.6.3　編寫播放器頁面樣式　116

6.6.4　計算視頻播放的總時長　119

6.6.5　實現視頻播放和暫停效果　119

6.6.6　實現進度條顯示效果　120

6.6.7　實現視頻全螢幕顯示效果　120

6.6.8　實現視頻播放完成後的重置

　操作　120

6.6.9　實現單擊進度條視頻跳轉效果　120

6.6.10　使用Esc鍵退出全螢幕　121

6.6.11　使用按鍵控制視頻的播放和

　暫停　121

6.6.12　項目總結　122

6.7　【項目6-2】音樂播放器　122

6.7.1　項目分析　122

6.7.2　編寫音樂播放器頁面結構　124

6.7.3　編寫音樂播放器頁面樣式　125

6.7.4　實現歌詞控制欄效果　126

6.7.5　實現播放器樣式效果　127

6.7.6　實現音頻檔案的播放功能　129

6.7.7　項目總結　130

課後練習　130

第7章　回響式Web設計　131

7.1　回響式Web設計基礎　131

7.1.1　視口　131

7.1.2　媒體查詢　132

7.1.3　百分比布局　134

7.1.4　柵格系統　136

7.2　回響式常見實現方式　136

7.2.1　媒體查詢實現回響式布局　136

7.2.2　彈性盒布局　137

7.2.3　彈性盒常用屬性　138

7.2.4　彈性盒屬性的綜合運用　142

7.3　【項目7-1】環保網站　144

7.3.1　項目分析　144

7.3.2　編寫HTML結構代碼　146

7.3.3　編寫style.css公共樣式代碼　146

7.3.4　實現header回響式效果　147

7.3.5　實現banner回響式效果　149

7.3.6　實現中間區域效果　150

7.3.7　實現底部區域效果　153

7.3.8　項目總結　153

7.4　【項目7-2】學習教程庫　154

7.4.1　項目分析　154

7.4.2　編寫HTML結構代碼　156

7.4.3　編寫標題部分樣式代碼　156

7.4.4　編寫免費教程資源部分樣式

　代碼　157

7.4.5　編寫媒體查詢樣式代碼　158

7.4.6　項目總結　159

課後練習　160

第8章　Bootstrap（上）　161

8.1　Bootstrap簡介　161

8.1.1　什麼是Bootstrap　161

8.1.2　Bootstrap的優勢　162

8.1.3　Bootstrap 4的新特性　162

8.2　Bootstrap的下載和環境安裝　162

8.2.1　Bootstrap的下載方式　162

8.2.2　下載Bootstrap預編譯檔案　163

8.2.3　下載Bootstrap源檔案手動

　編譯　164

8.2.4　使用CDN載入Bootstrap　165

8.2.5　在HTML中引入Bootstrap　166

8.3　Bootstrap布局容器　167

8.3.1　初識布局容器　167

8.3.2　柵格系統　167

8.3.3　柵格系統基本使用　168

8.3.4　回響式布局工具　168

8.4　Flex彈性布局　169

8.5　SVG矢量圖的使用　170

8.6　Bootstrap常用組件　172

8.6.1　表單　172

8.6.2　輸入框組　174

8.6.3　按鈕　174

8.6.4　分頁　176

8.7　輔助樣式　177

8.7.1　文本顏色　177

8.7.2　背景顏色　177

8.7.3　設定元素間距　178

8.8　【項目8】PC端登錄界面　179

8.8.1　項目分析　179

8.8.2　編寫HTML結構代碼　180

8.8.3　設定body和html樣式　181

8.8.4　實現頁面垂直居中顯示　181

8.8.5　實現頭部head部分　182

8.8.6　實現中間center部分　182

8.8.7　實現底部footer部分　183

8.8.8　項目總結　183

課後練習　183

第9章　Bootstrap（下）　185

9.1　導航　185

9.1.1　基礎導航　185

9.1.2　標籤式導航　186

9.1.3　pills導航　186

9.1.4　導航對齊方式　187

9.1.5　導航下拉選單　187

9.1.6　標籤頁切換　188

9.2　導航欄　189

9.2.1　基礎導航欄　189

9.2.2　設定導航欄的標題　190

9.2.3　導航欄摺疊效果　190

9.3　卡片　191

9.3.1　卡片結構　191

9.3.2　卡片主體內容　192

9.3.3　設定帶有圖片的卡片　193

9.3.4　設定卡片背景圖　193

9.4　【項目9】後台管理系統　194

9.4.1　項目展示　194

9.4.2　安裝Node.js環境　196

9.4.3　使用Sass編寫樣式代碼　197

9.4.4　安裝Gulp　198

9.4.5　下載和安裝Chart.js圖表庫　199

9.4.6　引入Feather圖示庫　200

9.4.7　搭建項目目錄結構　200

9.4.8　創建模板檔案　200

9.4.9　實現導航欄　201

9.4.10　實現網頁中間部分布局　203

9.4.11　編寫中間部分結構代碼　205

9.4.12　實現側邊導航布局　205

9.4.13　實現右側內容布局　206

9.4.14　實現側邊導航激活效果　207

9.4.15　解決iframe框架高度自適應　207

9.4.16　項目總結　207

課後練習　208

黑馬程式設計師，傳智播客旗下高端IT教育品牌，它是由中國Java培訓先行者張孝祥老師發起，聯合全球最大的中文IT社區CSDN、中關村軟體園共同創辦的一家專業教育機構。辦學至今，我們一直堅守著“為千萬人少走彎路而著書，為中華軟體之崛起而講課”的辦學理念，堅持培養優秀軟體套用工程師的宏偉目標，在累計培養的十萬餘名學員中，其中90%的學員均已在北、上、廣等一線城市高薪就業，特別是“黑馬程式設計師”的平均就業薪資已達到8K以上。為了迎合軟體市場的需求，我們陸續開設了Java、網頁平面、PHP、.Net、iOS、C/C++、Android等9個專業方向的課程，並且未來將逐漸開設其他專業方向的課程。隨著傳智播客的日益壯大，除了北京總部，我們在上海、廣州、武漢、成都、深圳等地也創立了直營分支機構，傳智播客儼然已成為了國內最具專業口碑的IT教育機構。

回響式Web開發項目教程

基本介紹

作者簡介

相關詞條

熱門詞條