最常見的網頁設計要素之一，是頂部導航欄。在網站頁面結構中，頂部導航欄通常用來存放導航鏈接、搜索框以及一些重要功能按鈕等。那么怎么使用CSS來設置頂部導航欄呢？

div {
background-color: #f2f2f2; /* 設置導航欄背景色 */
overflow: hidden; /* 隱藏導航欄溢出內容 */
font-size: 16px; /* 設置導航欄字體大小 */
font-family: Arial, sans-serif; /* 設置導航欄字體類型 */
}
div a {
display: inline-block; /* 設置導航欄鏈接為行內塊元素 */
color: black; /* 設置導航欄鏈接默認顏色為黑色 */
text-align: center; /* 設置導航欄鏈接居中對齊 */
padding: 14px 16px; /* 設置導航欄鏈接內邊距 */
text-decoration: none; /* 取消導航欄鏈接下劃線 */
}
div a:hover {
background-color: #ddd; /* 鼠標懸停時設置導航欄鏈接背景色 */
color: black; /* 鼠標懸停時設置導航欄鏈接字體顏色 */
}

以上代碼中，我們使用了“div”元素來設置導航欄。導航欄中的每個鏈接都使用了“A”元素，通過設置A元素的樣式來改變導航欄鏈接的顏色、文本大小和對齊方式等。此外，在鼠標懸停時，我們使用了hover偽類來修改導航欄鏈接的顏色和背景色。

在具體實現中，我們可以將導航欄鏈接寫在“ul”和“li”元素中，然后通過CSS設置“li”元素的樣式例如：inline-block、float等來實現導航欄水平或垂直布局。

<div>
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯系我們</a></li>
<li><a href="#about">關于我們</a></li>
</ul>
</div>

以上代碼中，我們使用了“ul”和“li”元素來包括導航欄鏈接，在樣式中設置“li”元素為“inline-block”來使導航欄鏈接呈水平排列。

最后，值得一提的是，為了增加網站的用戶體驗和易用性，我們可以在導航欄中添加搜索框、登錄按鈕等功能，來滿足網站不同的需求。