当前位置: 首页 > 图文教程 > 网页特效 > 导航代码 > CSS Sprite制作的鼠标感应网站导航条
No. « ‹ 1 2 »
关键字
本文是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('/upload/tech/20091010/20091010013912_66368270ffd51418ec58bd793f2d9b1b.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.ruanchen.com/'about' to illustrate the means of a current state.</em></p> </body> </html>
[ 提示:你可先修改部分代码,再按Ctrl+A 全部选择 ]
图片特效中应用的图片/upload/tech/20091010/20091010013912_66368270ffd51418ec58bd793f2d9b1b.jpg
登陆 还没注册?