iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
0
自我挑戰組

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

Day8 網頁前端-刻意練習(簡易表格)

Day8 金魚 簡易表格

https://ithelp.ithome.com.tw/upload/images/20200908/20129161gNf4tkbcnL.jpg
https://ithelp.ithome.com.tw/upload/images/20200908/20129161uA3W5jYQ8E.png

簡單小語

練習表格一開始真的會搞不清楚欄跟列的排序方式,再慢慢練習後終於知道tr,th,td差異處,一開始看出還真的一頭霧水呢,表格不僅僅只是做表格,還記得Amos老師分享過,當你不能使用float,flex,grid排版時,你還能用什麼?就是用table啦,CSS無所不在,在做RWD時也要考慮螢幕寬度調整,這次的表格刻意練習的確又讓我更加深了表格製作,以及細節需注意的部分,另外也自行加了動畫效果(即使很吃效能),繽紛一下畫面,人生就是不斷的切版,不斷的練習。

筆記分享

  1. 須釐清colspanrowspan的差異,合併欄寬或合併列高。
  2. 當所有表格都加上border時,為了避免線條重複,在父層加上border-collapse: collapse,即可消除重複線條。
  3. RWD時的表格需出現bar讓使用者滑動,因此在外層中加入 overflow: scroll,當物件溢出時就會產生bar條。
  4. :nth-child(),非常好用的選取器,可以設定奇數偶數,自訂數列,指定數字,針對有規律的位置做選取並增加CSS樣式。
  5. animation動畫加入linear才不會覺得動畫卡卡的,動得很生硬。
  6. 使用偽元素就可在標題上增加形狀而增加其動畫效果。
  7. 使用.table 包入 table是為了可以更有彈性的修改排版方式。
  8. font-awesome在codepen中要連父層一起選到,不然樣式出不來。
  9. first-child last-child,分別選到第一個及第一個指定標籤。
  10. RWD需注意各尺寸寬度,利用max-width在父層,內層使用%控制寬度。

刻意練習

Practice(200727 Day 8)

首次練習

Practice(200607功課表_1)


2020 iT邦幫忙鐵人賽 Day8 網頁前端-刻意練習(簡易表格)


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

尚未有邦友留言

立即登入留言