iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
0
自我挑戰組

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

Day4 網頁前端-刻意練習(稀飯版+蓋版廣告)

Day4 金魚 稀飯版+蓋版廣告

https://ithelp.ithome.com.tw/upload/images/20200904/20129161fgB1VBZW3E.jpg
https://ithelp.ithome.com.tw/upload/images/20200904/20129161so1fgB8bEW.png

簡單小語

這次多練習了偽元素beforeafter,還記得當初看到Amos老師用這個功能,真的是一頭霧水看不懂,也很好奇這到底是什麼,是真的一臉黑人問號跟心理海枯石爛,完全看到烏托邦世界一樣的無語,後續發現真的很好用也很實用(各種奇怪樣式都做出來),搭配上定位功能,幾乎可以做各種延伸應用,也順便開端一下JQuery,比起JavaScript稍微好懂一點,事件的觸發及結束,刻意練習就是審視過去自己的撰寫方式,正視現在自己的製作方式與差異,從刻意練習發現更多自己不熟悉的地方,更多需要改善的地方,小魯有天也能變大魯(喂喂喂ing)。

筆記分享

  1. RWD還是得做(必備技能,從手機(320px)開始延伸到電腦(960px))。
  2. beforeafter的使用,更加了解其應用及延伸方式,無中生有太牛逼啦!!!。
  3. 綜合position fixed + relative + absolute製作的蓋版廣告,我定你你定他他定視窗。
  4. hover可以利用消失出現的方式帶入些微動畫(.slogan .h2)
  5. 這次將手機版logo放置正中間,須留意lia的空間排版。
  6. 麵包屑應用,間格位置算好即可使用beforeafter新增內容,你看看想生就生出來。
  7. 這次比Day 3更重視每個元素的paddingmargin的使用,細心再細心(雖然還是頗醜)。
  8. flexjustify-contentalign-item,釐清主軸對齊,次軸對齊當然還有資料流向。
  9. 蓋版廣告記得要讓使用者可以關掉(關不掉怎麼看謎片….玄謎的影片啦!!!),符合正常使用情境(使用什麼?)。
  10. max-width: 1024px,讓縮放時可以自適應延伸(看應用使用%max)。

刻意練習

Practice(200715 Day 4)

首次練習

Practice(200521_稀飯版+蓋版廣告)


2020 iT邦幫忙鐵人賽 Day4 網頁前端-刻意練習(稀飯版+蓋版廣告)


上一篇
Day3 網頁前端-刻意練習(稀飯版)
下一篇
Day5 網頁前端-刻意練習(綜合練習#1)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40

尚未有邦友留言

立即登入留言