Day5 金魚 綜合練習#1

簡單小語

這次的練習發現許多細節在初學時沒有注意好，例如空間的配置以及padding及margin的應用，如何讓版面排起來增加可閱讀性及舒適度，確實是還需要多加磨練的地方，這次的RWD增加了手機裝置的閱讀性，避免過多的圖文重複出現，因此有稍微衡量過整體閱讀觀感，開始使用JQuery做一些互動效果，插入了animate套件讓網頁互動性增加，header使用了下拉式選單方便手機點選，持續練習，發現過往的不足，修正並思考，每當大尺寸或小尺寸做完都豁然開朗，但過了5分鐘後發現，還有RWD啊大哥，醒醒吧，你還沒做完。

筆記分享

1. 使用transform: translateXY增加hover觸碰後的移動效果。
2. 使用transform: scale(0,1)增加hover觸碰後的移動效果。
3. header及main-footer的search bar需使用flex讓物件彼此沒有空隙。
4. 圖片img的寬度比例大小要多掌握，可用Google開發者工具檢查圖片的尺寸。
5. ::before或::after使用在刻三角形時需注意物件本身寬度，避免使用%跑版，三角形用border-top,bottom,left,right搭配。
6. 圖片交錯交疊時可以使用margin-left-right移動物件產生交疊效果。
7. 使用flex時若需要左右物件互換位置，可用order或flex-direction: row-reverse可以嘗試運用看出差異。
8. 通用格式的More可在父層使用flex後再使用align-self控制自己得位置。
9. flex-grow: 1，自動分配物件的空間，每個物件佔一等分，需先將width = 0讓物件本身沒有寬度(關鍵啊)。
10. 使用animation可多分幾個frame(0%,25%,50%,75%,100%)，嘗試做到細部動畫(雖然我懶只做0%,100%哈哈)。

刻意練習

Practice(200719 Day 5)

首次練習

Practice(200526_綜合練習#1)

2020 iT邦幫忙鐵人賽 Day5 網頁前端-刻意練習(綜合練習#1)