今天完成的任务：把任务5的界面做出来

明天的计划：完善任务5，巩固给HTML的层怎么命名ID和类。加强界面布局的知识

遇到的问题：

1、任务五界面的头像图标的背景图，背景自适应。

2、自我介绍模块，随着文字行数增多，“自我介绍和图片 | ”都随着高度而垂直居中。

解决：

1、让背景不平铺，然后加背景的background-size: 100% 100%。

2、使用了弹性盒子，我让包裹层的形状为flex。然后让项目居中对齐。align-items: center;

今天的收获：

1、对背景的知识了解的更加深了一点，懂了background-size的作用。

2、让项目浮动时一定要记得清除浮动，不然时间长了会忘记，影响后续的代码。

3、写代码时，一个块一块的来。而且要想好布局，然后在动手，今天我就犯错了。就一个顶部的“个人主页”。我花了半天搞居中。我都不知道当时我大脑是不是短路。下午我只花了几分钟就知道怎做。拿顶部来说。

我刚开始的思路：一个图片，一个span。因为span不用换行，位置，给图片和span分别搞一个宽%来控制。结果是实现了。结果不用说，肯定是不符合的。

现在的思路：先用一个h3标题，然后背景色，让文字居中。接着在加一个返回的图片。这个图片浮动在左边，然后距离左边的距离。垂直居中就用行高。完了后清除浮动。代码如下图：

<div id="top" class="clear">

            <a href="#"><img src="img/top_back.gif" alt="返回" title="返回" /></a>

            <h3>个人主页</h3>

</div>