css用背景图片制作导航栏分割线

html-css026

css用背景图片制作导航栏分割线,第1张

首先，一般做导航条，都是通过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>

<ul>

<li><a>link1</a></li>

<li><a>link1</a></li>

</ul>

li上面加背景图

竖线 理论双来说是我们以为是竖线，其实有可能是键盘上的符号“|”，也有可能是 某一控件（div、span等等）设置宽度为1px，高度比如20px 然后加border或者background做出来的效果。