Web前端開發(fā)實(shí)戰(zhàn)

第1章  前端開發(fā)簡介   1
1.1  前端開發(fā)的前世今生   1
1.1.1  什么是前端開發(fā)   1
1.1.2  前端開發(fā)的發(fā)展歷程   2
1.2  前端開發(fā)工具介紹   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  前端開發(fā)工具的安裝   5
1.3  前端開發(fā)技術(shù)介紹   8
1.3.1  HTML   8
1.3.2  CSS   9
1.3.3  JavaScript   10
1.3.4  前端框架簡介   12
1.4  本章練習(xí)   12
第2章  網(wǎng)頁排版實(shí)戰(zhàn)   13
2.1  HTML文檔的基本結(jié)構(gòu)   13
2.2  HTML標(biāo)簽語法   14
2.2.1  標(biāo)簽類型   14
2.2.2  標(biāo)簽屬性   15
2.3  HTML常用標(biāo)簽   16
2.3.1  標(biāo)題標(biāo)簽   16
2.3.2  段落標(biāo)簽   17
2.3.3  文本格式化標(biāo)簽   17
2.3.4  列表標(biāo)簽   18
2.3.5  圖片標(biāo)簽   22
2.3.6  超鏈接標(biāo)簽   24
2.3.7  注釋標(biāo)簽   26
2.3.8  換行標(biāo)簽   26
2.3.9  水平線標(biāo)簽   27
2.3.10  和標(biāo)簽   27
2.4  標(biāo)簽實(shí)戰(zhàn)   28
2.4.1  項(xiàng)目分析   28
2.4.2  項(xiàng)目開發(fā)   28
2.5  本章練習(xí)   32
第3章  表格案例實(shí)戰(zhàn)   33
3.1  表格元素   33
3.1.1  簡單的表格   33
3.1.2  表格標(biāo)題   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  表格實(shí)戰(zhàn)   45
3.4  本章練習(xí)   54
第4章  表單案例實(shí)戰(zhàn)   55
4.1  表單標(biāo)簽   55
4.1.1  表單標(biāo)簽簡介   55
4.1.2  表單標(biāo)簽的常用屬性   56
4.2  input標(biāo)簽   57
4.2.1  input標(biāo)簽的使用   58
4.2.2  input標(biāo)簽的常用屬性   58
4.3  選擇框   61
4.3.1  單選框   61
4.3.2  復(fù)選框   62
4.3.3  下拉選擇框   62
4.4  多行文本域   63
4.4.1  多行文本標(biāo)簽   63
4.4.2  多行文本域的屬性   64
4.5  表單排版實(shí)戰(zhàn)   64
4.5.1  項(xiàng)目分析   64
4.5.2  項(xiàng)目開發(fā)   64
4.6  本章練習(xí)   68
第5章  CSS布局之個人簡歷制作   69
5.1  基礎(chǔ)選擇器   69
5.1.1  CSS使用方式   69
5.1.2  標(biāo)簽選擇器   72
5.1.3  類選擇器   73
5.1.4  id選擇器   74
5.2  文本屬性   75
5.2.1  文本顏色   75
5.2.2  文本居中   76
5.2.3  文本縮進(jìn)   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項(xiàng)目布局實(shí)戰(zhàn)   84
5.4.1  項(xiàng)目分析   84
5.4.2  項(xiàng)目開發(fā)   84
5.5  本章練習(xí)   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  邊框?qū)挾?  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  背景圖像重復(fù)   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的應(yīng)用   128
6.7  CSS內(nèi)邊距   130
6.7.1  內(nèi)邊距簡寫屬性   131
6.7.2  單邊內(nèi)邊距   132
6.7.3  padding的應(yīng)用   132
6.8  CSS樣式實(shí)戰(zhàn)   134
6.8.1  多彩的邊框   134
6.8.2  不同主題的按鈕   136
6.9  本章練習(xí)   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  使用定位實(shí)現(xiàn)圣杯布局
效果   151
7.7  本章練習(xí)   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項(xiàng)目屬性   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  城市旅游移動端首頁開發(fā)
實(shí)戰(zhàn)   172
8.5  本章練習(xí)   186
第9章  網(wǎng)格布局   187
9.1  網(wǎng)格grid基礎(chǔ)   187
9.1.1  display: grid定義網(wǎng)格布局   187
9.1.2  grid寬與高的設(shè)置   189
9.1.3  子元素在容器中的排列
位置   191
9.2  網(wǎng)格grid屬性   193
9.2.1  網(wǎng)格行、網(wǎng)格列   194
9.2.2  網(wǎng)格間距   197
9.2.3  網(wǎng)格線   199
9.2.4  網(wǎng)格區(qū)域   199
9.3  項(xiàng)目實(shí)戰(zhàn)   200
9.4  本章練習(xí)   207
第10章  響應(yīng)式布局   209
10.1  響應(yīng)式Web基礎(chǔ)   209
10.2  媒體查詢   210
10.2.1  視口   210
10.2.2  媒體查詢屬性語法   210
10.2.3  媒體查詢注意事項(xiàng)   211
10.3  項(xiàng)目實(shí)戰(zhàn)   211
10.4  本章練習(xí)   242
第11章  移動端布局   243
11.1  移動端開發(fā)簡介   243
11.1.1  移動端開發(fā)的相關(guān)
知識點(diǎn)   243
11.1.2  視口   244
11.2  移動端適配方案   245
11.2.1  rem布局的適配方法   245
11.2.2  vw和vh適配方法   246
11.3  移動端布局項(xiàng)目實(shí)戰(zhàn)——
鮮花養(yǎng)護(hù)項(xiàng)目   247
11.3.1  項(xiàng)目分析   247
11.3.2  項(xiàng)目開發(fā)   248
11.4  本章練習(xí)   264
第12章  長頁面布局實(shí)戰(zhàn)   265
12.1  UI效果圖   265
12.2  項(xiàng)目搭建   267
12.3  頂部導(dǎo)航   268
12.4  輪播模塊   270
12.5  關(guān)于我們   272
12.6  產(chǎn)品中心   275
12.7  新聞中心1   278
12.8  新聞中心2   282
12.9  合作伙伴   285
12.10  聯(lián)系我們   288
12.11  尾部鏈接   293
第13章  響應(yīng)式布局綜合實(shí)戰(zhàn)   297
13.1  項(xiàng)目概述   297
13.1.1  項(xiàng)目分析   297
13.1.2  創(chuàng)建項(xiàng)目目錄   298
13.1.3  添加樣式重置的代碼   298
13.2  項(xiàng)目開發(fā)   299
13.2.1  頭部導(dǎo)航和logo部分   299
13.2.2  banner圖模塊   302
13.2.3  熱門旅游模塊   304
13.2.4  底部菜單效果   309
13.2.5  版權(quán)部分   312
13.3  本章練習(xí)   314
參考文獻(xiàn)   315