中间用斜线分开的CSS菜单导航条

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title > 中间用斜线分开的CSS菜单导航条_网页代码站(www.webdm.cn) </ title >
< style type ="text/css" >
body {
margin : 0 ;
padding : 0 ;
font-family : Verdana, Arial, sans-serif ;
font-size : small ;
}
#header {
padding : 20px ;
background : #333 ;
border-bottom : 1px solid #fff ;
}

#header h1 {
padding : 0 ;
margin : 0 ;
color : #ccc ;
font-size : 180% ;
}

#nav {
float : left ;
width : 100% ;
margin : 0 ;
padding : 0 ;
list-style : none ;
background : #ccc ;
border-bottom : 1px solid #999 ;
}
#nav li {
float : left ;
margin : 0 ;
padding : 0 ;
}

#nav a {
float : left ;
display : block ;
padding : 6px 30px 6px 5px ;
text-decoration : none ;
font-weight : bold ;
font-size : 90% ;
color : #666 ;
background : #ccc url(http://www.webdm.cn/images/20090910/nav_slant.gif) no-repeat top right ;
}
#nav #nav-1 a {
padding-left : 20px ;
}
#nav a:hover {
color : #000 ;
}
</ style >
</ head >
< body >
< div id ="header" >
< h1 > 网页代码站 </ h1 >
</ div >
< ul id ="nav" >
< li id ="nav-1" >< a href ="http://www.webdm.cn" > 网站首页 </ a ></ li >
< li id ="nav-2" >< a href ="#" > CSS教程 </ a ></ li >
< li id ="nav-3" >< a href ="http://www.webdm.cn" > JavaScript点滴 </ a ></ li >
< li id ="nav-4" >< a href ="http://www.webdm.cn" > Ajax拾趣 </ a ></ li >
</ ul >
</ body >
</ html >
< br >
< a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

文章来自：http://www.webdm.cn/webcode/dceda070-918d-4805-9fff-6ddca46b2828.html

转载于:https://www.cnblogs.com/webdm/archive/2011/01/05/1926169.html