移动端监听页面关闭事件_【第六课】更复杂的移动端页面

前言

从零开始学前端系列课程，与传统的视频大课堂教学不同，没有填鸭；也普通做练习题的方式不同，没有假想的模拟题。

本课程拆出80个左右必须掌握的技能点，并对其分组，从易到难地列出学习曲线。同时从真实项目中拆解出与技能一一对应的不同难度的任务，通过解决任务来巩固夯实知识。

这就是IT修真院集自适应学习、师兄辅导、在线一站式学习的DWS学习法（Learning by Doing ，Learing by Wrong ,Learning by Share），在实战中学习，在试错中学习，在分享中学习。

经过线下5年多的实践探索，通过21万多篇学习日报，实现了1500余名结业学员99%就业率的教学成果。

从零开始学前端系列课程的任务分为两大部分，从CSS到JS，每一部分大概有15个左右的任务。每个部分分为技能任务阶段和复盘任务阶段，在任务实践中完成从技能学习到项目经验的积累。

---

一、这次将要执行的任务

---

二、为什么要开始这个任务

1.这个任务需要学会什么技能，为什么要优先学习这个技能？

1.1 垂直居中：对一个元素水平垂直居中，在我们的工作中是会经常遇到的，也是CSS布局中很重要的一部分。

1.2 模拟下拉选框：在互联网成熟的今天，大家对网站的要求不仅仅在功能实现上，也开始注重视觉设计，多终端用户体验等等。表单控件是web页面上重要的组成元素，具有非常高的功能性。交互设计师为它设计更加方便的操作方式，视觉设计师也会绞尽脑汁设计出更加夺人眼球的视觉展现。可是由于表单控件自身的局限性，不能很好地自定义外表，所以就诞生了一系列的CSS模拟原生表单元素的方法来给它们穿上美丽的外衣

1.3 制作雪碧图：为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<image>标签，而是CSS Sprite雪碧图、

2.这个任务为什么要用这种方式来设计，有没有其他的可替代的练习方案？

首先垂直居中，网页中大多数内容都遵循某些规则上的对齐，有左对齐右对齐居中对齐，CSS在一开始的设定里可以很方便的横向居中对齐，但由于当时的需求限制，并没有非常方便的垂直对齐方式。在CSS3中使用flex虽然也可以方便的设置，但因为兼容性依旧可能有些问题，在实际工作中依然可能会使用一些比较传统的方式来解决垂直居中的问题，同时在面试里这也是一个非常重要的考点。

其次是模拟下拉选框，因为浏览器原生的下拉选框的样式基本很难符合现在的设计需求，因此一般都会用div+css+js的方式对它进行模拟。

3.做这个任务需要哪些基础知识，需要多久才可以把基础知识完成？

这节内容需要理解一下不同方式解决垂直居中的原理和思路，根据个人的理解力，可能需要耗费1个小时-半天不等。

4.做这个任务设置了哪些具体步骤，为什么这么设计？

这个任务的步骤是先做好准备工作，如环境搭建，切图等，相当于建造房子前先把场地规划好，材料准备好；然后将页面大的布局做好，相当于搭建房屋的大框架；最后将每个部分里的细节填充上去，相当于给房屋框架补上砖墙门窗等。整个流程合理有序。

5.做任务的时候会遇到哪些常见的错误，需要参考什么样的参考资料？

有问题请善用搜索引擎和师兄

6.怎么样才算把这个任务完成了，验收标准为什么要这么制订？

首先还是需要还原设计图，让页面一眼看上去和设计图是基本一致的；其次是改变浏览器宽度，保证页面布局不变；然后是保证在不同分辨率下，上面所用到的图片都不会被拉伸变形；以及各处文字的垂直居中要做好；最后依旧还是代码规范问题

7.整个任务需要多久才可以完成，最快的和最慢的会是多长时间？

我们认为这个任务大概需要20个小时即可完成，但每个人的基础知识学习能力等情况各不相同。对这方面本来就有基础或者是学习能力特别好的好人可能只需10个小时，而初次接触这些内容对这方面不是太敏感的同学则可能要花费长大40小时的时间。时长在这些时间之内都非常正常，如果有远远超出这个时间也未能做出的同学则应该多去请教一下各位完成过任务的师兄们，也许这个时候只需要旁人稍稍提点几句就能获得突飞猛进的进步。

8.如果我在做任务的时候遇到了困难，可以跳过任务中的哪些部分？

在这一节里，应该没什么特别困难的地方，希望所有人都能完成任务。

---

三、学习任务之前要先学会哪些知识点

1.垂直居中

垂直居中是一个必不可少的技能点，实现方法非常多，这里简单介绍一下在不同情况下有以下几种思路：

仅居中元素定宽高适用

• absolute + 负margin
• absolute + margin auto
• absolute + calc

居中元素不定宽高

• absolute + transform
• lineheight
• writing-mode
• table
• css-table
• flex
• grid

2.雪碧图

雪碧图也叫sprite图，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

---

四、开始动手做吧

1.（环境搭建）观察任务描述，揣摩开发要点（0.5小时） 
2.（环境搭建）配置本地nginx，本地启动服务器通过配置的域名访问新创建的页面（1小时） 
3.（编码实战）为所要用的背景图、头像、小图标切图（1小时） 
4.（知识学习）搜索学习——《CSS Sprite雪碧图》（1小时） 
5.（编码实战）将需要用到的小图标制作成雪碧图在之后使用（0.5小时） 
6.（编码实战）首先布局header，让header紧贴顶部（0.5小时） 
7.（编码实战）布局列表头，让列表头紧贴header（0.5小时） 
8.（编码实战）然后布局footer，让footer紧贴底部（1小时） 
9.（编码实战）布局列表主体部分，高度始终在列表头和footer之间，超出部分自动出现滚动条（1小时） 
10.（编码实战）给header添加居中的按钮组，居右的图标按钮（1小时） 
11.（知识学习）通过搜索引擎查看如何用css模拟下拉框（1小时） 
12.（编码实战）将列表头分做3列，分别模拟3个下拉选框（2小时） 
13.（编码实战）给footer添加3个按钮（1小时） 
14.（编码实战）制作列表主体，注意垂直居中，如果屏幕过窄时，设置左边的文字被截断出现”…”省略号（4小时） 
15.（代码重构）根据代码规范优化自己的代码（1小时） 
16.（环境搭建）上传到学员服务器（0.5小时） 
17.（代码调试）使用不同设备访问网址查看页面（0.5小时） 
18.（思考答疑）查看深度思考，学有余力的情况下尝试回答深度思考的问题（1小时） 
19.（思考答疑）写日报总结学到的知识点和难点是如何解决的，完成后提交审核（1小时） 

五、验收自己的成果

1.顶部底部固定在屏幕上方下方
2.自适应布局，在主流手机中都可以显示
3.当屏幕过小时，表格内容大小能根据屏幕改变。
4.以bootstrap作为基础布局，添加自定义样式表对bootstrap无法表达的细节样式进行调整

六、来做一次深度思考

1.去除inline-block间距有哪几种方法？ 点击查看相关小课堂
2.css有哪些属性可以继承？ 点击查看相关小课堂

七、总结自己的知识图谱

总结任务中遇到的问题困惑和疑难，用自己的语言将学到的知识记录下来