響應式 Web 開發項目教程 (HTML5+CSS3+Bootstrap), 2/e

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