用HTML css做一个竖的导航条，并放在页面右侧

好的，我来为您解答。您可以按照以下步骤实现：

1. 在HTML中创建一个导航条的容器div，并设置其class为“nav-container”。

<div class="nav-container">
  <!-- 导航条内容在这里添加 -->
</div>

2. 在CSS中设置导航条的样式，包括宽度、高度、背景色、边框等。

.nav-container {
  width: 200px; /* 导航条宽度 */
  height: 100%; /* 导航条高度 */
  background-color: #f5f5f5; /* 导航条背景色 */
  border: 1px solid #ccc; /* 导航条边框 */
  position: fixed; /* 导航条固定在页面右侧 */
  right: 0; /* 导航条距离页面右侧的距离 */
}

3. 在导航条容器内添加导航链接，可以使用ul和li标签来实现。

<div class="nav-container">
  <ul>
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
    <li><a href="#">链接4</a></li>
  </ul>
</div>

4. 在CSS中设置导航链接的样式，包括字体大小、颜色、对齐方式等。

.nav-container ul {
  list-style: none; /* 去掉列表样式 */
  margin: 0; /* 去掉外边距 */
  padding: 0; /* 去掉内边距 */
}

.nav-container li {
  text-align: center; /* 文字居中 */
  margin: 10px 0; /* 设置链接垂直间距 */
}

.nav-container a {
  display: block; /* 设置链接为块级元素 */
  font-size: 16px; /* 设置字体大小 */
  color: #333; /* 设置字体颜色 */
  text-decoration: none; /* 去掉下划线 */
  padding: 10px; /* 设置链接内边距 */
}

这样，一个简单的竖向导航条就完成了。您可以根据需要进行样式和布局的调整。希望对您有所帮助！