iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 26
0
自我挑戰組

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

Day26 網頁前端-刻意練習(RWD#2)

Day26 六角 RWD #2

https://ithelp.ithome.com.tw/upload/images/20200926/20129161e8yrifgLyL.jpg
https://ithelp.ithome.com.tw/upload/images/20200926/201291616ZQ7Fqzarf.png

簡單小語

這次看到了兩個版型就毫不猶豫合併並且加入最近所學的JS功能(ToDoList及Time Clock),這個header有些些的難度,導致我在做RWD時有些位置一直看不出他的空間是多少,後來索性用開發者工具一個一個看確認所佔領的空間,然後線上修正,發現這個工具及方式,真的可以有效地查看CSS樣式上的問題,例如這個標籤目前是吃到哪些選取器樣式,才不會再轉換過程中一下亂掉,何況未來若真有幸轉職,想必專案選單的階層數一定是多到爆炸,維護及命名就相當重要了,內容就是練習切三角形並套入所學JS,一天一coding,轉職靠近我。

筆記分享

  1. header套用許多偽元素做效果,例如白色方框,小三角形及*號,善用偽元素真的可以做很多事。
  2. ul裡面再包一層ul需注意包入位置,避免結構錯誤,不要包在a裡面。
  3. 號的控制使用偽元素方式並透過絕對定位調整位置。
  4. 大尺寸將li的空間拿掉在用padding推移左右距離確認位置。
  5. 第一次使用dashed的邊框效果,利用絕對定位抓取上下空間。
  6. 這次用到很多z-index去判斷上下層的優先度。
  7. JS的ToDoList據說是基本功,思考邏輯訓練,確認好要做的事情,在開始撰寫程式,基本上目前都是跟著課程做一遍,自己思考一遍。
  8. Time Clock的時間同步,需載入CDN,用指定語法取得相對時間。
  9. 內容的三角形可以透過item同步設定在分別指定class做顏色差異,減少程式碼。
  10. 使用scope,將程式碼包住避免資源外露遭竄改,養成程式起手式習慣,IIFES立即函式。
(function () {
  $(document).ready(function () {
  $('.btn').on('click',function () {
    $('.icon').toggleClass('active');
    $('table th').toggleClass('active');
  });
 });
})()

刻意練習

Practice(200819 Day 26)

樣板來源

Responsive navigation multilevel
CSS Triangle


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


上一篇
Day25 網頁前端-刻意練習(RWD#1)
下一篇
Day27 網頁前端-刻意練習(RWD#3)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40

尚未有邦友留言

立即登入留言