垂直分页导航在网站设计中是一个常见的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代码示例：在此示例中，我们定义了一个名为pagination的容器，并使用button元素作为分页按钮。其中，disabled样式的按钮是不可用的，active样式的按钮代表当前页。通过JavaScript，我们可以方便地实现按钮的分页功能。 总之，通过使用CSS样式，我们可以轻松地创建垂直分页导航按钮并实现网站分页。希望这篇文章对您有所帮助！