iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
自我挑戰組

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

Day17 網頁前端-刻意練習(履歷表#2)

  • 分享至 

  • xImage
  •  

Day17 AC 履歷表#2

https://ithelp.ithome.com.tw/upload/images/20200917/20129161dNxxwGeIWD.jpg
https://ithelp.ithome.com.tw/upload/images/20200917/20129161ncDcWjqzbV.png

簡單小語

發現一個樣板的履歷網站再次練習履歷切版,加深觀念,每一次的切版,每一次的練習,都是成就更好的自己,雖然是簡單樣板,相信持續練習可以快自己排版方向,這次練習都是先將HTML結構寫完後才開始,讓自己練習再寫結構時思考排版方向,RWD成列及各種位置及圖片放置,然後才開始利用CSS樣式,去撰寫成樣板的樣子,或許下一次可以先寫在紙上跑過一遍,再讓自己的透過書寫方式呈現架構進而撰寫,訓練思考及排版模式。

筆記分享

  1. 中線的樣式可以用父層的:before:after來呈現,一開始用子層覺得位置很怪,才恍然大悟啊。
  2. 麵包屑的寬度因為wrapmax-width: 1024px,因此寬度要超出wrap,而我使用超出寬度再移動的方式呈現背景寬度滿版樣式。
  3. 下面排版方式有待檢討,左右的高度無法相同,導致與樣板的樣式有些無差距。
  4. 控制paddingmargin的位置很重要,清楚理解每一個推移對整體版面的影響。
  5. border-bottom是根據padding推移所決定位置,用margin則會無推移效果。
  6. 物件盡量都是會padding去撐開高度避免RWD時的變形。
  7. letter-spacing可以推移字距但無法用text-align:center水平置中。
  8. 此版面練習沒有增添太多動畫及特殊效果,可以嘗試加入提升使用者體驗
  9. 麵包屑中間的”/”使用偽元素製作並用.breadcrumb li + li a::before的方式排除第一個li
  10. 觸摸麵包屑產生放大效果,使用transform:scale()

刻意練習

Practice(200808 Day 17)

樣板來源

Template Source


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


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

尚未有邦友留言

立即登入留言