iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 6

Day6 網頁前端-刻意練習(綜合練習#2)

  • 分享至 

  • xImage
  •  

Day6 金魚 綜合練習#2

https://ithelp.ithome.com.tw/upload/images/20200906/20129161zWDN9z2IOh.jpg
https://ithelp.ithome.com.tw/upload/images/20200906/20129161ZNEjQXvAnO.png

簡單小語

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

筆記分享

  1. 使用:nth-child()可以選擇偶數或奇數的項目,個人覺得十分好用但若將來搭配JavaScript,應該還是要給classid才能讓後端好接(!?)。
  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)


上一篇
Day5 網頁前端-刻意練習(綜合練習#1)
下一篇
Day7 網頁前端-刻意練習(會員登入)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言