鋼琴是一種優美的樂器，能夠創造出華麗的音樂和動人的旋律。在網頁設計中，我們可以使用CSS代碼模擬出鋼琴的外觀和功能。

/* 鋼琴樣式 */
.piano {
width: 500px;
height: 120px;
background-color: #333;
display: flex;
justify-content: space-between;
}
/* 鍵盤樣式 */
.key {
flex-grow: 1;
height: 100%;
box-sizing: border-box;
border: 2px solid #000;
position: relative;
cursor: pointer;
transition: background-color 0.2s;
}
/* 白鍵樣式 */
.white-key {
background-color: #fff;
z-index: 2;
}
/* 黑鍵樣式 */
.black-key {
background-color: #000;
width: 60%;
height: 60%;
z-index: 3;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* 鼠標懸停樣式 */
.key:hover {
background-color: #ddd;
}
/* 活動樣式 */
.active {
background-color: #ffa07a;
}

以上是鋼琴的CSS樣式代碼。我們通過設置鋼琴的寬度、高度和背景顏色，以及鍵盤的大小、邊框和位置等屬性，模擬出鋼琴的外觀。

鋼琴的鍵盤分為白鍵和黑鍵。我們使用伸縮布局和邊框盒模型等CSS技術，將鍵盤布局在鋼琴上，并設置不同的背景顏色和大小，使其看起來更像真正的鋼琴。

最后，我們還可以添加鼠標懸停樣式和活動樣式等交互效果，使鋼琴更加真實、生動。