初用响应式与flex布局

      页面效果

     这个页面用了flex布局实现了水平居中，非常方便。

     除此之外，还用了响应式布局设计，参考boostrap的栅格化设计，自己写了CSS，没有用框架是因为顺着别人的思路来制作思维会被限制，哈哈！

     整个页面比较简单，编写起来难度不大，花费我最长时间的反而是页脚的分隔水平线。一开始总是和上面的阴影对不齐，总找不到原因，经过一番折腾之后，终于知道问题所在。对齐的一个原则是要两个盒子的宽度相同，包括外边距、内边距、宽度。如果阴影设置了内边距，除非水平线规定一个宽度，否则它无法对齐，不是偏大就是偏小，但限制死宽度显然不符合响应式布局的要求。因此，要对齐的阴影不能设置内边距，这样width都用百分比才能相等，内边距可以交给阴影层包含的下一层盒子的margin来设定。这样才能达到最终效果。

     又有了一点进步，棒棒哒！

     源代码以存放至github备份：https://github.com/yangpeijia/Build-a-Tribute-Page。

    p.s.这个是freecodecamp的其中一个任务，为了这个任务还特意FQ了，FQ真乃程序员必备技能呀。