html制作竖向导航栏间隔竖线

您可以使用CSS中的伪元素:before或:after来实现竖向导航栏间隔竖线的效果。具体实现方法如下：

1. 首先，给导航栏中的每个选项添加一个共同的类名，例如.nav-item。

2. 然后，在CSS中为这个类名添加样式，包括宽度、高度、背景颜色等。

3. 接着，使用:before或:after伪元素来添加竖线。具体实现方法是，设置伪元素的宽度为1px，高度为导航栏选项的高度，背景颜色为竖线的颜色，然后将伪元素定位到导航栏选项的左侧或右侧。

下面是一个示例代码：

HTML代码：

<ul class="nav">
  <li class="nav-item">选项1</li>
  <li class="nav-item">选项2</li>
  <li class="nav-item">选项3</li>
</ul>

CSS代码：

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  position: relative;
}

.nav-item:before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #ccc;
  position: absolute;
  left: -10px;
  top: 0;
}

.nav-item:first-child:before {
  display: none;
}

在上面的代码中，我们使用:before伪元素来添加竖线，将其宽度设置为1px，高度设置为100%（即与导航栏选项的高度相同），背景颜色设置为#ccc。然后，将伪元素定位到导航栏选项的左侧，使用left属性设置偏移量为-10px（即向左偏移10px），top属性设置为0。最后，使用:first-child伪类来隐藏第一个导航栏选项左侧的竖线。