頁面地標架構 (Landmark)

  • 新提案
  • →
  • 封閉測試
  • →
  • 公開測試
  • →
  • 已穩定
成熟度說明
  • 新提案：未完成開發、請勿使用。
  • 封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
  • 公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
  • 已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

空白範本

空白範本原始碼。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <link rel="stylesheet" href="https://guide.nics.nat.gov.tw/main.css">
  <link rel="icon" type="image/png" href="">
  <title>空白範本</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <skip-to><a href="#main" class="skip-to">跳至主要內容區</a></skip-to>
  <main id="main"><!-- 內容 -->
</main>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;600;700&display=swap" rel="stylesheet">
</body>
</html>

單欄位範本

單欄位範本原始碼。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <link rel="stylesheet" href="https://guide.nics.nat.gov.tw/main.css">
  <link rel="icon" type="image/png" href="">
  <title>單欄位範本</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <skip-to><a href="#main" class="skip-to">跳至主要內容區</a></skip-to>
  <main id="main"><div class="one-col">
  <header class="site-header">
    <a href="/index.html" class="flex items-center">
      <div class="bg-layer1 w2 mr3" style="aspect-ratio: 1;"><!-- logo --></div>
      <h1>單欄位範本</h1>
    </a>
    <nav aria-label="主要" class="flex gap4 mt4">
      <a href="#">首頁</a>
      <a href="#">關於我們</a>
    </nav>
  </header>
  <main class="site-main" id="main">
    <div class="bg-layer1 mb4" style="aspect-ratio: 24/9;"></div>
    <article class="w-paragraph center">
      <p>感謝您選擇探索我們目前所呈現的內容。我們正在全力開創新的典範，以便為您提供有價值的知識及技術。</p>

      <p>我們的努力不會歇止，我們鼓勵您現在就開始運用這裡提供的資訊和設計。您的參與和意見對我們至關重要，這將有助於我們更進一步，讓政府網站設計原則更加完善。</p>

      <p>我們期待著您的回饋，並感謝您對我們的支持。讓我們攜手合作，共同見證政府網站設計原則的進步和成長。</p>
    </article>

    <div class="three-col mt4">
      <div>
        <div class="bg-layer1" style="aspect-ratio: 1;"></div>

        <a href="#">
          測試連結
        </a>
      </div>
      <div>
        <div class="bg-layer1" style="aspect-ratio: 1;"></div>

        <a href="#">
          測試連結
        </a>
      </div>
      <div>
        <div class="bg-layer1" style="aspect-ratio: 1;"></div>

        <a href="#">
          測試連結
        </a>
      </div>
    </div>
  </main>
</div>
<div class="one-column bg-layer1">
  <footer class="site-footer f6 flex items-center gap4">
    <div class="plain w2 mr3" style="aspect-ratio: 1;"><!-- logo --></div>
    <div class="mw5">
      <a href="/accessibility-statement">親和力宣告</a>
    </div>
  </footer>
</div>
</main>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;600;700&display=swap" rel="stylesheet">
</body>
</html>