安妞哈塞呦～歡迎來到「30天前端設計之旅」的DAY 28！今天，我們將聚焦於提升用戶體驗的導航設計，學習如何使用麵包屑列表、分頁導覽列以及定義列表版面來優化網站的導覽結構。這些技巧能夠幫助用戶更輕鬆地探索網站，提升整體的可用性與易讀性。

D-28的學習目標：

1. 麵包屑列表：讓導航更清晰
   • 麵包屑（Breadcrumb）是一種階層式的導航系統，讓用戶可以清晰地了解當前所在位置，並快速返回到上一層或更上級的頁面。
   • 說明：麵包屑列表提供多層級的導航提示，用戶可以輕鬆返回上一層。使用 aria-label 屬性確保無障礙支持。

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">首頁</a></li>
        <li class="breadcrumb-item"><a href="#">產品</a></li>
        <li class="breadcrumb-item active" aria-current="page">最新產品</li>
    </ol>
</nav>

.breadcrumb {
    background-color: transparent;
    padding: 8px 0;
    margin-bottom: 16px;
    list-style: none;
}

.breadcrumb-item a {
    text-decoration: none;
    color: #6c757d;
}

.breadcrumb-item.active {
    color: #b8a29c;
}

2. 分頁導覽列：組織大量內容
   • 分頁導覽列（Pagination）可以有效管理大範圍的內容，將它們分成多頁呈現，並讓用戶能夠輕鬆在不同頁面間切換，常見於新聞列表、商品展示等需要分頁的場合。
   • 說明：pagination 是分頁導覽的核心樣式，通過 disabled 和 active 類別控制當前頁面和不可用的狀態，確保導覽體驗清晰簡單。

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="page-item disabled">
            <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

.pagination {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.page-item {
    margin: 0 5px;
}

.page-link {
    color: #6c757d;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #dee2e6;
    border-radius: 5px;
}

.page-item.disabled .page-link,
.page-item.active .page-link {
    background-color: #b8a29c;
    color: white;
    border-color: #b8a29c;
}

3. 定義列表：展示清晰的內容結構
   • 定義列表（Definition List, dl）常用於描述性資料的呈現，能夠讓我們在條目與描述間維持良好的結構，適合用於FAQ頁面或說明頁面。
   • 說明：dl 是定義列表標籤，搭配 dt（定義項）與 dd（定義內容）標籤能夠保持結構清晰。你可以使用 CSS 來自定義字體樣式及顏色，讓列表更加醒目。

<dl class="definition-list">
    <dt>HTML</dt>
    <dd>超文本標記語言，用於創建網頁內容。</dd>
    <dt>CSS</dt>
    <dd>層疊樣式表，用於美化網頁外觀。</dd>
    <dt>JavaScript</dt>
    <dd>前端動態腳本語言，用於增加網站互動性。</dd>
</dl>

.definition-list dt {
    font-weight: bold;
    margin-top: 20px;
    color: #6c757d;
}

.definition-list dd {
    margin-left: 20px;
    color: #343a40;
}