在網頁設計中，導航欄是非常重要的元素之一，不僅可以增加網頁的美觀度，更可以方便用戶瀏覽網站的不同內容。下面介紹使用CSS樣式制作導航欄的方法，讓您的網頁更加精美。

.nav-menu{
display:flex;/*定義彈性盒子容器*/
justify-content:center;/*子元素在主軸方向上居中*/
align-items:center;/*子元素在交叉軸方向上居中*/
list-style:none;/*去除列表項標志*/
background: #f2f2f2;/*設置背景顏色*/
padding-left:0;/*去除列表項的padding*/
margin:0;/*去除列表項的margin*/
}
.nav-menu li{
margin:0 10px;/*設置列表項間距*/
padding:10px 20px;/*設置列表項內邊距*/
border-radius:25px;/*設置圓角*/
background:#fff;/*設置背景色*/
}
.nav-menu li:hover{
background:#ccc;/*設置鼠標懸停時的背景色*/
}
.nav-menu a{
text-decoration:none;/*去除下劃線*/
color:#333;/*設置文本顏色*/
font-size:16px;/*設置字體大小*/
font-weight:bold;/*設置粗體*/
}

上面的代碼使用了Flex布局，讓導航欄的子元素居中對齊，并對列表項的間距、背景色、字體等進行了設置，其中a標簽的樣式設置可以根據實際需要進行修改。

制作完樣式后，只需在HTML中添加相應的代碼即可生成導航欄，例如：

<ul class="nav-menu">
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">關于</a></li>
</ul>

這樣便能在網頁上生成一個簡單美觀的導航欄了。