此編記錄自己從零到全部的實作切版畫面時所碰到的步驟處理及狀況處裡筆記。
Step1：先將得到的設計稿框出HTML的結構
Step2: 將HTML結構寫出來
step3: reset CSS 並設定 common CSS
step4: 開始切版
第一小時紀錄進度(4:30)
第二小時紀錄進度(6:30)
第三小時紀錄進度(7:30)
沒什麼進度，遇到了search icon換位置的問題，
因為上方的按鈕都用絕對定位，但原本將search icon放在一個div.function裏頭，這個div也是絕對定位，導致search icon無法參考頁面最左上角問題(會去參考到div.function)，所以將他移出div.function，才可以參考navbar位置定位，之後畫面縮放，用grid將各個元素位置放進去即可
休息半小時
第四小時紀錄進度(9:00)
還是沒什麼進度，碰到漢堡排點空白處會無法展開menu，後來發現是因為使用了flex box,父層的label變成緊貼LOGO前面，後來研究半天，要先把它換成display: block，然後設定絕對位置到左上角，子層的span線條就會跟著移動，再設定子層為position: relative，偽元素::before ::after就可以調整成absolute後移動位置。
第五小時紀錄進度(10:00)
比較有進度了，目前做到排列T畜產品中，過程中碰到照片超出block，但使用overflow:hidden無法隱藏，後來發現是要設定在block不是設定在圖片上。
第六小時紀錄進度(11:00)
遇到的問題是在衣服照片hover時，要用一個block把兩張圖包起來，然後要疊兩層圖，一張圖不需要設定position，，一張是position:absolute，這時候不需要設定position的這張圖要比設定絕對定位這張來得小，這樣父層才可以設定高度是auto，隨著子元素圖片放大縮小，但是如果放大張的，那小張的那張會蓋不過大張的底圖。父層會根據大張的那張放大縮小。
第七八小時記錄進度(1:00)
完成!
最後footer的元素流動一直搞不定，搞半天後來才發現是自己不小心設定到flex box，但有一個重點要在一次提醒自己並且記清楚，block屬性下的子元素，每多一個元素一定都會自動換行，不需要設定其他CSS屬性，若元素不希望他換行，可以設定display: inline-block; 下個元素就不會換行了，若突然他沒換行，表示父元素絕對有設定到其他display屬性。
另外在最下方的input欄，學到一個新的函式value，calc( value - value)：
此 calc()函數用一個表達式作為它的參數，用這個表達式的結果作為值。這個表達式可以是任何如下操作符的組合，採用標準操作符處理法則的簡單表達式。
+
加法。
-
減法。
*
乘法，乘數中至少有一個是
/
除法，除數（/ 右面的數）必須是
表達式中的運算對象可以使用任意
input欄位的長度，依整體最大寬度的50% - 固定長度，來控制input欄位隨視窗縮放時調整大小。