蘋果系統的dock欄是一個非常經典的設計，它作為操作系統的一部分，承擔著任務切換、應用程序快速啟動等功能。前端開發中，我們也可以模仿蘋果dock欄的樣式，為網站設計一款獨特的導航欄。

下面我們來看一下如何使用CSS實現蘋果dock欄的樣式。

/* 容器樣式 */
.dock {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
}
/* icon樣式 */
.dock__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; 
}
/* icon圖標樣式 */
.dock__icon img {
width: 30px;
height: 30px;
margin-bottom: 3px;
}
/* icon標簽樣式 */
.dock__icon span {
font-size: 12px;
color: #fff;
}
/* 激活狀態的icon樣式 */
.dock__icon.active {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 30px;
}

通過上述代碼，我們可以實現蘋果dock欄的樣式，將其應用到網頁中，可以為網站增添不少現代感和時尚感。