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