初用響應式與flex佈局

      頁面效果

     這個頁面用了flex佈局實現了水平居中，很是方便。

     除此以外，還用了響應式佈局設計，參考boostrap的柵格化設計，本身寫了CSS，沒有用框架是由於順着別人的思路來製做思惟會被限制，哈哈！

     整個頁面比較簡單，編寫起來難度不大，花費我最長時間的反而是頁腳的分隔水平線。一開始老是和上面的陰影對不齊，總找不到緣由，通過一番折騰以後，終於知道問題所在。對齊的一個原則是要兩個盒子的寬度相同，包括外邊距、內邊距、寬度。若是陰影設置了內邊距，除非水平線規定一個寬度，不然它沒法對齊，不是偏大就是偏小，但限制死寬度顯然不符合響應式佈局的要求。所以，要對齊的陰影不能設置內邊距，這樣width都用百分比才能相等，內邊距能夠交給陰影層包含的下一層盒子的margin來設定。這樣才能達到最終效果。

     又有了一點進步，棒棒噠！

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

    p.s.這個是freecodecamp的其中一個任務，爲了這個任務還特地FQ了，FQ真乃程序員必備技能呀。