在網頁設計中，導航欄是非常重要的組成部分，為了讓網站更美觀、易用，我們可以使用CSS來編寫導航欄樣式。

<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">資源</a></li>
<li><a href="#">聯系我們</a></li>
</ul>

首先，我們需要使用一個無序列表（<ul>）來表示導航欄。每個列表項（<li>）代表一個導航菜單，而超鏈接（<a>）則是每個菜單的鏈接地址。

ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
float: left;
}
a {
display: block;
padding: 8px 16px;
text-decoration: none;
color: #333;
}
a:hover {
background-color: #f2f2f2;
}

導航欄的樣式可以通過CSS來定義。使用list-style、padding、margin等屬性取消默認的列表樣式，并使菜單向左浮動，以便在同一行顯示。每個菜單都是一個塊級元素（block element），并設置padding、文字顏色、文字裝飾等樣式。另外，我們添加了鼠標懸停（:hover）效果，當鼠標移動到菜單按鈕上時，背景顏色會改變。

最后，我們可以加入JavaScript腳本，以便在滾動時將導航欄固定在頁面頂部，以保持導航可見。這需要先獲取導航欄元素的位置，通過onLoad事件和onscroll事件來設置固定/非固定狀態。