今天我們來學習一下如何實現一個導航欄豎著排列的效果。首先我們需要用HTML構建出導航欄的結構，代碼如下：

<div class="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">娛樂</a></li>
<li><a href="#">體育</a></li>
<li><a href="#">科技</a></li>
</ul>
</div>

其中，nav是導航欄的容器，ul和li是用來構建菜單項的。接下來，我們需要用CSS樣式來控制導航欄的樣式，代碼如下：

.nav {
width: 100px;
height: 300px;
background-color: #ccc;
position: fixed;
top: 50%;
left: 0;
margin-top: -150px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
text-align: center;
width: 100%;
height: 60px;
line-height: 60px;
}
a {
text-decoration: none;
color: #333;
display: block;
}

上面的代碼中，我們首先定義了.nav的樣式，包括寬高、背景顏色和固定定位等屬性。同時我們使用了top和margin-top來使其垂直居中。而ul和li的樣式則主要用來控制菜單項的樣式，包括寬高、字體行高等。最后我們為a標簽設置了樣式，包括去掉下劃線和設為塊級元素等屬性。 最后，我們得到了一個豎著排列的導航欄效果，同時也可以通過CSS樣式調整導航欄的樣式和布局。