CSS是網(wǎng)頁樣式的重要組成部分，其中導(dǎo)航欄是頁面的重要元素之一。針對(duì)不同的設(shè)計(jì)需求，導(dǎo)航欄可以分為橫向?qū)Ш綑诤拓Q向?qū)Ш綑?。在制作橫豎導(dǎo)航欄時(shí)，使用CSS可以輕松實(shí)現(xiàn)。

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

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