<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<TITLE>CSS Sprites Technology (integrate the background map into one picture, and then use the CSS background image to navigate to the location to be displayed) </title>
<style type= "Text/css" >
body {font-family:verdana; font-size:12px; line-height:1.5;}
A {color: #000; text-decoration:none;}
a:hover {color: #F00;}
#menu {height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul {list-style:none; margin:0px; padding:0px;}
#menu ul li {float:left; margin-right:2px;}
#menu ul Li a {display:block; width:87px; height:28px; line-height:28px; text-align:center; Background:url (pic.gif) 0-28PX no-repeat; font-size:14px;}
#menu ul li a:hover {background:url (pic.gif) 0-56px no-repeat;}
#menu ul Li a#current {background:url (pic.gif) 0 0 no-repeat; font-weight:bold; color: #fff;}
/* #menu ul li a#current Description: Id=menu under the UL under the Li under the element of a element id=current, ultimately refers to a element */
</style>
<title>css Sprites Technology () </title><body>
<div id= "Menu" >
<ul>
<li><a id= "Current" href= "#" > Test </a></li>
<li><a href= "#" > Test </a></li>
<li><a href= "#" > Test </a></li>
<li><a href= "#" > Test </a></li>
<li><a href= "#" > Test </a></li>
</ul>
</div>
</body>
CSS Sprites Technology (the background map is integrated into a graph, and then the CSS background image is used to navigate to the location to be displayed)