像Vista系统的纯CSS导航条

代码简介：非常漂亮的一个类似仿Vista风格的CSS菜单，这是纯CSS代码实现的哦，而且效果超不错，不过用了很多图片，请顺着图片地址下载下来，一次付出，以后就可以随便用了，感觉很酷的菜单。

代码内容：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" >
< head >
< title > 像Vista系统的纯CSS导航条_网页代码站(www.webdm.cn) </ title >
< style type ="text/css" >
.pro15 { padding : 0 0 0 20px ; margin : 0 ; list-style : none ; height : 30px ; background : #1841c8 url(http://www.webdm.cn/images/20090910/pro_15_0.gif) ; }
.pro15 li { float : left ; }
.pro15 li a { display : block ; float : left ; height : 30px ; line-height : 30px ; background : url(http://www.webdm.cn/images/20090910/pro_15_0.gif) ;

color : #ddd ; text-decoration : none ; font-family : arial, verdana, sans-serif ; text-align : center ; padding : 0 0 0 10px ; cursor : pointer ; font-size : 11px ; }
.pro15 li a b { float : left ; display : block ; background : url(http://www.webdm.cn/images/20090910/pro_15_0.gif) right top ; padding : 0 16px 0 8px ; }
.pro15 li.current a { color : #fff ; background : url(http://www.webdm.cn/images/20090910/pro_15_2.gif) ; }
.pro15 li.current a b { background : url(http://www.webdm.cn/images/20090910/pro_15_2.gif) no-repeat right top ; }
.pro15 li a:hover { color : #fff ; background : url(http://www.webdm.cn/images/20090910/pro_15_1.gif) ; }
.pro15 li a:hover b { background : url(http://www.webdm.cn/images/20090910/pro_15_1.gif) no-repeat right top ; }
.pro15 li.current a:hover { color : #fff ; background : url(http://www.webdm.cn/images/20090910/pro_15_2.gif) ; cursor : default ; }
.pro15 li.current a:hover b { background : url(http://www.webdm.cn/images/20090910/pro_15_2.gif) no-repeat right top ; }
.pro15 li a em { display : block ; float : left ; width : 16px ; height : 30px ; }
.pro15 li a em.home { background : url(http://www.webdm.cn/images/20090910/home2.gif) no-repeat center center ; }
.pro15 li a em.calendar { background : url(http://www.webdm.cn/images/20090910/events.gif) no-repeat center center ; }
.pro15 li a em.camera { background : url(http://www.webdm.cn/images/20090910/camera.gif) no-repeat center center ; }
.pro15 li a em.find { background : url(http://www.webdm.cn/images/20090910/find.gif) no-repeat center center ; }
.pro15 li a em.contact { background : url(http://www.webdm.cn/images/20090910/contact.gif) no-repeat center center ; }
.pro15 li a em.search { background : url(http://www.webdm.cn/images/20090910/search.gif) no-repeat center center ; }
</ style >
</ head >
< body >

< ul class ="pro15" >
< li >< a href ="http://www.webdm.cn" >< em class ="home" ></ em >< b > 网页代码站 </ b ></ a ></ li >
< li >< a href ="http://www.webdm.cn" >< em class ="calendar" ></ em >< b > WebDm.cn </ b ></ a ></ li >
< li >< a href ="/" >< em class ="camera" ></ em >< b > 相册 </ b ></ a ></ li >
< li >< a href ="http://www.webdm.cn" >< em class ="find" ></ em >< b > 网页特效 </ b ></ a ></ li >
< li class ="current" >< a href ="/" >< em class ="contact" ></ em >< b > 联系我们 </ b ></ a ></ li >
< li >< a href ="/" >< em class ="search" ></ em >< b > Search </ b ></ a ></ li >
</ ul >

</ body >
</ html >
< br >
< a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

代码来自：http://www.webdm.cn/webcode/ed803424-4914-4c8b-a07c-f1c97f3bb163.html

转载于:https://www.cnblogs.com/webdm/archive/2011/02/11/1951132.html