yo yo yo~歡迎來到「30天前端設計之旅」的DAY 29！今天我們將學習如何打造更具視覺衝擊力與互動性的網站佈局，包括Pinterest風格的卡片版面、摺疊式選單，以及更具動感的輪播版面。這些設計元素能夠豐富網站的視覺效果，並提升用戶的交互體驗。

D-29的學習目標：

1. Pinterest風格的卡片版面：靈活且動態的展示佈局
   • Pinterest風格的卡片版面採用 Masonry 佈局，能夠將不同大小的內容靈活地排列，實現高度動態的排版效果，常用於圖庫展示或商品列表頁面。
   • 說明：此布局使用 CSS Grid 來實現動態卡片排列。每張卡片自帶間距，能夠適應不同螢幕尺寸，讓頁面看起來更加整潔。

<div class="grid-container">
    <div class="grid-item">卡片 1</div>
    <div class="grid-item">卡片 2</div>
    <div class="grid-item">卡片 3</div>
    <div class="grid-item">卡片 4</div>
    <div class="grid-item">卡片 5</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.grid-item {
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

2. 摺疊式選單：節省空間的導航設計
   • 摺疊式選單（Accordion Menu）可以有效地節省頁面空間，讓用戶只看到當前需要的資訊，特別適合多層級的選單或FAQ頁面。
   • 說明：此選單使用 JavaScript 控制摺疊效果，每次點擊按鈕時，會顯示或隱藏對應內容，適合用於多層級選單或FAQ。

<div class="accordion">
    <div class="accordion-item">
        <button class="accordion-button">選單項目 1</button>
        <div class="accordion-content">
            <p>這是選單項目 1 的內容。</p>
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-button">選單項目 2</button>
        <div class="accordion-content">
            <p>這是選單項目 2 的內容。</p>
        </div>
    </div>
</div>

.accordion-button {
    background-color: #b8a29c;
    border: none;
    padding: 15px;
    text-align: left;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    outline: none;
}

.accordion-content {
    background-color: #f9f9f9;
    padding: 15px;
    display: none;
}

.accordion-button:focus + .accordion-content {
    display: block;
}

3. 輪播版面：增添動感的圖片展示
   • 輪播版面（Carousel）是展示多個圖片或內容的最佳選擇，能夠在有限的空間中呈現更多內容，同時增強網站的動態視覺效果。
   • 說明：使用 Bootstrap 提供的 carousel 元件，實現圖片輪播效果，適合展示多張圖片或內容。可以自定義外觀，如邊框、陰影或過渡效果，讓輪播看起來更具吸引力。

<div id="carouselExample" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="image1.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="image2.jpg" class="d-block w-100" alt="...">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </a>
    <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </a>
</div>

.carousel-inner img {
    border-radius: 10px;
}