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  和标签   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