今天要在網頁上建立 Music 專輯展示區，因為之前只有文字，我想讓畫面更美觀，也讓使用者知道專輯的樣子，所以想讓專輯變成圖片的形式橫向滑動展示，未來也會製作點擊專輯跳轉到該專輯的歌曲內容。

目標:

1. 每張專輯用一個 卡片 (Card)，卡片內容包括：
   • 專輯圖片
   • 專輯名稱
   • 發行年份
2. 讓卡片可以 左右滑動。
3. 為未來的「點擊跳轉到專輯介紹頁」預留擴充空間。

HTML

說明:

1. <div class="album-section">：整個專輯展示區的區塊。
2. <h2>：專輯區標題。
3. <div class="carousel-container">：輪播容器，用來控制左右箭頭和卡片排列。
4. <button class="carousel-btn left/right">：左右箭頭，點擊可切換專輯。
5. <div class="carousel-track">：卡片的軌道，所有 .album-card 都放在這裡。
6. .album-card：單張專輯卡片，包括圖片、專輯名稱、年份。

CSS

1.專輯區與標題樣式

• background: linear-gradient(...)：給背景漸層色。
• text-shadow：標題文字加上陰影，讓文字更有層次。

2.專輯卡片樣式

• flex: 0 0 auto：卡片不會隨容器縮放。
• transform: scale(0.95)：初始微縮，滑鼠移上去會放大。
• box-shadow：增加立體感。

3.專輯圖片、標題、年份

• object-fit: cover：圖片不會變形。
• overflow: hidden：長標題文字超出部分會隱藏。
• .album-card:hover img {transform: scale(1.05);}：當滑鼠移到整張卡片 (.album-card) 上時，裡面的圖片 <img> 會放大 5%，向圖片浮起來一樣。

4.輪播容器與軌道

• .carousel-track: 是讓卡片水平排列並可以平滑滑動。
• transition: transform 0.5s ease-out：控制卡片切換時動畫更平滑。
• overflow: hidden：確保輪播區不會顯示超出邊界的卡片。