Day26 六角 RWD #2

簡單小語

這次看到了兩個版型就毫不猶豫合併並且加入最近所學的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)