CSS可以幫助我們實現一個漂亮的CentOS導航欄，下面我們來看看具體的實現方法。

首先，我們需要一個HTML結構。這里我們使用一個無序列表來表示導航欄，每個列表項（<li>）代表一個鏈接，每個鏈接里面包含一個文字和一個圖標。

<ul class="navigation">
<li><a href="#"><i class="fa fa-home"></i>首頁</a></li>
<li><a href="#"><i class="fa fa-gear"></i>設置</a></li>
<li><a href="#"><i class="fa fa-envelope"></i>郵件</a></li>
<li><a href="#"><i class="fa fa-file-text"></i>文檔</a></li>
</ul>

接下來就是CSS的任務了。我們首先需要給導航欄設置一些基本樣式，比如說背景顏色，字體大小、顏色和樣式等等。

.navigation {
background-color: #333;
font-family: Arial, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.navigation li {
display: inline-block;
margin: 0;
padding: 0;
}
.navigation li a {
display: block;
color: #fff;
text-decoration: none;
padding: 10px 20px;
}
.navigation li a i {
margin-right: 5px;
}

上面代碼中，我們為導航欄設置了一個黑色的背景，并使用了Arial字體。其中

• list-style: none;
• text-align: center;

的作用是去掉列表項的前導標記，并且讓導航欄的鏈接居中顯示。此外，我們還設置了每個鏈接的文字和圖標之間有一定的距離（.navigation li a i）。

最后，我們可以為當前活動的鏈接添加一個額外的樣式，比如說改變背景顏色或者字體顏色。這樣可以讓用戶更容易地看到他們當前所在的頁面。

.navigation li.active a {
background-color: #fff;
color: #333;
}

上面代碼中，我們為類名為active的列表項的鏈接添加了新的背景和文字顏色。當用戶點擊其中一個鏈接時，我們只需要通過JavaScript來切換當前鏈接的類名即可。