初用响应式与flex布局

      页面效果

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

     除此以外，还用了响应式布局设计，参考boostrap的栅格化设计，本身写了CSS，没有用框架是由于顺着别人的思路来制做思惟会被限制，哈哈！

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

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

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

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