在網頁設計中，標題欄是頁面布局中不可或缺的一部分。標題欄能夠使頁面布局更合理，也能夠使網頁更清晰易讀。在 CSS 中實現標題欄也很簡單，下面我們來介紹一下如何使用 CSS 實現一個豎向的標題欄。

首先，我們需要為標題欄添加一個容器，在 CSS 中使用 div 標簽來實現，如下所示：

<div class="title-container">
<p>標題1</p>
<p>標題2</p>
<p>標題3</p>
<p>標題4</p>
</div>

在上面的代碼中，我們使用 div 標簽來作為標題欄的容器，并為其設置了一個 class 名稱為 "title-container"。在容器中，我們添加了四個 p 標簽來作為標題欄的核心內容。

接下來，我們需要使用 CSS 為標題欄設置樣式。我們可以設置標題欄的背景色、字體大小、字體顏色等等，如下所示：

.title-container {
background-color: #f1f1f1;
width: 120px;
height: 100%;
position: fixed;
top: 0;
left: 0;
padding: 20px;
}
.title-container p {
font-size: 18px;
color: #333;
padding: 10px 0;
cursor: pointer;
}
.title-container p:hover {
background-color: #ddd;
}

在上面的代碼中，我們為標題欄容器設置了一些基本樣式，包括背景色、寬度、高度、定位等等。同時，我們使用 .title-container p 選擇器來設置標題欄中每一個 p 標簽的樣式，包括字體大小、字體顏色、上下內邊距等等。最后，我們還為鼠標滑過標題欄時的效果進行了設置。

有了上述代碼，我們便可以輕松地實現一個豎向的標題欄了。當然，我們還可以根據實際需求進行調整和完善。希望本文能夠對您理解和掌握 CSS 的使用有所幫助。