頁尾 (Footer)

新提案
→
封閉測試
→
公開測試
→
已穩定

成熟度說明

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

基本頁尾

頁尾提供網站的附加資訊，如版權聲明、聯繫方式或是網站的其他資訊。

HTML

<footer class="footer">
    <div class="width-container">
        <div class="footer-content">
            <div class="footer-logo">
                <img src="https://guide.nics.nat.gov.tw/assets/favicon.png" alt="機構標誌" class="footer-logo-img">
            </div>
            <div class="footer-info">
                <p>服務電話: 02-2739-1000</p>
                <p>傳真電話: 02-2733-1655</p>
                <p>地址: 100057 臺北市中正區延平南路143號4樓</p>
            </div>
        </div>
    </div>
</footer>

頁尾與連結

HTML

<footer class="footer">
    <div class="width-container">
        <div class="footer-support-links">
            <h2 class="visually-hidden">支援連結</h2>
            <ul class="footer-inline-list">
                <li class="footer-inline-list-item"><a class="footer-link" href="#">幫助</a></li>
                <li class="footer-inline-list-item"><a class="footer-link" href="#">Cookies</a></li>
                <li class="footer-inline-list-item"><a class="footer-link" href="#">聯絡</a></li>
                <li class="footer-inline-list-item"><a class="footer-link" href="#">條款和條件</a></li>
            </ul>
        </div>
        <hr class="footer-divider">
        <div class="footer-content">
            <div class="footer-logo">
                <img src="https://guide.nics.nat.gov.tw/assets/favicon.png" alt="機構標誌" class="footer-logo-img">
            </div>
            <div class="footer-info">
                <p>服務電話: <a href="tel:+886-2-2739-1000" class="footer-link">02-2739-1000</a></p>
                <p>傳真電話: 02-2733-1655</p>
                <p>地址: 100057 臺北市中正區延平南路143號4樓</p>
            </div>
            <div class="footer-legal">
                <p>更新日期: 2024/03/13</p>
                <p><a href="#" class="footer-link">隱私權及網站安全政策</a> / <a href="#" class="footer-link">政府網站資料開放宣告</a>
                </p>
                <p>版權所有 © 2024 國家資通安全研究院</p>
            </div>
        </div>
    </div>
</footer>

頁尾與導覽

HTML

<footer class="footer">
    <div class="width-container">
        <div class="footer-navigation">
            <div class="footer-section">
                <h2 class="footer-heading">服務和訊息</h2>
                <ul class="footer-list">
                    <li class="footer-list-item"><a class="footer-link" href="#">服務1</a></li>
                    <li class="footer-list-item"><a class="footer-link" href="#">服務2</a></li>
                    <li class="footer-list-item"><a class="footer-link" href="#">服務3</a></li>
                    <li class="footer-list-item"><a class="footer-link" href="#">服務4</a></li>
                    <li class="footer-list-item"><a class="footer-link" href="#">服務5</a></li>
                    <li class="footer-list-item"><a class="footer-link" href="#">服務6</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h2 class="footer-heading">部門和政策</h2>
                <ul class="footer-list">
                    <li class="footer-list-item"><a class="footer-link" href="#">連結1</a></li>
                    <li class="footer-list-item"><a class="footer-link" href="#">連結2</a></li>
                    <li class="footer-list-item"><a class="footer-link" href="#">連結3</a></li>
                    <li class="footer-list-item"><a class="footer-link" href="#">連結4</a></li>
                    <li class="footer-list-item"><a class="footer-link" href="#">連結5</a></li>
                    <li class="footer-list-item"><a class="footer-link" href="#">連結6</a></li>
                </ul>
            </div>
        </div>
        <hr class="footer-divider">
        <div class="footer-content">
            <div class="footer-logo">
                <img src="https://guide.nics.nat.gov.tw/assets/favicon.png" alt="機構標誌" class="footer-logo-img">
            </div>
            <div class="footer-info">
                <p>服務電話: <a href="tel:+886-2-2739-1000" class="footer-link">02-2739-1000</a></p>
                <p>傳真電話: 02-2733-1655</p>
                <p>地址: 100057 臺北市中正區延平南路143號4樓</p>
            </div>
            <div class="footer-legal">
                <p>更新日期: 2024/03/13</p>
                <p><a href="#" class="footer-link">隱私權及網站安全政策</a> / <a href="#" class="footer-link">政府網站資料開放宣告</a>
                </p>
                <p>版權所有 © 2024 國家資通安全研究院</p>
            </div>
        </div>
    </div>
</footer>