一、今日目標

延續 Day 12「尋找醫師」與「最新公告」區塊的開發，這次繼續完成智慧醫院管理平台首頁最後的 Footer 區塊，並開始檢查整個首頁的版面配置。

前面幾天主要將 Figma 設計逐步轉換成 Angular 的 HTML/CSS，已經建立 Header、Hero、快速服務、尋找醫師與最新公告等區塊。

目前首頁的主要內容已經逐漸完成，因此這次希望先補齊 Footer，再檢查各個區塊之間的排版是否一致。

本次主要目標：

• 完成 Footer 的 HTML/CSS。
• 建立醫院資訊、就醫服務及聯絡資訊區塊。
• 學習使用 CSS Grid 建立多欄式版面。
• 了解 HTML 語意化標籤在 Footer 中的用途。
• 設計 Footer 連結的 Hover 與 Focus 效果。
• 使用 Media Query 調整小螢幕版面。
• 整合首頁各個區塊。
• 檢查首頁與 Figma 設計的差異。

這次主要聚焦在 HTML/CSS 的畫面實作，Footer 內的 Angular 頁面導覽功能會留到後續學習 Router 時再深入介紹。

---

二、首頁目前的開發進度

Day 11 繼續完成快速服務區塊，學習使用 Flexbox 排列多張服務卡片。

Day 12 則實作尋找醫師與最新公告，開始接觸搜尋欄位、科別按鈕、資訊列表與分頁介面的設計。

目前首頁的主要結構：

Home
│
├── Header
│
├── Hero
│
├── Quick Service
│
├── Doctor Search
│
├── News
│
└── Footer

前面幾天主要處理首頁中的各個內容區塊，而這次希望將最後的 Footer 補齊，讓首頁具有完整的開頭、主要內容與結尾。

這也讓我開始思考：

一個網頁不只是把所有區塊做出來，還需要考慮不同區塊之間的視覺一致性，以及整體閱讀順序。

---

三、Footer 的設計思考

在設計 Footer 時，我希望它不只是放置版權資訊，也能提供使用者快速找到醫院相關資訊的入口。

使用者瀏覽到頁面底部時，可能還會想要查詢其他功能，例如：

• 醫院介紹
• 醫療團隊
• 預約掛號
• 就醫須知
• 交通資訊
• 聯絡方式

因此這次將 Footer 分成三個主要區域：

Footer
│
├── 醫院名稱
│
├── 主要資訊區
│   ├── 醫院資訊
│   ├── 就醫服務
│   └── 聯絡資訊
│
└── 底部資訊區
    ├── 網站政策
    └── 版權資訊

1. 為什麼使用多欄式排版？

因為 Footer 需要呈現的資訊比較多，如果全部依照垂直方向排列，可能會讓頁尾變得很長。

因此在桌面版中，我希望將不同類型的資訊分成三欄。

左側放醫院資訊，中間放就醫服務，右側則放聯絡方式。

這樣可以讓使用者快速辨識不同類別的資訊，也能更有效利用頁面寬度。

2. 為什麼使用深色背景？

目前 Footer 使用：

background: #053950;

這個顏色比首頁其他區塊使用的藍色更深。

搭配較淺的文字顏色，可以讓 Footer 與主要內容產生明顯區分。

也希望透過深色頁尾，讓整個首頁在視覺上具有比較明確的結尾。

---

四、建立 Footer 的 HTML 結構

首先使用 HTML 的 footer 元素建立頁尾。

<footer>
  <div class="footer-content">
    <p class="hospital-name">
      康智醫院 SmartCare Hospital
    </p>

    <div class="footer-columns">
      <!-- 醫院資訊 -->
      <!-- 就醫服務 -->
      <!-- 聯絡資訊 -->
    </div>
  </div>

  <div class="footer-bottom">
    <!-- 網站政策與版權資訊 -->
  </div>
</footer>

這次將 Footer 分成兩個主要部分。

footer-content

負責醫院名稱、網站導覽及聯絡資訊。

footer-bottom

負責網站政策連結與版權資訊。

這樣可以將不同用途的內容分開管理，也方便後續使用 CSS 調整排版。

1. 為什麼使用 footer？

footer 是 HTML5 的語意化標籤，通常用來表示頁面或內容區塊的頁尾。

相較於單純使用：

<div class="footer">

使用 footer 可以更明確地表達這個區域的用途。

這次也開始理解：

HTML 語意化標籤不只是為了讓畫面顯示，而是讓網頁結構本身具有明確的意義。

---

五、使用 nav 與 ul 建立 Footer 導覽

Footer 中有兩組主要導覽資訊。

第一組是醫院資訊：

<nav aria-label="醫院資訊">
  <h2>醫院資訊</h2>

  <ul>
    <li><a routerLink="/about">醫院介紹</a></li>
    <li><a routerLink="/doctors">醫療團隊</a></li>
    <li><a routerLink="/news">最新消息</a></li>
    <li>
      <a routerLink="/information" fragment="transport">
        交通資訊
      </a>
    </li>
  </ul>
</nav>

第二組則是就醫服務：

<nav aria-label="就醫服務">
  <h2>就醫服務</h2>

  <ul>
    <li><a routerLink="/doctors">預約掛號</a></li>
    <li><a routerLink="/doctors">醫師查詢</a></li>
    <li><a routerLink="/appointments">我的預約</a></li>
    <li><a routerLink="/information">就醫須知</a></li>
  </ul>
</nav>

1. nav

nav 用來表示網站中的導覽區域。

因為 Footer 的這兩組內容主要提供使用者前往其他頁面的入口，因此使用 nav。

另外加入：

aria-label="醫院資訊"

讓不同導覽區域可以具有清楚的名稱。

2. ul 與 li

這次和 Day 12 最新公告區塊相似，同樣使用清單元素組織內容。

<ul>
  <li>...</li>
</ul>

因為 Footer 導覽本身就是多個連結組成的列表，所以使用 ul、li 比單純排列多個文字更符合內容結構。

3. a

每個選項都使用 a 表示連結。

目前 Angular 模板已使用 routerLink 指定目標頁面。

不過本篇先聚焦在 Footer 的 HTML 結構，實際的 Angular 頁面導覽會在後續文章中介紹。

---

六、使用 address 建立聯絡資訊

除了網站導覽，Footer 也需要提供醫院的聯絡方式。

目前 HTML：

<section aria-labelledby="contact-heading">
  <h2 id="contact-heading">聯絡資訊</h2>

  <address>
    <p>地址：台北市信義區健康路 88 號</p>

    <p>
      電話：
      <a href="tel:+886212345678">
        (02) 1234-5678
      </a>
    </p>

    <p>
      email：
      <a href="mailto:service@hospital.example">
        service@hospital.example
      </a>
    </p>

    <p>門診時間：週一～週五 08:00–17:00</p>
  </address>
</section>

這次使用了之前比較少接觸的 HTML 元素：

<address>

address 適合表示相關聯絡資訊。

另外，電話與 Email 也使用不同的連結格式。

1. tel

<a href="tel:+886212345678">
  (02) 1234-5678
</a>

透過 tel: 可以讓支援撥號功能的裝置開啟電話操作。

2. mailto

<a href="mailto:service@hospital.example">
  service@hospital.example
</a>

透過 mailto: 可以讓瀏覽器嘗試開啟預設的電子郵件應用程式。

這讓我開始了解：

HTML 的連結不一定只能前往其他網頁，也可以連結至電話或電子郵件功能。

目前 Footer 的醫院地址、電話與 Email 為專案展示資料，並非真實醫院的正式聯絡資訊。

---

七、使用 CSS 設定 Footer 的基本外觀

完成 HTML 結構後，接著使用 CSS 調整頁尾樣式。

目前設定：

footer {
  background: #053950;
  color: #d7e9f1;
  padding-top: 28px;
  font-size: 17px;
  line-height: 1.8;
}

1. background

background: #053950;

設定 Footer 的深藍色背景。

2. color

color: #d7e9f1;

設定頁尾文字的主要顏色。

這裡使用較淺的藍白色文字，讓文字能在深色背景中清楚顯示。

3. padding-top

padding-top: 28px;

讓 Footer 最上方保留空間，避免醫院名稱太靠近區塊頂部。

4. line-height

line-height: 1.8;

控制文字的行高。

因為 Footer 有不少導覽連結和聯絡資訊，如果文字排列太密集，會影響閱讀。

因此透過行高增加文字之間的空間。

---

八、使用 max-width 限制 Footer 內容寬度

這次 Footer 同樣使用之前學習過的 max-width。

.footer-content,
.footer-bottom > div {
  max-width: 1180px;
  padding: 0 36px;
  margin: auto;
}

這裡有兩個值得注意的地方。

1. 同時設定兩個選擇器

.footer-content,
.footer-bottom > div

透過逗號可以讓不同的選擇器共用相同的 CSS 設定。

因為 Footer 上半部和下半部都需要相同的最大寬度與左右內距，所以可以集中設定。

這樣就不需要重複寫兩份相同的 CSS。

2. 子元素選擇器 >

.footer-bottom > div

這裡使用 >，表示選取 .footer-bottom 底下的直接子元素 div。

和一般的空格選擇器不同，> 只會選取直接子元素。

這次也開始接觸更明確的 CSS 選擇器寫法。

3. max-width 與 margin

max-width: 1180px;
margin: auto;

和前面搜尋區塊、最新公告的做法相似，讓 Footer 內容在大螢幕中保持適當寬度，並且水平置中。

這樣首頁不同區塊就可以使用相近的內容寬度，讓整體排列更加一致。

---

九、第一次使用 CSS Grid 建立多欄式 Footer

這次最主要的新學習內容是 CSS Grid。

前面幾天主要使用 Flexbox 排列卡片、搜尋欄位和按鈕。

但這次 Footer 需要將三組資訊排列成不同寬度的欄位，因此使用 CSS Grid。

目前 CSS：

.footer-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 2.8fr;
  gap: 36px;
  padding-bottom: 24px;
}

1. display: grid

display: grid;

將 .footer-columns 設定成 Grid Container。

裡面的醫院資訊、就醫服務和聯絡資訊，則會成為 Grid Items。

2. grid-template-columns

grid-template-columns: 1fr 1fr 2.8fr;

這是本次最重要的 CSS 屬性。

它代表將 Footer 分成三個欄位，並且設定欄位的比例。

Footer
│
├── 醫院資訊    1fr
│
├── 就醫服務    1fr
│
└── 聯絡資訊    2.8fr

其中 fr 是 CSS Grid 用來分配可用空間的單位。

這裡總共有：

1 + 1 + 2.8 = 4.8fr

假設扣除欄位間距後，容器剩餘 960px 可供欄位分配。

那麼每個 1fr 約等於：

960 ÷ 4.8 = 200px

三個欄位就會分別是：

醫院資訊：200px
就醫服務：200px
聯絡資訊：560px

這只是一個方便理解比例的假設例子，實際寬度會依照容器大小計算。

因為聯絡資訊通常包含較長的地址、電話與 Email，所以希望右側欄位能占用比較多空間。

3. gap

gap: 36px;

用來設定 Grid 欄位之間的距離。

這次開始理解：

Flexbox 和 Grid 都可以處理版面排列，但當需要明確控制多個欄位的比例時，Grid 會比較適合。

---

十、設定 Footer 文字與連結樣式

完成欄位排列後，接著調整文字與連結的樣式。

1. 醫院名稱

.hospital-name {
  font-size: 27px;
  margin-bottom: 18px;
}

讓醫院名稱比其他資訊更加明顯。

2. 各欄位標題

h2 {
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 22px;
}

這裡使用較小的標題尺寸，因為 Footer 的資訊層級和首頁主要標題不同。

3. 移除清單標記

ul {
  list-style: none;
}

讓導覽連結以文字列表呈現，而不是顯示預設的項目符號。

4. 聯絡資訊間距

li,
address p {
  margin-bottom: 8px;
}

這裡同時選取 li 和 address p，讓導覽列表及聯絡資訊具有一致的下方間距。

5. address 樣式

address {
  font-style: normal;
}

部分瀏覽器會將 address 文字預設顯示為斜體。

但目前 Footer 希望使用一般文字樣式，因此設定：

font-style: normal;

讓聯絡資訊維持正常字型。

---

十一、Footer 連結的 Hover 與 Focus 效果

這次 Footer 中包含許多連結，因此也需要調整連結樣式。

1. 基本連結樣式

a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

這裡使用：

color: inherit;

表示連結文字繼承父元素的文字顏色。

因為 Footer 已經設定：

color: #d7e9f1;

所以連結也可以沿用相同的文字顏色。

2. overflow-wrap

overflow-wrap: anywhere;

這個屬性可以在必要時讓較長的文字於適當位置換行。

例如 Email 或較長的連結文字，在較窄的容器中可能超出欄位。

透過這個設定，可以降低長文字造成橫向溢出的機會。

3. Hover 效果

a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

和 Day 12 的最新公告類似，這次 Footer 連結也使用底線作為 Hover 效果。

當滑鼠移到連結上時，就會出現底線。

4. Focus 效果

a:focus-visible {
  outline-color: #fff;
}

:focus-visible 主要用來在需要顯示焦點提示時套用樣式，例如透過鍵盤 Tab 操作連結。

這裡將焦點外框設定為白色，讓它在深色 Footer 背景上更加明顯。

這次讓我再次了解到：

網頁上的連結不只需要考慮滑鼠 Hover，也需要注意鍵盤操作時的焦點提示。

---

十二、建立 Footer 底部資訊區

除了三欄資訊，Footer 最下方還有網站政策與版權資訊。

目前 HTML：

<div class="footer-bottom">
  <div>
    <nav class="legal" aria-label="網站政策">
      <a routerLink="/privacy">隱私權政策</a>
      <span aria-hidden="true">｜</span>
      <a routerLink="/terms">網站使用條款</a>
      <span aria-hidden="true">｜</span>
      <a routerLink="/accessibility">無障礙網站</a>
    </nav>

    <p>© 2026 SmartCare Hospital</p>
  </div>
</div>

這次將網站政策與版權資訊放在獨立區塊中。

1. 使用邊框分隔 Footer

.footer-bottom {
  border-top: 1px solid #6b8f9f;
  padding: 18px 0;
}

這裡使用：

border-top: 1px solid #6b8f9f;

在 Footer 下半部上方加入分隔線。

讓主要資訊與網站政策、版權資訊之間有比較清楚的視覺區分。

2. 使用 Flexbox 排列政策連結

.legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

這裡沒有使用 Grid，而是使用 Flexbox。

因為網站政策主要是幾個水平排列的短連結，使用 Flexbox 就能完成需求。

另外：

flex-wrap: wrap;

讓連結在空間不足時可以換行。

這次也開始理解：

同一個網頁可以同時使用 Grid 和 Flexbox，不需要只選擇其中一種。

---

十三、使用 Media Query 調整 Footer 手機版

完成桌面版後，接著需要考慮小螢幕的排列方式。

目前使用：

@media (max-width: 700px) {
  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .footer-columns section {
    grid-column: 1 / -1;
  }

  .hospital-name {
    font-size: 22px;
  }

  .footer-content,
  .footer-bottom > div {
    padding: 0 24px;
  }

  h2 {
    margin-bottom: 12px;
  }
}

1. 將三欄改成兩欄

桌面版：

grid-template-columns: 1fr 1fr 2.8fr;

小螢幕：

grid-template-columns: 1fr 1fr;

代表原本三個欄位，改成兩欄排列。

例如：

桌面版

醫院資訊 | 就醫服務 | 聯絡資訊

在較小的畫面中：

手機版

醫院資訊 | 就醫服務

       聯絡資訊

2. 使用 grid-column

.footer-columns section {
  grid-column: 1 / -1;
}

這是這次另一個值得學習的 Grid 屬性。

grid-column 可以控制元素在 Grid 中橫跨哪些欄線。

其中：

1 / -1

表示從第一條欄線延伸到最後一條欄線。

因此聯絡資訊可以橫跨整個 Grid 寬度，而不是只占其中一欄。

3. 調整文字與間距

另外也將：

• 醫院名稱縮小至 22px。
• 左右內距調整為 24px。
• 欄位間距改成 24px。
• 標題下方間距縮小。

這樣可以避免小螢幕的 Footer 內容過度擁擠。

這次也讓我了解到：

RWD 不一定只是將三個欄位全部改成單欄，也可以根據資訊內容與畫面寬度，重新安排 Grid 的欄位結構。

---

十四、開始整合首頁的整體版面

完成 Footer 後，首頁已經具有主要的內容區塊。

目前整體結構：

App
│
├── Header
│
├── Hero
│
├── Quick Service
│
├── Doctor Search
│
├── News
│
└── Footer

這次除了 Footer 本身，也需要開始檢查各區塊之間的版面配置。

1. 檢查標題大小

目前快速服務、尋找醫師及最新公告，都有自己的標題樣式。

需要確認：

• 字體大小是否一致。
• 標題上下間距是否合理。
• 不同區塊的標題是否具有相近的視覺層級。

2. 檢查區塊之間的間距

首頁包含多個不同背景與高度的區塊。

因此需要確認：

• Hero 與快速服務之間的距離。
• 快速服務與尋找醫師之間的銜接。
• 尋找醫師與最新公告之間的距離。
• 最新公告與 Footer 的銜接方式。

3. 檢查背景顏色

目前首頁主要使用白色、淺藍色與深藍色。

例如：

Header          白色
Hero            依 Figma 設計
Quick Service   白色
Doctor Search   淺藍色
News            白色
Footer          深藍色

這樣可以讓首頁不同區塊具有清楚的視覺區分。

不過也需要確認顏色是否符合整體設計風格，避免每個區塊看起來像不同的網站。

---

十五、首頁 RWD 檢查

前面幾天已經分別針對各個區塊加入 Media Query。

例如：

• 快速服務使用 1100px、700px 斷點。
• 尋找醫師使用 600px 斷點。
• 最新公告使用 600px 斷點。
• Footer 使用 700px 斷點。

這次開始需要從「整個首頁」的角度進行檢查，而不是只看單一 Component。

可以測試以下幾種視窗寬度：

畫面寬度	主要檢查項目
1440px	桌面版整體排版
1024px	卡片、搜尋欄位與 Footer 是否擁擠
768px	區塊是否正常縮小或換行
390px	手機版是否產生橫向捲動

其中最需要注意的是：

1. 圖片是否超出容器。
2. 快速服務卡片是否正常排列。
3. 搜尋欄位與按鈕是否完整顯示。
4. 最新公告文字是否能正常換行。
5. Footer 的 Grid 是否按照預期重新排列。

這些項目需要透過瀏覽器實際確認，不能只因為 CSS 已經寫了 Media Query，就認為 RWD 已經完全完成。

---

十六、這次開發需要注意的問題

1. CSS Grid 與 Flexbox 的選擇

前面幾天主要使用 Flexbox，但這次 Footer 改用 CSS Grid。

一開始需要理解兩者的差異。

Flexbox 比較適合控制單一方向的排列，例如導覽列、按鈕或卡片。

Grid 則適合需要控制多個欄位與列的版面。

因此這次使用：

.footer-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 2.8fr;
}

控制 Footer 的三欄比例。

而底部網站政策則使用：

.legal {
  display: flex;
}

控制水平排列。

2. Footer 的預設清單間距

目前使用：

ul {
  list-style: none;
}

移除清單標記。

不過瀏覽器可能仍保留 ul 的預設 padding 或 margin。

因此如果 Footer 的導覽連結出現不符合預期的縮排，就需要檢查清單的預設樣式。

例如可以視需要加入：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

3. 長文字可能影響版面

Footer 的聯絡資訊包含地址與 Email。

如果文字太長，可能會超出 Grid 欄位。

因此目前加入：

overflow-wrap: anywhere;

讓較長的文字在必要時換行。

4. 不同頁面的 Footer 可能不相同

在之前的 Figma 設計中，不同頁面的 Footer 並不完全一致。

因此目前先完成首頁使用的 Footer，不急著要求所有頁面都套用同一個版本。

後續開發其他頁面時，再依照實際需求決定是否共用 Footer，或提供不同樣式版本。

---

十七、這次最大的學習

這次 Footer 的開發，讓我開始接觸之前比較少使用的 CSS Grid。

在前面幾天，我主要使用 Flexbox：

Day 11
Flexbox → 快速服務卡片

Day 12
Flexbox → 搜尋欄位、科別按鈕、公告文字

這次則開始使用：

Day 13
CSS Grid → Footer 三欄排版

也發現 Flexbox 與 Grid 不一定要分開使用。

例如：

Footer
│
├── Grid
│   ├── 醫院資訊
│   ├── 就醫服務
│   └── 聯絡資訊
│
└── Flexbox
    └── 網站政策連結

因此這次讓我理解：

CSS 排版不只是選擇 Flexbox 或 Grid，而是根據內容結構與排列需求，使用適合的工具。

另外，這次也開始使用更多 HTML 語意化標籤，例如 footer、nav、address，讓頁尾不只是具有視覺上的結構，也能更清楚地表達內容的用途。

---

十八、今日學習

本次主要學習：

• 使用 footer 建立網站頁尾。
• 使用 nav 建立導覽區域。
• 使用 ul、li 組織 Footer 連結。
• 了解 address 的用途。
• 學習 tel 與 mailto 連結。
• 第一次使用 CSS Grid 建立多欄式排版。
• 理解 grid-template-columns 與 fr 單位。
• 學習 gap 控制 Grid 間距。
• 使用 grid-column 調整欄位位置。
• 了解 max-width 與 margin: auto。
• 學習 CSS 子元素選擇器 >。
• 使用 overflow-wrap 處理長文字。
• 設計 Hover 與 Focus 樣式。
• 使用 Media Query 調整 Footer 排版。
• 開始從整體首頁角度檢查 RWD。

---

十九、AI 協助

本次主要使用 AI 協助：

• 分析 Footer 的 HTML 結構。
• 理解 footer、nav 與 address 等語意化標籤。
• 協助理解 CSS Grid 的欄位排列方式。
• 解釋 grid-template-columns 與 fr 單位。
• 分析 Grid 和 Flexbox 的差異。
• 理解 grid-column: 1 / -1。
• 檢查 Footer 的 Hover、Focus 與 RWD 設定。
• 協助整理首頁版面檢查項目。

---

二十、今日開發流程

檢視 Figma Footer 設計
          ↓
規劃 Footer HTML 結構
          ↓
建立醫院資訊導覽
          ↓
建立就醫服務導覽
          ↓
加入醫院聯絡資訊
          ↓
使用 CSS Grid 排列三欄
          ↓
設計 Footer 文字與連結
          ↓
建立網站政策與版權資訊
          ↓
使用 Media Query 調整小螢幕
          ↓
整合首頁所有區塊
          ↓
檢查版面與 RWD
          ↓
整理開發紀錄

---

二十一、今日成果

本次主要完成首頁 Footer 的 HTML/CSS 實作，並整理首頁整體版面。

1. Footer

包含：

• 醫院名稱。
• 醫院資訊導覽。
• 就醫服務導覽。
• 聯絡資訊。
• 網站政策連結。
• 版權資訊。
• Hover 與 Focus 樣式。
• 基本 RWD 設計。

實際畫面：

2. CSS Grid

這次使用：

grid-template-columns: 1fr 1fr 2.8fr;

建立桌面版三欄 Footer。

並且透過 Media Query，將較小螢幕的 Footer 調整成兩欄，讓聯絡資訊橫跨整個寬度。

桌面版與手機版比較：

桌面版:

手機版:

3. 首頁整體結構

目前首頁已包含：

SmartCare Hospital
│
├── Header
│
├── Hero
│
├── Quick Service
│
├── Doctor Search
│
├── News
│
└── Footer

首頁主要的 HTML/CSS 區塊已經建立，接下來需要持續檢查整體視覺一致性，以及不同螢幕尺寸下的實際顯示效果。

首頁完整畫面：

---