CSS是網(wǎng)頁樣式的重要組成部分，其中導航欄是頁面的重要元素之一。針對不同的設計需求，導航欄可以分為橫向導航欄和豎向導航欄。在制作橫豎導航欄時，使用CSS可以輕松實現(xiàn)。

/* 橫向導航欄樣式 */
.navbar {
display: flex; /* flex布局實現(xiàn)橫向 */
justify-content: center; /* 居中對齊 */
background-color: #fff; /* 背景色 */
padding: 10px 0; /* 內邊距 */
}
.nav-item {
margin: 0 10px; /* 項之間的間距 */
}
/* 豎向導航欄樣式 */
.sidebar {
position: fixed; /* 固定在頁面 */
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #333; /* 背景色 */
}
.sidebar ul {
list-style: none; /* 去除列表樣式 */
}
.sidebar li {
padding: 10px; /* 內邊距 */
}
.sidebar a {
color: #fff; /* 鏈接顏色 */
text-decoration: none; /* 刪除下劃線 */
}

可以通過以上CSS樣式在HTML中實現(xiàn)一個簡單的導航欄。對于橫向導航欄，只需將導航項包裹在一個具有flex布局的容器內，并設置居中對齊和背景色、內邊距即可。而對于豎向導航欄，則需要將導航項放在一個具有固定位置的容器內，并設置背景色、內邊距，通過CSS將鏈接的樣式設置成白色并去除下劃線即可。