CSS是一種用來定義網頁樣式的語言。其中非常重要的一部分就是導航欄樣式的設計。在設計導航欄之前，我們需要先了解一些基礎知識。

CSS中有三種常用的選擇器：id選擇器、class選擇器和標簽選擇器。其中標簽選擇器是最常用的一種。

要設計一個基本的導航欄，我們可以把每個選項放在一個li標簽里，再把這些li標簽放在ul標簽里，最后用CSS設置相應的樣式即可。

<ul class="nav-bar">
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">產品中心</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
.nav-bar {
list-style: none;
padding: 0;
margin: 0;
background-color: #0088cc;
}
.nav-bar li {
display: inline-block;
margin-right: 20px;
}
.nav-bar li a {
display: block;
color: #fff;
text-decoration: none;
padding: 10px;
}
.nav-bar li a:hover {
background-color: #005580;
}

上面的代碼展示了一個簡單的導航欄設計。其中ul標簽的class屬性為nav-bar，用來設置整個導航欄的樣式。li標簽用來放置各個選項，a標簽則為其添加超鏈接。CSS中對應的樣式設置了背景色、間距、文字顏色及鼠標懸停時的背景色等。

當然，如果需要更加復雜的導航欄樣式，我們也可以使用其他的選擇器和屬性來定義。例如，使用class選擇器來設置導航欄選項的樣式：

<ul class="nav-bar">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">產品中心</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
.nav-bar li.active a {
background-color: #ff0000;
color: #fff;
}

上述代碼中，我們給當前頁面對應導航欄選項的li標簽添加了active的class，然后使用CSS設置了該選項的背景色和文字顏色。