如果你想要創建一個干凈、現代化的網站導航界面，那么CSS是必不可少的一項技能。下面我們來學習一下如何使用CSS來設計一個網站導航頁面模版。

.nav-menu {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
background-color: #fff;
height: 80px;
padding: 0 30px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.nav-item {
list-style-type: none;
font-size: 16px;
}
.nav-link {
text-decoration: none;
color: #000;
padding: 10px;
transition: all 0.3s ease;
}
.nav-link:hover {
color: #fff;
background-color: #000;
}

以上是CSS代碼，我們通過這個模版可以輕松地創建一個網站導航頁面。下面我們詳細解釋一下這個代碼的每個部分：

.nav-menu：這是整個導航菜單的容器，通過flex布局來使其自適應屏幕大小，同時添加了一些樣式來美化它。

.nav-item：這是每一個導航項的容器，我們通過將其列表樣式設置為none來隱藏列表標志，設置字體大小為16px。

.nav-link：這表示每一個導航項的鏈接，通過text-decoration屬性來去除下劃線，設置顏色為黑色，添加過渡效果。當鼠標懸停在鏈接上時，我們通過:hover偽類來改變字體顏色和背景顏色，從而增強用戶體驗。

以上就是這個CSS網站導航頁面模版的主要代碼和作用。通過這個模版可以為你的網站添加一個簡潔、現代化的導航菜單，幫助用戶輕松地瀏覽網站內容。希望這篇文章對你有所幫助。