link實習日誌 20221216

link09:30 整理學習日誌

link10:00 基因網頁

繼續切版。不知為何有一個區塊的寬度會自動變得太寬，需要再調整。

link12:30 午餐

餐廳：飯飯先生

我點了蒲燒先生愛釣魚 $150，內容物有蒲燒鯛魚、炒高麗菜、涼拌毛豆、綜合蔬菜、白飯。

link13:30 回到公司

繼續切版。由於設計稿的寬度是 1920px，我的筆電螢幕寬度是 1366px，所以有些區塊在顯示比例 100% 的狀態下會太寬。

link15:30 有待確認

設計稿的所有內容都已放到網頁上。

希望客戶不會在意第三個區塊的折線圖是用圖片而非真的折線圖。

下周要問導師

• 整個網頁中共有三個按鈕，分別要連結到哪個網址
• 三個按鈕在 hover, active, visited 狀態下，圖示、文字、背景的顏色分別如何設定
• RWD 如何處理

link17:00 背景合併

原本的 HTML 是這樣，前景和背景用區塊分割：

1link<section class="page page1">

2link    <div class="page-background">...</div>

3link    <div class="page-content">...</div>

4link</section>

5link<section class="page page2">

6link    <div class="page-background">...</div>

7link    <div class="page-content">...</div>

8link</section>

這種做法可能出現上下不連續的情況，加上要做手機板，背景要填滿整個網頁。想到自己用小畫家把所有背景合併成一張，再把 HTML 改成

1link<main class="background">

2link    <section class="page page1">...</section>

3link    <section class="page page2">...</section>

4link</main>

進入調整 RWD 設定的階段。下班前上傳目前進度。

link18:30 下班

link本日心得

設計師製作設計稿的時候沒做設計系統和手機版，就等於前端工程師要在腦中產生出設計系統和手機版。有夠麻煩。