iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 25
0
自我挑戰組

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

Day25 網頁前端-刻意練習(RWD#1)

Day25 六角 RWD #1

https://ithelp.ithome.com.tw/upload/images/20200924/20129161zsJxxOq1Eu.jpg
https://ithelp.ithome.com.tw/upload/images/20200924/20129161KJ3LdHTYdS.png

簡單小語

一開始看到覺得應該不難,結果RWD直接卡住不知道Table該怎麼排,後來發現參考樣板的方式,利用dataset的方式動態新增資料,然後在RWD時隱藏thead用偽元素呈現dataset樣式,又學了一招,頗有收穫,果然越簡單的樣式隱藏著更多的玄機,後續排版發現空間不足導致內容無法對齊,這時候就靠定位來排版,每次的練習都思考不一樣的做法及樣式,如同先前小語,練習就是要今天比昨天更進步才是,RWD持續學習努力成長。

筆記分享

  1. data-th新增在td中,為的就是在小尺寸顯示可以正常排版。
  2. 重新練習table, thead, tbody, tfoot, tr, th, td,排版及邊框重疊使用collapse處理問題。
  3. 用了許多選擇器:first-child, :last-child, :nth-child,練習選取到想要的th, td
  4. 用了好久不見的animation,還忘記一些參數的使用,linear, infinite, alternate
  5. keyframes name {0%-100%},漸進式的動作使用,自己可以切多個節點。
  6. 一開始有設定th, td的寬度導致版面超寬,後來才改用自適應方式,才讓版面正常些。
  7. JQuery從.click(function(){})改用.on(‘click’,function(){})on可以支援全部JS事件,on可以同時增添兩個事件(‘click mouseover’)
  8. 小尺寸的圓角因為CSS優先權關係,因此在.table中做圓角,讓tr:nth-child背景變透明。
  9. 背景的linear-gradient用上癮,有了配色網站都甭擔心。
  10. JQuery往後起手式改寫scope, IIFES立即函式,保護程式碼,避免濫用。
(function () {
$(document).ready(function () {
   $('.btn').on('click',function () {
   $('.icon').toggleClass('active');
   $('table th').toggleClass('active');
   });
 });
})()

刻意練習

Practice(200818 Day 25)

樣板來源

Responsive Table


2020 iT邦幫忙鐵人賽 Day25 網頁前端-刻意練習(RWD#1)


上一篇
Day24 網頁前端-刻意練習(Off Canvas #3)
下一篇
Day26 網頁前端-刻意練習(RWD#2)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40

尚未有邦友留言

立即登入留言