純 CSS 布局是指利用 HTML 與 CSS 來控制頁面元素的位置關系而不需要額外的框架庫來實現布局效果的一種方法。在本文中，我們將介紹如何利用純 CSS 布局來實現一個簡單的首頁導航欄。

首先，我們需要在 HTML 中定義導航欄的結構。在下面的代碼中，我們使用了一個無序列表來實現導航欄菜單項的設置，每個菜單項都是一個列表元素，我們分別使用 a 標簽來實現鏈接。

<ul class="navbar">
<li><a href="#">首頁</a></li>
<li><a href="#">產品介紹</a></li>
<li><a href="#">服務支持</a></li>
<li><a href="#">聯系我們</a></li>
</ul>

接下來，我們使用 CSS 來對導航欄的樣式進行設置。首先，我們為導航欄本身設置了一些基本樣式，包括背景顏色、高度以及文字樣式等。然后，我們使用 display: flex; 配合 justify-content: space-between; 來實現菜單項的水平分布，并使用 align-items: center; 來使菜單項垂直居中。

.navbar {
background-color: #333;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar li {
list-style-type: none;
}
.navbar li a {
color: #fff;
}

最后，我們再添加一些鼠標懸停時的交互效果。當鼠標懸停在菜單項上面時，我們將背景顏色設置為一個稍淺的顏色，同時將文字顏色設置為白色。這樣就可以增加用戶與頁面的交互感受，從而提高用戶體驗。

.navbar li:hover {
background-color: #555;
}
.navbar li:hover a {
color: #fff;
}

綜上所述，我們可以看到如何利用純 CSS 布局來實現一個簡單的首頁導航欄。通過上面的代碼和說明，相信你已經可以理解并運用它了。