iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 18
0
自我挑戰組

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

Day18 網頁前端-刻意練習(履歷表#3)

Day18 AC 履歷表#3

https://ithelp.ithome.com.tw/upload/images/20200918/20129161az068RSdfO.jpg
https://ithelp.ithome.com.tw/upload/images/20200918/201291614UMhmbKrFr.png

簡單小語

剛好切到這個版面時學習了基礎Github,因此也把連結放上來,算是小小練習,這個版面一看到就非常吸引我,原因到現在都不知道哈哈,不過現在有慢慢養成一看到版面,就要先想結構如何撰寫,RWD陳列也需考慮,這次主要不要新增太多class,反而是用相同class去達到相同樣式,可以精簡程式碼(不過好像還是很髒就是),善用選取器(感謝Amos老師),可以省去很多class命名,也可以精準選到自己要選的項目,AC課程的練習就到這囉,接下來朝六角學院課程,刻意練習。

筆記分享

  1. width的控制,padding的使用,讓排版推移及位置空間有一致性。
  2. font-awesome物件的位置,不知道為何都靠左,因此故意用padding往左多推了一點。
  3. 這次的border-bottom不用偽元素製作,位置算好,padding推移精確,就可以直接用啦。
  4. 內容的font-awesome則是使用padding向外推後,再用偽元素超出長寬20%製作外框原型。
  5. 製作中線時原本要用.fas做但發現高度不足,因此改用.item製作整條中線。
  6. 穿透時利用各種z-index去判斷顯示順序, .icon .fas::after設成z-index: -1;, .item::after設成z-index: -2
  7. 很久沒寫JQuery加了一個點擊事件,讓點擊到的.item部份物件變色,並會移除silbings的效果。
  8. 利用大量的flex排版(怎麼辦float都不熟),熟悉關念,加強應用。
  9. 相同的class但不同的tag就能避免樣式重複,<div class=”describe”>,<ul class=”describe”>
  10. 點擊事件用.item.active “欲改變物件”,即可以讓JQuery撰寫精簡許多。

刻意練習

Practice(200810 Day 18)

樣板來源

Template Source


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


上一篇
Day17 網頁前端-刻意練習(履歷表#2)
下一篇
Day19 網頁前端-刻意練習(Flex時光屋#1)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言