Web前端开发实战

我国的“十四五”规划纲要专门设置了“加快数字化发展，建设数字中国”篇，并对加快建设数字经济、数字社会、数字政府,营造良好的数字生态作出了明确部署。“数字技术正以新理念、新业态、新模式全面融入人类经济、政治、文化、社会、生态文明建设各领域和全过程，给人类生产生活带来广泛而深刻的影响。”近年来，数字技术创新和迭代速度明显加快，在提高社会生产力、优化资源配置的同时，也带来一些新问题、新挑战，迫切需要对数字化发展进行治理，营造良好的数字生态。这将推动营造开放、健康、安全的数字生态，加快数字中国建设进程。国家对数字化的大力发展，将掀起前端开发的大浪潮，数字中国最终落地项目将以浏览器端的项目为主。基于此，各个企业急需各种掌握前端开发技术的人才，而目前市场上前端技术相关人才又存在较大缺口。《Web前端开发实战》正是在这个背景下创作而成。
《Web前端开发实战》内容
《Web前端开发实战》是一本深入浅出地介绍前端开发技术的书籍，旨在帮助读者快速掌握前端开发相关技术。《Web前端开发实战》详细介绍前端开发的基本知识和具体应用，内容包括HTML网页排版实战、表格案例实战、表单案例实战、CSS布局案例、响应式布局案例、移动端应用开发案例以及综合布局案例等，涵盖前端开发的多个方面。通过《Web前端开发实战》，读者能够更好地掌握前端开发的基本概念和实践技术。
《Web前端开发实战》共分13章，每章由基础理论知识＋实战项目组成，这样的设计能够使读者更好地进行前端开发的入门学习，并在每章的实战项目中，对该章知识点进行巩固，以更系统地掌握所学习的内容。
《Web前端开发实战》目的
通过《Web前端开发实战》的学习，读者可以完成现今前端开发行业中最流行的布局方案及项目开发，并掌握基于HTML5   CSS3的项目开发流程，最终能够独立完成全端项目界面的部署。
适用对象
《Web前端开发实战》可作为前端开发初学者的入门书籍，也可作为前端开发技术人员的实战练习书籍，还可作为高等院校计算机相关专业的教材或教学参考书。《Web前端开发实战》是真正意义上面向零基础的以实操案例为主的入门书籍，学习《Web前端开发实战》不要求读者具备任何编程基础。《Web前端开发实战》每章的实战内容都有详细的步骤讲解，即使读者没有任何编程基础，也可通过学习书中的步骤搭建自己的前端网页，快速掌握前端开发相关技术，并胜任前端项目开发的工作。
《Web前端开发实战》由郭凯任主编，孔繁玉、张有宽任副主编，编写过程中参考了国内外一些相关书籍，谨向这些作者表示诚挚的感谢。由于时间仓促，加之编者水平有限，书中难免存在不足之处，敬请广大读者批评指正。
《Web前端开发实战》PPT教学课件和案例源文件可通过扫描下方二维码下载。
服务邮箱：476371891@qq.com。
 
教学资源

编　者   
2023年3月

随着浏览器性能的不断提升，越来越多的应用从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
 

随着浏览器性能的不断提升，越来越多的应用从C端(客户端)转入了B端(浏览器端)，浏览器Web应用开发需求越来越多，逐渐形成了一个围绕浏览器的完整生态。《Web前端开发实战》通过Web应用开发入门实例，利用HTML5、CSS3系统讲解了Web前端开发中的基础理论知识及项目开发方案。 《Web前端开发实战》共分为13章，内容包括前端开发简介、网页排版实战、表格案例实战、表单案例实战、CSS布局——个人简历制作、个性化的CSS、定位布局、弹性盒子布局、网格布局、响应式布局、移动端布局、长页面布局、响应式布局。 《Web前端开发实战》可作为前端开发初学者的入门书籍，也可作为前端开发工作人员的实战练习书籍，还可作为高等院校计算机相关专业的教材或教学参考书。

● 真正意义上面向零基础的案例实操入门图书。
●  基础理论 实战项目，循序渐进，实用性强。
●  代码详细，分析透彻，扎实培养专业素质。