<!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> <FCK: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('/UploadFiles/SYDM/2009/3/200903302104281339.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-.Net中文社区（www.aspxcs.net）</h1> <div id="wwwNav"> <ul id="Nav"> <li id="nav00"><a href="http://www.aspxcs.net/" _fcksavedurl="http://www.aspxcs.net/">home</a></li> <li id="nav01"><a href="http://www.aspxcs.net/" _fcksavedurl="http://www.aspxcs.net/">about</a></li> <li id="nav02"><a href="http://www.aspxcs.net/" _fcksavedurl="http://www.aspxcs.net/">services</a></li> <li id="nav03"><a href="http://www.aspxcs.net/" _fcksavedurl="http://www.aspxcs.net/">work</a></li> <li id="nav04"><a href="http://www.aspxcs.net/" _fcksavedurl="http://www.aspxcs.net/">blog</a></li> <li id="nav05"><a href="http://www.aspxcs.net/" _fcksavedurl="http://www.aspxcs.net/">contact</a></li> </ul> </div> </body> </html>
