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

html代码：

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

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

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

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

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

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

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

4、使用|：

优缺点：跟3点一样

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

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

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

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