CSS-网站导航栏标题之间的分隔符

在一个网页上，尤其是导航栏文字与文字之间，大多数情况下都会有分隔符，也就是文字之间的一个小竖线，这个小小的分隔符，每个网站都有不同的样式，常用的写法就是用标签的边框，这个写法也比较简单，用起来也方便，但是，却满足不了越来越绚丽的网页，很多情况下用标签的边框是写不出来现有要的样式的，那就需要其他的写法，下面总结一些常见的，如有不足或者错误之处，欢迎大家批评指正。

1、标签边框.

　　这个写法比较简单，不需要额外增加HTML页面的结构，给标签一个左边框或者右边框，用css修饰一下即可。

2、<span>|</span>

　　这种写法就需要额外增加HTML页面结构了，也就是需要添加额外的标签，当然，这个标签不仅限于span，p、i...标签都行，在标签里面写上一个键盘上就有的竖线即可，然后用css修饰一下，这种写法适合一些分隔符较小，而且简单的地方。

3、伪元素

　　很多时候，上面的两种方式并不能满足要求，不管是大小还是位置，都不能随意控制，即使能写出来，也会比较麻烦，这时候，就需要伪元素了。用伪元素的好处就是可以通过css控制位置，大小，样式等，而且代码写起来也简单。

4、背景图片

　　有一些比较华丽的网站，分隔符也是做得很漂亮，各种好看的样子，纯css很多时候就写不出来，而且各个浏览器不同，加载出来的样式也会有些差异，这个时候就需要图片了，将UI设计的图片添加为标签的背景样式，正常格式的图片（如：jpg，png，gif等）在各个浏览器上都是没有兼容问题的，网速好的话，都能加载出一样的样式。

5、代码

　　在阿里巴巴矢量图标库等网站上有很多小图标的代码，自己想要什么样子的，就去上边下载人家写好的，当然了，一些大神也可以自己写，这些都是没问题的。

　　以上是自己在写网页中总结出来的五种常用的方式，写法肯定也不止上边五种，每个人都有自己的习惯，每个网站都有不一样的样式，根据要求按照自己习惯的方式就行，切记，一定要根据产品经理的要求来写。欢迎大家在评论区给出自己的方式。分享知识才有意思！