我們都知道，網站的導航欄對于用戶體驗和網站的整體美感有著至關重要的作用。而CSS是當今最流行的樣式表語言，可以用于設計和布局網站的元素。下面我們就來一起看一下如何使用CSS來設計和編寫一個網站的導航欄吧。
首先，我們需要使用HTML來構建導航欄。這里以一個簡單的橫向導航欄為例。代碼如下：

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

這是一個基本的HTML導航欄模板，其中<nav>用來定義導航欄的開始，<ul>代表無序列表，每個列表項<li>則代表一個導航選項，<a>是每個列表項內的鏈接。
接下來，我們需要為導航欄添加CSS樣式。這里我們使用了一些基本的樣式，如文本顏色、文本對齊、背景色等。代碼如下：

nav {
background-color: #333;
}
<br>
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
<br>
nav li {
display: inline-block;
}
<br>
nav a {
color: #fff;
display: block;
padding: 15px;
text-align: center;
text-decoration: none;
}
<br>
nav a:hover {
background-color: #666;
}

在上面的代碼中，我們給導航欄設置了背景色，同時使用了無序列表來為導航選項排版。我們還使用了"display: inline-block"來讓每個導航選項顯示在同一行，同時通過padding來為每個選項添加一定的內邊距。最后，我們為鼠標懸停在選項上時設置了另一種背景色。
最終，我們使用HTML和CSS結合起來構建了一個簡單的橫向導航欄。這只是CSS導航欄的入門教程，后續我們可以在此基礎上添加更復雜的樣式和交互效果。希望這篇文章對初學者有所幫助。