《Web前端開發實戰》是2023年9月1日清華大學出版社出版的圖書，作者：郭凱、孔繁玉、張有寬。
基本介紹
- 中文名：Web前端開發實戰
- 作者：郭凱、孔繁玉、張有寬
- 出版時間：2023年9月1日
- 出版社：清華大學出版社
- ISBN：9787302643609
- 定價：69.80 元
- 印次：1-1
- 印刷日期：2023.08.23
內容簡介,圖書目錄,
內容簡介
隨著瀏覽器性能的不斷提升，越來越多的套用從C端(客戶端)轉入了B端(瀏覽器端)，瀏覽器Web套用開發需求越來越多，逐漸形成了一個圍繞瀏覽器的完整生態。《Web前端開發實戰》通過Web套用開發入門實例，利用HTML5、CSS3系統講解了Web前端開發中的基礎理論知識及項目開發方案。 《Web前端開發實戰》共分為13章，內容包括前端開發簡介、網頁排版實戰、表格案例實戰、表單案例實戰、CSS布局——個人簡歷製作、個性化的CSS、定位布局、彈性盒子布局、格線布局、回響式布局、移動端布局、長頁面布局、回響式布局。 《Web前端開發實戰》可作為前端開發初學者的入門書籍，也可作為前端開發工作人員的實戰練習書籍，還可作為高等院校計算機相關專業的教材或教學參考書。
圖書目錄
目錄
第1章 前端開發簡介 1
1.1 前端開發的前世今生 1
1.1.1 什麼是前端開發 1
1.1.2 前端開發的發展歷程 2
1.2 前端開發工具介紹 2
1.2.1 Visual Studio Code 3
1.2.2 WebStorm 3
1.2.3 HBuilder X 4
1.2.4 Sublime Text 4
1.2.5 前端開發工具的安裝 5
1.3 前端開發技術介紹 8
1.3.1 HTML 8
1.3.2 CSS 9
1.3.3 JavaScript 10
1.3.4 前端框架簡介 12
1.4 本章練習 12
第2章 網頁排版實戰 13
2.1 HTML文檔的基本結構 13
2.2 HTML標籤語法 14
2.2.1 標籤類型 14
2.2.2 標籤屬性 15
2.3 HTML常用標籤 16
2.3.1 標題標籤 16
2.3.2 段落標籤 17
2.3.3 文本格式化標籤 17
2.3.4 列表標籤 18
2.3.5 圖片標籤 22
2.3.6 超連結標籤 24
2.3.7 注釋標籤 26
2.3.8 換行標籤 26
2.3.9 水平線標籤 27
2.3.10 <div>和<span>標籤 27
2.4 標籤實戰 28
2.4.1 項目分析 28
2.4.2 項目開發 28
2.5 本章練習 32
第3章 表格案例實戰 33
3.1 表格元素 33
3.1.1 簡單的表格 33
3.1.2 表格標題 35
3.1.3 表格三元素 35
3.2 表格屬性 38
3.2.1 表格框線 38
3.2.2 表格間距 40
3.2.3 表格跨列 42
3.2.4 表格跨行 43
3.3 表格實戰 45
3.4 本章練習 54
第4章 表單案例實戰 55
4.1 表單標籤 55
4.1.1 表單標籤簡介 55
4.1.2 表單標籤的常用屬性 56
4.2 input標籤 57
4.2.1 input標籤的使用 58
4.2.2 input標籤的常用屬性 58
4.3 選擇框 61
4.3.1 單選框 61
4.3.2 複選框 62
4.3.3 下拉選擇框 62
4.4 多行文本域 63
4.4.1 多行文本標籤 63
4.4.2 多行文本域的屬性 64
4.5 表單排版實戰 64
4.5.1 項目分析 64
4.5.2 項目開發 64
4.6 本章練習 68
第5章 CSS布局之個人簡歷製作 69
5.1 基礎選擇器 69
5.1.1 CSS使用方式 69
5.1.2 標籤選擇器 72
5.1.3 類選擇器 73
5.1.4 id選擇器 74
5.2 文本屬性 75
5.2.1 文本顏色 75
5.2.2 文本居中 76
5.2.3 文本縮進 77
5.2.4 文本修飾 78
5.3 文字屬性 78
5.3.1 字型家族 78
5.3.2 文字大小 79
5.3.3 文字加粗 80
5.3.4 文字傾斜 82
5.3.5 文字行高 83
5.4 CSS項目布局實戰 84
5.4.1 項目分析 84
5.4.2 項目開發 84
5.5 本章練習 90
第6章 個性化的CSS樣式 91
6.1 CSS層級選擇器 91
6.1.1 子代選擇器 91
6.1.2 後代選擇器 92
6.1.3 相鄰兄弟選擇器 93
6.1.4 通用兄弟選擇器 94
6.2 偽類選擇器 96
6.2.1 什麼是偽類 96
6.2.2 簡單偽類示例 96
6.2.3 常用偽類 97
6.3 偽元素選擇器 102
6.3.1 什麼是偽元素 103
6.3.2 簡單的偽元素示例 103
6.3.3 常用偽元素 103
6.4 CSS框線 105
6.4.1 框線樣式 106
6.4.2 框線寬度 109
6.4.3 框線顏色 109
6.4.4 框線綜合屬性 110
6.4.5 圓角屬性 112
6.4.6 框線陰影 114
6.5 CSS背景 116
6.5.1 背景顏色 116
6.5.2 背景圖像 116
6.5.3 背景圖像重複 117
6.5.4 背景圖像定位 118
6.5.5 背景圖像尺寸 121
6.5.6 背景圖像固定 122
6.5.7 背景裁剪 124
6.5.8 背景綜合屬性 125
6.5.9 多背景圖像 125
6.6 CSS外邊距 126
6.6.1 外邊距簡寫屬性 126
6.6.2 單邊外邊距 127
6.6.3 margin的套用 128
6.7 CSS內邊距 130
6.7.1 內邊距簡寫屬性 131
6.7.2 單邊內邊距 132
6.7.3 padding的套用 132
6.8 CSS樣式實戰 134
6.8.1 多彩的框線 134
6.8.2 不同主題的按鈕 136
6.9 本章練習 138
第7章 定位布局 139
7.1 定位概述 140
7.1.1 CSS中的定位方式 140
7.1.2 指定元素位置 140
7.2 相對定位 141
7.3 絕對定位 142
7.3.1 相對於最近已定位祖先元素 142
7.3.2 相對於頁面的左上角定位 143
7.4 固定定位 144
7.5 元素的堆疊次序 145
7.6 案例演示 148
7.6.1 遮罩層效果 148
7.6.2 使用定位實現聖杯布局效果 151
7.7 本章練習 152
第8章 彈性盒子布局方案 153
8.1 彈性盒子介紹 153
8.1.1 flex布局介紹 153
8.1.2 flex基本概念 154
8.2 彈性盒子屬性 154
8.2.1 flex-direction屬性 154
8.2.2 justify-content屬性 156
8.2.3 align-items屬性 158
8.2.4 flex-wrap屬性 160
8.2.5 flex-flow屬性 162
8.2.6 align-content屬性 163
8.3 flex項目屬性 165
8.3.1 flex-grow屬性 166
8.3.2 flex-shrink屬性 167
8.3.3 flex-basis屬性 168
8.3.4 flex屬性 169
8.3.5 order屬性 170
8.3.6 align-self屬性 171
8.4 城市旅遊移動端首頁開發實戰 172
8.5 本章練習 186
第9章 格線布局 187
9.1 格線grid基礎 187
9.1.1 display: grid定義格線布局 187
9.1.2 grid寬與高的設定 189
9.1.3 子元素在容器中的排列位置 191
9.2 格線grid屬性 193
9.2.1 格線行、格線列 194
9.2.2 格線間距 197
9.2.3 格線線 199
9.2.4 格線區域 199
9.3 項目實戰 200
9.4 本章練習 207
第10章 回響式布局 209
10.1 回響式Web基礎 209
10.2 媒體查詢 210
10.2.1 視口 210
10.2.2 媒體查詢屬性語法 210
10.2.3 媒體查詢注意事項 211
10.3 項目實戰 211
10.4 本章練習 242
第11章 移動端布局 243
11.1 移動端開發簡介 243
11.1.1 移動端開發的相關知識點 243
11.1.2 視口 244
11.2 移動端適配方案 245
11.2.1 rem布局的適配方法 245
11.2.2 vw和vh適配方法 246
11.3 移動端布局項目實戰——鮮花養護項目 247
11.3.1 項目分析 247
11.3.2 項目開發 248
11.4 本章練習 264
第12章 長頁面布局實戰 265
12.1 UI效果圖 265
12.2 項目搭建 267
12.3 頂部導航 268
12.4 輪播模組 270
12.5 關於我們 272
12.6 產品中心 275
12.7 新聞中心1 278
12.8 新聞中心2 282
12.9 合作夥伴 285
12.10 聯繫我們 288
12.11 尾部連結 293
第13章 回響式布局綜合實戰 297
13.1 項目概述 297
13.1.1 項目分析 297
13.1.2 創建項目目錄 298
13.1.3 添加樣式重置的代碼 298
13.2 項目開發 299
13.2.1 頭部導航和logo部分 299
13.2.2 banner圖模組 302
13.2.3 熱門旅遊模組 304
13.2.4 底部選單效果 309
13.2.5 著作權部分 312
13.3 本章練習 314
參考文獻 315
