<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="content-type" content="text/htmlcharset=utf-8" />
<title>css各种分割线</title>
<style>
body
{
text-align:center
}
.split-line1
{
border-top:solid 1px #999
width:100%
padding:20px 0px
margin-top:20px
}
.split-line2
{
border-top:dashed 1px #999
width:100%
padding:20px 0px
margin-top:20px
}
.split-line3
{
border-top:dotted 1px #999
width:100%
padding:20px 0px
margin-top:20px
}
.split-line4
{
border-top:double 6px #999
width:100%
padding:20px 0px
margin-top:20px
}
</style>
</head>
<body>
第一部分内容
<div class="split-line1">
实线分割线
</div>
<div class="split-line2">
虚线分割线
</div>
<div class="split-line3">
点状分割线
</div>
<div class="split-line4">
双线分割线
</div>
</body>
</html>
在CSS里设置导航的分割线，首先，一般做导航条，都是通过ul、li来做，将ul包裹在一个div中，然后设置好width和height，分隔线，换个理解，给li一个右边的边框就可以了，通过代码来理解：
<html><head>
<style>
#div1{
width:960px
height:30px
}
#div1 ul li{
float:left
width:60px
height:30px
border-right:1px solid
}
</style>
</head>
<body>
<div id='div1'>
<ul>
<li>muli1</li>
<li>muli1</li>
<li>muli1</li>
<li>muli1</li>
</ul>
</div>
</body>
</html>
设置分割线在我多个的经验施行后，没有一成不变通用的方法，得根据要求采用最适合的。
1、使用字符“|”，适合导航栏间距不一致时，也就是不适合你。
2、采用背景方式，背景图片即是那条间隔线，需要形成jpg、gif、png格式的小图片，在背景里设置居左，并控制一下垂直位移，这样就会出现你第一张图的要求。
3、但最后一项可能会出现没有间隔线的情况，那么就多添加一个空的li或a，这样就多出来一个间隔线，好看。
具体细节需要把握，代码举例：
xlMenu a { background:url(menuLine.gif) no-repeat display:block width:77px text-align:center float:left}.xlMenu a.first { width:43px background:none text-align:left}
效果：
小图标：
很小很小的一条线。。。
