頁首 (Header) 新提案 → 封閉測試 → 公開測試 → 已穩定 成熟度說明 新提案:未完成開發、請勿使用。 封閉測試:開發暫時性完成,可使用。可能仍有親和力或其他使用上問題待透過實測發現。 公開測試:開發暫時性完成,歡迎使用。具有完整親和力報告。 已穩定:開發完成、歡迎使用。應無任何親和力或使用上問題。 基本頁首 頁首包含網站 logo、導覽列,幫助使用者快速了解網站內容和瀏覽不同頁面。 網站導覽 中文 英文 HTML <header class="headerfordemo" data-module="header"> <div class="header-top"> <div class="width-container header-top-container"> <div class="header-actions"> <a href="#" class="header-link small-text">網站導覽</a> <a href="#" class="header-link small-text" lang="zh-TW">中文</a> <a href="#" class="header-link small-text" lang="en">英文</a> </div> </div> </div> <div class="header-divider width-container"></div> <div class="header-bottom"> <div class="width-container"> <div class="header-logo"> <a href="#" class="header-link"> <img src="https://guide.nics.nat.gov.tw/assets/favicon.png" alt="網站標誌" class="header-logotype"> </a> </div> </div> </div> </header> 頁首與導覽列 網站導覽 中文 英文 ≡ Service name 1 Service name 2 Service name 3 網站導覽 中文 英文 HTML <header class="headerfordemo" data-module="header"> <div class="header-top"> <div class="width-container header-top-container"> <div class="header-actions"> <a href="#" class="header-link small-text">網站導覽</a> <a href="#" class="header-link small-text" lang="zh-TW">中文</a> <a href="#" class="header-link small-text" lang="en">英文</a> </div> </div> </div> <div class="header-divider width-container"></div> <div class="header-bottom"> <div class="width-container header-container"> <div class="header-logo"> <a href="#" class="header-link"> <img src="https://guide.nics.nat.gov.tw/assets/favicon.png" alt="網站標誌" class="header-logotype"> </a> </div> <button class="header-menu-button" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">≡</button> <div class="header-content"> <a href="#" class="header-link service-name">Service name 1 </a> <a href="#" class="header-link service-name">Service name 2 </a> <a href="#" class="header-link service-name">Service name 3 </a> <!-- Additional links for mobile view --> <div class="header-additional-links"> <div class="header-divider width-container"></div> <div class="header-actions-row"> <a href="#" class="header-link small-text">網站導覽</a> <a href="#" class="header-link small-text">中文</a> <a href="#" class="header-link small-text">英文</a> </div> </div> </div> </div> </div> </header>