凡对复杂问题进行慎重考虑的人都不宜怀有仇恨、激情、愤怒或怜悯，以免受其影响如果视线被这类感情所阻挡，即不易识别正确的事物，此时，任何人都会不再估计热切希望达到的目的与利益。在思想不受阻碍地活动时，它的推理是正确的；但激烈的情绪如果支配了思想，就会成为统辖思想的暴君，而使推理失去力量。

--------盖乌斯·尤利乌斯·恺撒 《论惩处阴谋家》

=======================================================

今天完成的事情：  

1. 学习并实践了position: fixed 在页面中的效果

2. 学习了 z-index 的功能以及效果

3. 学习了@font-face 引入自定义字体

4. 学习了引用外部 .css 样式文件

5. 学习了使用 :before 伪类在一段文字前添加图标，并使用 display: inline-block; 和 vertical-align: baseline; 来调整图标显示以及位置

6. 学习了使用top, left 以及 margin-left 一起居中fixed header中的title (利用margin-left的负值抵消掉元素本身的占位)

7. 学习了去掉button元素自带的阴影及边框等

明天计划的事情：

1. 完成任务5， 整理知识点和思考问题

2. 准备开始做任务6

遇到的问题：              

1. [Unresolved] footer 上两个按钮的排版问题

这个问题有点类似之前两个input之间margin-top与margin-bottom会叠加，导致留白不均匀的问题。查了资料，纵向排版上，不同元素之间的margin是会自动取大值重叠的，而横向上却不会。这种情况下我的两个button之间的空隙总是侧面空隙的两倍，看起来很难看。

我的style:

.fixed-footer {
    background-color: #FFF;
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 5;
}

button {
    margin: 5px 5px;
    border-radius: 5px;
    height: 45px;    
    font-family: "Microsoft YaHei";
    font-size: 18px;
    border-style: solid;
    outline: none;
}

我尝试了把这两个button的父级元素<footer>的宽度缩小，以便将两个按钮往中间“夹”一点，收紧一些。但是效果不好，右边button与页面边界的距离会随着页面宽度的变化而变化，页面宽度很小时会突出右边框，页面宽度很大时又会留白太多。

我想要的效果是，不论页面宽度如何调整，两个按钮之间的距离，和两侧的留白距离始终相等，只有按钮的宽度随动。目前还是没有很好的办法解决这个问题。

2. [Resolved] 居中页面title

居中似乎一直是比较难办的问题，尤其是响应式布局下的居中。。

这个问题实质上没有那么复杂，因为页面title上的“个人主页”字样是position:fixed样式，所以垂直方向上固定死了位置就好，只有水平方向上放大缩小页面的时候才有可能导致元素移位。

在任务4中有类似的需求，当时我仅仅使用了left: 48%（具体值忘记了）来控制title的水平位置。但页面宽度大幅度改变了的时候，这种水平定位就会产生很大的误差。

本任务中我使用了margin-left对元素的水平位置做进一步的限制。先设置left值为50%，然后将margin-left取负值并且为文字元素宽度的一半。举个例子，如下图

这里的个人主页四个字宽度为72px, 那么我的style就设置为

{

    position: fixed;

    top: 12px;

    left: 50%;

    margin-left: -36px;

}

此时的文字元素就恰好在页面的正中心了，并且无论如何增大缩小页面宽度，文字元素都不会发生偏移。

3. [Unresolved] 另一个居中问题

见下图

在右边的文字超过一行时，我想让左边的“自我介绍”部分仍然能保持在上下两条线的中心位置。粗略试了几种方法都没有实现。。 请师兄赐教。。

4. [Resolved] 使用:before给文字前面加图标

这个可能不是必须的，不过个人感觉这样加图标会比较方便，所以专门研究了一下。

例如我想给一个span标签的前面加上图表，效果如下

我只需要添加样式

span:before {

    background: url(../images/loc-icon.png) no-repeat top left /auto 12px;
    content: '';
    display: inline-block;
    vertical-align: -10%;
    display: absolute;
    width: 16px;
    height: 12px;

}

其中background 指定了插入图标的文件位置，重复模式，尺寸等等。

Content是插入文字内容，在这里设置为空即可。

display: inline-block 这个很重要，有了它，图标才乖乖的呆在了文字这一行。如果不设置或者设置为display: block，图标的位置会有比较大的偏差。

vertical-align可以设置为middle, baseline等，也可设置支持负值的百分比来微调图标的垂直位置。

5. [Unresolved] 尺寸问题

这个问题我有点不理解。根据psd文件上的布局尺寸，我做出来的页面尺寸大的离谱，根本支持不了小尺寸的移动设备。参照了任务页面给出的动态图，似乎与psd页面的尺寸设定差得有点远啊。到底应该以哪个为基准呢？ 还是说我有理解错误的地方？ 求指教。

收获：  

需求的页面样式越来越复杂了。。 实现起来有些难度，有很多思考很久还是摸不着头脑的地方。不过大家都是这么过来的，看见这道题的通过率有将近90%，我觉得我不可能是那剩下的10%吧。哈哈。 感谢师兄能够不厌其烦得指导我完成这些题目，再次谢谢我认真负责的好师兄。:D

页面链接我贴在下面了。不要忘了提提意见哈~ 拜谢

<= To Be Continued