CSS Sprite制作的鼠标感应网站导航条

大中小文章来源：中国互联更新时间：2011-8-18 14:30:33

本文是CSS Sprite制作的网站导航条特效，大家可以参考下：CSS Sprite图片处理技巧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>X/HTML+CSS Sprite Navigation Example</title> <style> body {background: #f5f5f5; margin: 0px auto; position:relative; font-family: Arial, Verdana; font-size: 14px; color:#313131;} .siteAlignment{width:950px; margin:0px auto;} h1 {font-family:Arial, Verdana; font-size:1.7em; color:#313131; margin:0px; padding:0px; letter-spacing: -1px;} /* wwwNav */ #wwwNav { width:950px; height:35px; margin:25px 0;} #wwwNav #Nav { width:950px; height:35px; margin:0; padding:0; background:url(sprite-nav.jpg) 0 0 no-repeat;} #wwwNav #Nav li { display:inline; } #wwwNav #Nav li a { float:left; outline:none; width:125px; height:0; padding-top:35px; overflow:hidden; } #wwwNav #Nav li a { background-image: url('http://www.webjx.com/files/090329/1_213313.jpg'); background-repeat: no-repeat; } /* a */ #wwwNav #Nav li#nav00 a { background-position: 0 0; } #wwwNav #Nav li#nav01 a { background-position: -125px 0; } #wwwNav #Nav li#nav02 a { background-position: -250px 0; } #wwwNav #Nav li#nav03 a { background-position: -375px 0; } #wwwNav #Nav li#nav04 a { background-position: -500px 0; } #wwwNav #Nav li#nav05 a { background-position: -625px 0; } /* a:hover */ #wwwNav #Nav li#nav00 a:hover { background-position: 0 -35px; } #wwwNav #Nav li#nav01 a:hover { background-position: -125px -35px; } #wwwNav #Nav li#nav02 a:hover { background-position: -250px -35px; } #wwwNav #Nav li#nav03 a:hover { background-position: -375px -35px; } #wwwNav #Nav li#nav04 a:hover { background-position: -500px -35px; } #wwwNav #Nav li#nav05 a:hover { background-position: -625px -35px; } /* a:active */ #wwwNav #Nav li#nav00 a:active { background-position: 0 -70px; } #wwwNav #Nav li#nav01 a:active { background-position: -125px -70px; } #wwwNav #Nav li#nav02 a:active { background-position: -250px -70px; } #wwwNav #Nav li#nav03 a:active { background-position: -375px -70px; } #wwwNav #Nav li#nav04 a:active { background-position: -500px -70px; } #wwwNav #Nav li#nav05 a:active { background-position: -625px -70px; } /* a.current */ body#home #Nav li#nav00 a { background-position: 0 -105px; } body#about #Nav li#nav01 a { background-position: -125px -105px; } body#services #Nav li#nav02 a { background-position: -250px -105px; } body#work #Nav li#nav03 a{ background-position: -375px -105px; } body#blog #Nav li#nav04 a{ background-position: -500px -105px; } body#contact #Nav li#nav05 a { background-position: -625px -105px; } </style> </head> <body id="about" class="siteAlignment"> <h1>X/HTML & CSS Sprite Navigation Example</h1> <div id="wwwNav"> <ul id="Nav"> <li id="nav00"><a href="http://www.webjx.com/">home</a></li> <li id="nav01"><a href="http://www.webjx.com/about/">about</a></li> <li id="nav02"><a href="http://www.webjx.com/services/">services</a></li> <li id="nav03"><a href="http://www.webjx.com/portfolio/">work</a></li> <li id="nav04"><a href="http://www.webjx.com/blog/">blog</a></li> <li id="nav05"><a href="http://www.webjx.com/contact/">contact</a></li> </ul> </div> <p><em>The above navigation has been set within a body containing the id attribute value of 'about' to illustrate the means of a current state.</em></p> </body> </html>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

图片特效中应用的图片http://www.webjx.com/files/090329/1_213313.jpg

版权说明:本站原创文章,由中国互联 SEO优化发表.
本文地址:https://www.hulian.top/zixun/post/4066.html

分享到：QQ空间新浪微博腾讯微博微信百度贴吧百度空间搜狐微博