CSS 水平導航欄是網頁設計中非常重要的元素，它可以讓用戶在多個頁面之間輕松切換。下面是一個簡單的示例，演示如何使用 CSS 創建水平導航欄。

<style>
.navbar {
display: flex;
justify-content: center;
background-color: #333;
}
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
font-size: 18px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
}
</style>
<div class="navbar">
<a href="#" class="active">首頁</a>
<a href="#">新聞</a>
<a href="#">博客</a>
<a href="#">聯系我們</a>
</div>

這段代碼首先定義了一個名為 "navbar" 的 DIV 元素。使用 "display: flex" 屬性把這個元素變成一個彈性容器，可以使 navbar 中的鏈接元素水平排列。通過設定 justify-content 屬性為 "center"，可以使 navbar 中所有的鏈接都水平居中。在背景顏色上使用了深色的灰色，以與頁面區分開來。

添加鏈接元素后，對鏈接樣式進行設置。設置顏色、內邊距和字體大小以自定義鏈接的外觀。當鏈接被鼠標懸停時，使用:hover 偽類來改變它們的外觀。最后，使用.active 類來標識當前頁的鏈接，以使其背景色與其他鏈接不同。

以上就是制作CSS水平導航欄的示例代碼。有了這個代碼，在自己的網站中輕松創建可愛的水平導航欄。