在這篇文章中，我們將介紹一個音樂商店 CSS 的案例。該網站由 HTML、CSS 和 JavaScript 組成，但本文重點關注 CSS 部分。

.header {
background-color: #1E90FF;
color: white;
padding: 20px;
}
.navbar {
background-color: #FA8072;
color: white;
display: flex;
justify-content: space-around;
padding: 10px;
}
.hero-image {
background-image: url("music_bg.jpg");
background-size: cover;
height: 400px;
position: relative;
}
.text-block {
background-color: rgba(0,0,0,0.5);
color: white;
left: 50%;
padding: 20px;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
}
.featured {
display: flex;
justify-content: space-around;
margin: 50px 0;
}
.featured img {
height: 200px;
width: 200px;
}
.featured p {
color: #1E90FF;
font-size: 20px;
margin: 10px 0;
text-align: center;
}
.product {
border: 1px solid grey;
margin: 10px;
padding: 10px;
text-align: center;
width: 200px;
}
.product img {
height: 100px;
width: 100px;
}
.product p {
margin: 10px 0;
text-align: center;
}

這段代碼包含了整個音樂商店網站的 CSS 樣式，如頭部、導航欄、主圖、產品展示等等。通過定義不同的 CSS 類，可以使所有網站頁面具有統一的樣式風格，且易于維護。

例如，導航欄的樣式定義了背景顏色、字體顏色、彈性布局和內邊距。主圖的樣式定義了背景圖像、透明度和文本塊的位置。而產品展示樣式定義了邊框、邊距、寬度和高度。

在整個網站中使用 CSS，可以使網站看起來更加專業化和規范化。不同的網頁可以擁有相同的樣式，提高了整體網站的質量和用戶體驗。