如何给网站导航添加动态分割线

我们来介绍一下如何给自己的导航添加动态分割线，非常实用的教程，我们首先看一下效果：

 。

我们都知道，导航是整个网站非常关键的模块。

每个用户打开你的网站，首先看到的就是导航。可以说，一个用户对整个网站的第一印象是否良好，首要影响因素就是导航的外观。而对于网站所有者来说，导航部分也决定了整个网站的风格。

说了这么多，其实我是要引出下面滴内容：

下面这个就是我们没有添加之前的导航样式，

 ，

是没有中间那小白条的，给人的感觉是界线不够明了清晰。所以后来就给它在中间加了个小白条。由于博客的目录也就是导航要根据增减而相应变化，所以不能采用手动的方式去添加，如果那样就不具备可扩展性啦。

所以我用了几句灰常简单的JQuery代码实现了这个效果：

这样，在每一个导航栏的li之后就添加了一个<span>，如图：

 。

然后在为<span>添加css样式即可：

当博客目录增加或减少的时候，<span>也会相应增加或减少。