CSS導航欄是Web設計中經常使用的一個元素，用于導航網站的各種頁面和功能。在設計中，我們可以通過水平和垂直兩種方式來排列導航欄。而這些方式的實現，都可以通過CSS來完成。

/* 水平導航 */
.nav-horizontal {
display: flex;
justify-content: center;
align-items: center;
}
.nav-horizontal li {
margin-right: 20px;
}
/* 垂直導航 */
.nav-vertical {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.nav-vertical li {
margin-top: 10px;
}

要實現水平導航，我們需要將導航欄容器的display屬性設置為flex，并使用justify-content和align-items屬性來居中對齊每一個導航項。而在導航項的樣式中，只需要設置一定的間距即可。

而對于垂直導航，我們同樣需要將容器的display屬性設置為flex，但是需要在flex-direction屬性中指定為column，這樣就能實現縱向排列的效果。在導航項的樣式中，我們同樣需要設置間距，但是需要將間距設置在上方，以保證導航項之間的距離。

通過以上的CSS樣式，我們可以輕松地實現水平和垂直兩種方式下的導航欄，從而構建出美觀實用的網站。