垂直分頁導航在網站設計中是一個常見的UI組件。通過CSS樣式，我們可以很容易地實現垂直分頁導航按鈕。在下面的示例中，我們使用了HTML5和CSS3。

/* CSS代碼 */
/* 定義分頁按鈕的樣式 */
.pagination button {
background-color: #f2f2f2;
border: none;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 2px;
cursor: pointer;
border-radius: 5px;
}
/* 定義激活按鈕的樣式 */
.pagination button.active {
background-color: #4CAF50;
color: white;
}
/* 定義禁用按鈕的樣式 */
.pagination button.disabled {
background-color: #ddd;
color: gray;
cursor: not-allowed;
}
/* 定義容器的樣式 */
.pagination {
display: inline-block;
}
/* 垂直排列按鈕 */
.pagination button {
display: block;
}
/* 垂直居中按鈕 */
.pagination button {
margin: 10px 0;
}

以上即是CSS代碼的模板，你可以在示例中自定義樣式以滿足自己的需要。其中，我們主要定義了三種分頁按鈕的樣式：默認按鈕、激活按鈕和禁用按鈕。通過為容器設置display: inline-block;，我們可以讓按鈕在同一行內顯示。而通過將按鈕設置為display: block;，我們可以將它們垂直排列。此外，為了讓按鈕居中，我們設置了margin: 10px 0;，這樣它們就可以在容器內垂直居中了。 下面是一個完整的HTML代碼示例：

«12345678910»

在此示例中，我們定義了一個名為pagination的容器，并使用button元素作為分頁按鈕。其中，disabled樣式的按鈕是不可用的，active樣式的按鈕代表當前頁。通過JavaScript，我們可以方便地實現按鈕的分頁功能。 總之，通過使用CSS樣式，我們可以輕松地創建垂直分頁導航按鈕并實現網站分頁。希望這篇文章對您有所幫助！