開始做動態周報四屏。
導師傳來訊息"上次你切的表格在這裡,你可以用 chrome 瀏覽器的開發人員選項看一下優化了哪些地方",並附上之前提到過的開發中網頁的連結。我回覆"收到,晚點再檢查"。
有人拿菜單來問要不要一起訂便當,我有訂。
餐廳:菜單沒寫餐廳名稱
我點了檸檬鮭魚飯 $130,內容物有白飯、炒豆干、高麗菜、某種深綠色蔬菜、豆芽菜與金針菇、煎蛋、檸檬片、烤鮭魚。
繼續做動態周報四屏。
完成動態周報四屏並上傳。
導師傳來訊息,說他有寄一份測試的EDM,是我切的版,我可以打開信箱看一下破版情形,在那封信用開發人員選項看一下怎麼優化比較好。如果我要測試的話,可以複製網頁內容貼到信件上,不過要先把圖片路徑都改成伺服器上的路徑才會顯示出來。
打開信件,有很多破版,不過我決定先觀察表格再回來處理。
觀察導師改過的表格,在自己的檔案調整了這些設定:
也補齊上周來不及製作,由導師完成的右上角長條標示。
導師有另外提到,螢幕寬度小於表格寬度就用左右拉動的方式瀏覽,表格下方的卷軸只有在表格被左右拉動的時候才會顯示,如果我有找到持續顯示卷軸或是自己做卷軸的方法,可以再偷偷加上去。
找到自己做卷軸的方法了:Day4-自製網站捲軸(中)_想要更多造型
回來面對動態周報的破版。看起來主要有以下這些問題:
display: flex
相關設定不見了,例如 justify-content
和 align-items
position: absolute
不見了另外發現信件最上方有一行字,"看不到圖片或無法點連結?可點此連結查看官方週報頁面",按下去之後會在新分頁中開啟周報,排版設定完全正確。
拿著筆電去找導師,問上述的問題才知道 EDM 不支援問題 1 和問題 2 的設定,至於問題 3 可以試試看行內寫法 <img width="100px" height="100px">
。
他說 RWD 的做法就是用 CSS @media
和 float
,把水平排列的複數欄位變成垂直排列。
我還有給他看自製網站捲軸的教學,他看過之後讓我去試試看照著教學製作卷軸。
下班前完成一屏的修復破版 + RWD。
做電子郵件好麻煩。