导航栏 实现标签之间用竖线“|”分隔的六种写法

导航栏 实现标签之间用竖线“|”分隔的六种写法

html代码：

<div class="navigation-bar">
    <a class="item active" href="#home">首页</a>
    <a class="item" href="#aboutus">关于我们</a>
    <a class="item" href="#service">专业服务</a>
</div>

效果图：

注：a标签设置href="#xxx"后，点击标签可以跳到对应的锚点位置

1、用伪类:before或者:after实现【推荐使用】

.item:before {
  content: "|";
  float: left;
  color: #94959E;
}
//把第一个竖线去掉
.item:first-child:before {
  display: none;
}

优点：方便简洁，只需在样式中加上几行代码控制
缺点：在样式编辑器里监视不到，不便于调试

2、a标签加boder-left实现；

.navigation-bar>a {
  border-left: 1px solid #94959E;
  line-height: 1;
}
.navigation-bar>a:first-child {
  border-left: none;
}

优点：也是只需样式控制
缺点：如果导航栏需要顶部或底部加横划线需求则不适合

3、直接在html上加上“|”：【推荐使用】

<div class="navigation-bar">
    <a class="item active" href="#home">首页</a>|
    <a class="item" href="#aboutus">关于我们</a>|
    <a class="item" href="#service">专业服务</a>|
</div>

优点：直接在a标签后面加上“|”即可
缺点：需每个a标签后面都加

4、使用<span>|</span>：

<div class="navigation-bar">
   <a class="item active" href="#home">首页</a><span>|</span>
   <a class="item" href="#aboutus">关于我们</a><span>|</span>
   <a class="item" href="#service">专业服务</a><span>|</span>
</div>

优缺点：跟3点一样

5、使用div实现：【不推荐使用】

<div class="navigation-bar">
   <a class="item active" href="#home">首页</a><div class="y-line"></div>
   <a class="item" href="#aboutus">关于我们</a><div class="y-line"></div>
   <a class="item" href="#service">专业服务</a><div class="y-line"></div>
</div>

优点：简单粗暴
缺点：需每个a标签后面都加个div，且需要设置样式

6、使用切图；【不推荐使用】

<div class="navigation-bar">
    <a class="item active" href="#home">首页</a><img src="image/xxx.png"/>
    <a class="item" href="#aboutus">关于我们</a><img src="image/xxx.png"/>
    <a class="item" href="#service">专业服务</a><img src="image/xxx.png"/>
</div>

优点：简单粗暴
缺点：需每个a标签后面都加个img，且需要设置样式还有切图