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

黑馬程序員

  • 出版商: 人民郵電
  • 出版日期: 2021-02-01
  • 定價: $299
  • 售價: 8.5$254
  • 語言: 簡體中文
  • 頁數: 208
  • ISBN: 7115553963
  • ISBN-13: 9787115553966
  • 相關分類: BootstrapCSSHTML

下單後立即進貨 (約4週~6週)

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

買這商品的人也買了...

相關主題

商品描述

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

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

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

作者簡介

黑马程序员,传智播客旗下高端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