前端学习：从一个悼念页面开始

前言

有段时间没写点什么了，也确实最近在忙些事情。但是，我一直觉得人吸收知识就像牛吃草一样。先吞下去存储在胃里，然后过段时间再取出来咀嚼几番，最后才能吸收。而我咀嚼的方式就是将学习的东西写出来。首先，原谅我用了个这么高大上的标题。然而，这并不是一篇高屋建瓴的文章。这只是一个前端初学者的学习感悟。最近沉浸在枯燥的数据挖掘算法太久，所以便跳出来寻找其他知识来汲取些“水分”。然后，在Github上无聊翻翻的时候，便对前端技术产生了兴趣。

准备工作

“工欲善其事，必先利其器”。我们学习一门新的技术，当然希望先准备好相应的环境，以及完备的指导资料。打开百度，输入“前端学习”、“html+css+js”什么的就会蹦出一堆学习网站任君挑选。权威点的，像w3school、菜鸟教程什么的，界面也比较清爽，知识与实践配套结合，都很适合初学者学习。但是，我在这里还是要安利另一个学习网站：FreeCodeCamp。这是个Github上的老牌项目了，11万+的Star也充分说明了其受欢迎的程度。感兴趣的同学可以通过这个传送门了解下。

FreeCodeCamp

开始学习

至此，我们正式进入学习阶段。你以为我要照着教程开始教你从标签开始认起了吗？当然不可能。这些FreeCodeCamp上都有。我们直接跳到第一个任务：Build a Tribute Page。相比前面的提示性操作不同，这个任务完全让我们自由发挥。当然，他提供了一个示例页面。参考页面的大致外观可以，但是千万不要直接去看源码！然后你会发现，即使一个简单的静态页面，如何去设计它也是一门艺术。下面我便通过自己的经历来举个例子。
这是官方的样例：

官方样例

这是我的 作品（其实我是个伪歌迷=。=）：

我的作品

是不是看起来差不多，至少在预览效果上来看是这样的。可是，当我兴致冲冲地把我的作品发给朋友看的时候，却显示了一个图歪字斜的乱七八糟的页面（捂脸）。为什么会这样，我们看看两个页面的开头就知道了。
官方的开头：

我的开头：

此外，在图片的引用中，我也没有加入自适应相关的类。所以，相比之下，我对于整个页面布局的设计太简陋了。痛定思痛，我便去查阅了一些相关资料。然后才了解到，W3C组织建议把所有网页上的对像放在一个盒(box)中，也就是我们常说的盒模型。盒模型中主要定义了四个区域：外边距(margin)、边框(border)、内容(content)、内边距(padding)。为了方便理解，我选取了两个图，分别从平面和3D的角度来解析这个盒模型：

平面角度

3D角度

网页的设计不是单单文字、图片的堆砌，它就像人的脸。首先，我们要把五官摆正。然后，我们再去选择使用丹凤眼、柳叶眉和樱桃口等样式组合成一张我们理想的脸。

最后再说几句

学习的过程中一定要有想法！学习的过程中一定要有想法！学习的过程中一定要有想法！（重要的事情说三遍）尤其是在软件这一行，我们应该迫不及待地将学到的东西应用起来。无论是公益性的，还是你准备用来盈利的，只有做出来才会真正有所收获。

以上内容欢迎分享。如需转载，请简信联系。谢谢大家！