Day17 AC 履歷表#2

簡單小語

發現一個樣板的履歷網站再次練習履歷切版，加深觀念，每一次的切版，每一次的練習，都是成就更好的自己，雖然是簡單樣板，相信持續練習可以快自己排版方向，這次練習都是先將HTML結構寫完後才開始，讓自己練習再寫結構時思考排版方向，RWD成列及各種位置及圖片放置，然後才開始利用CSS樣式，去撰寫成樣板的樣子，或許下一次可以先寫在紙上跑過一遍，再讓自己的透過書寫方式呈現架構進而撰寫，訓練思考及排版模式。

筆記分享

1. 中線的樣式可以用父層的:before或:after來呈現，一開始用子層覺得位置很怪，才恍然大悟啊。
2. 麵包屑的寬度因為wrap是max-width: 1024px，因此寬度要超出wrap，而我使用超出寬度再移動的方式呈現背景寬度滿版樣式。
3. 下面排版方式有待檢討，左右的高度無法相同，導致與樣板的樣式有些無差距。
4. 控制padding及margin的位置很重要，清楚理解每一個推移對整體版面的影響。
5. border-bottom是根據padding推移所決定位置，用margin則會無推移效果。
6. 物件盡量都是會padding去撐開高度避免RWD時的變形。
7. letter-spacing可以推移字距但無法用text-align:center水平置中。
8. 此版面練習沒有增添太多動畫及特殊效果，可以嘗試加入提升使用者體驗
9. 麵包屑中間的”/”使用偽元素製作並用.breadcrumb li + li a::before的方式排除第一個li。
10. 觸摸麵包屑產生放大效果，使用transform:scale()。

刻意練習

Practice(200808 Day 17)

樣板來源

Template Source

2020 iT邦幫忙鐵人賽 Day17 網頁前端-刻意練習(履歷表#2)