Day6 金魚 綜合練習#2

簡單小語

這次的練習花的時間長了點，主要就是各種不規則以及動畫的搭配上，花了較多時間，也練習了OffCanvas，Scroll Top，Lightbox，多加入動畫增添網也風采，刻意練習的情況下也看到了以往沒發現的細節處理，例如時間軸要如何垂直置中對齊(想當初看Amos老師切真的是看得一頭霧水)，現在還是懵懵懂懂，但是如同Alex老師說的，技術是不會騙人的，肯花時間肯努力，就會回饋給你，雖然我還沒背回饋到，但繼續的刻意練習，發現自我短處，修改並修正，接下來要切簡單又實用的練習了哈哈。

筆記分享

1. 使用:nth-child()可以選擇偶數或奇數的項目，個人覺得十分好用但若將來搭配JavaScript，應該還是要給class或id才能讓後端好接(!?)。
2. 利用font-awesome增添網頁觀感，可增加fa-5x,4x,3x直接更改大小。
3. JQuery的控制.parent及.siblings觀念再釐清，才能選到要控制的class。
4. 利用transform:scale()來增添網頁hover到的體驗感。
5. 當使用flex時發現次軸物件高度被佔滿，可使用align-items來更改物件高度，變為自適應模式。
6. 圓形版面的排序及動畫效果，可在思考如何更佳，手機版上看起來不圓(!?)。
7. 訊息交談要左右互換除了使用order外，還可以使用row-reverse來互換。
8. OffCavans需注意雙menu的命名及結構，套用相同css節省程式碼行數。
9. Lightbox的嵌入及使用可參考過往範例，並賦予些參數更改樣式。
10. 時間軸的定位很重要，有定位觀念才能放入相對位置，達到所想要的效果及位置。

刻意練習

Practice(200722 Day 6)

首次練習

Practice(200530_綜合練習#2)

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