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
