前言

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

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

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

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

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

一、这次将要执行的任务

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

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

1.1 让多个块级元素同处一行有许多办法，比如flex，比如inline-block，比如float，比如absolute。希望大家对这些都有所了解，以便更好地处理不同需求。

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

通过之前几个任务所学到的知识，已经可以完成这个页面了。但为什么我们还要设置这个页面呢？因为这个页面更加复杂，让我们有更多的机会，在同一个页面中使用不同的方法来完成页面，也是对前面所学内容的非常好的总结。

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

做这个任务并所需要了解的知识几乎在前面几个任务中都已经提到过，但可能还不够熟练，希望大家在这个任务中不拘泥于某一种方法，多做尝试，进一步深入了解css和布局相关的知识点。所耗费的时间应该不少于2小时。

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

任务的步骤按一般实战步骤设计。首先布局和任务4几乎一样，如果任务4做得好，这里几乎不用改代码就能使用。主体内容部分相对复杂一点，涉及到工作中常见的知识点，如：拉伸图片不变形，垂直居中等。最后大家可能将会花费更多的时间来调试页面，保证在不同分辨率下的正常显示。

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

我们总结了以往师兄们常常遇到的问题，如背景图怎么设置，这个问题应该去详细看一下background的各项属性，特别是background-image,background-position,background-repeat,background-size.

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

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

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

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

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

在这一节里，应该没什么特别困难的地方，基本要求是能完成任务。

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

1.浮动布局的问题

• 难以控制。如果站点上存在一些不可预知的内容，那么布局将变的难以维护。
• 源码顺序依赖。弹性布局依赖于HTML源码，在做响应式设计时将难以为不同的媒体查询变更布局。
• 列等高问题。如果容器中有两到三列不同的内容，并且在任意内容的条件下，都需要设置为相同的高度。浮动布局难以实现这个要求。
• 内容居中。使用浮动布局难以将内容水平且垂直居中。

2.Flex弹性盒子来解决问题

• 通过将弹性元素拉伸或缩小来充满可用空间。
• 给予弹性元素成比例的尺寸。
• 弹性容器内的弹性元素可以从任意方向布局。可以解决在不同媒体查询中元素的顺序问题。使得可见内容的顺序独立于HTML渲染顺序，有利于站点的响应式设计。

3.Flex基本概念

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

4.Flex重点属性

• flex-direction；定义主轴方向。
• flex-grow:定义元素的控件大小
• flex-shrink:以flex-basis为基础，沿主轴方向增长尺寸
• flex-basis:flex-shrink属性处理flex元素收缩的问题
• align-items:可以使元素在交叉轴方向对齐
• justify-content：用来使元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向

四、开始动手做吧

1.（环境搭建）观察任务描述，揣摩开发要点（0.5小时）
2.（知识学习）复习前面任务中所学习到的知识点（2小时）
3.（知识学习）学有余力的情况下可以学习一下《flex》的知识（2小时）
4.（编码实战）首先布局header，让header紧贴顶部（0.5小时）
5.（编码实战）然后布局footer，让footer紧贴底部（1小时）
6.（编码实战）为所要用的背景图、头像、小图标切图（1小时）
7.（编码实战）为主体内容的上半部分布局，注意在不同分辨率下布局不被破坏，且内容始终垂直居中（2小时）
8.（编码实战）为主体内容的下半部分布局，注意在不同分辨率下布局不被破坏，且文字始终垂直居中（2小时）
9.（代码调试）调试代码，使得页面在不同分辨率不同设备上都能正常显示（1.5小时）
10.（知识学习）搜索学习《CSS代码规范》（1小时）
11.（代码重构）根据代码规范优化自己的代码（1小时）
12.（环境搭建）配置nginx的http服务，使本地可以通过配置的域名访问（0.5小时）
13.（环境搭建）上传到学员服务器（0.5小时）
14.（代码调试）使用不同设备访问网址查看页面（0.5小时）
15.（知识学习）完成任务后查看验收标准，确认任务已完成，如果未完成返回相应步骤（0.5小时）
16.（思考答疑）查看深度思考，学有余力的情况下尝试回答深度思考的问题（1小时） 

五、验收自己的成果

1.还原设计图：头部底部固定在屏幕上方和下方2.扩展性：按钮不使用图片3.自适应：适配主流手机屏幕4.兼容性：使用其他浏览器如firefox、IE11+等查看保证展示效果一致

六、来做一次深度思考

1.css可以绘制哪些常见的特殊形状？ 点击查看相关小课堂
2.如何理解vertical-align与line-height？ 点击查看相关小课堂
3.请解释一下CSS3的Flexbox（弹性盒布局模型）以及适用场景？ 点击查看相关小课堂
4.title与h1、b与strong、i与em、img的alt与title、src与href有什么区别 点击查看相关小课堂
5.如何使用IconFont？ 点击查看相关小课堂
6.HTML中dl、ul、ol用哪个比较好？ 点击查看相关小课堂

七、总结自己的知识图谱

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