怎么在CSS里设置导航的分割线

html-css022

怎么在CSS里设置导航的分割线,第1张

设置分割线在我多个的经验施行后,没有一成不变通用的方法,得根据要求采用最适合的。

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}

效果:

小图标:

很小很小的一条线。。。

#welcome ul li em { display:blockfloat:leftheight:7pxmargin:6px 0border-right:1px solid #bcbcbcoverflow:hidden}

#welcome ul li em [选择ID为welcom的容器下ul li 里的em元素为样式试用对象]

display:block[做为块元素显示]

float:left[靠左浮动,默认li元素是列显示,用了float可以让容器在一行内显示]

height:7px[高7像素]

margin:6px 0[子容器距父容器上下边框的距离分别为6像素,等同于margin:6px 0 6px 0]

border-right:1px solid #bcbcbc[容器右边框显示为1像素,实线,颜色为#bcbcbc]

overflow:hidden[超出容易可见面积部分内容不显示]