The previous two examples used were 3 charts and 2 graphs; this one is used; but the principle is the same; the last Taobao, I would like to use a picture. However, it is difficult to solve the problem of the smooth transition and the automatic length of the navigation bar with a picture. But this example can be completely a picture;
The advantage and the last done the same as The imitation Taobao; the mouse is moved up without reloading a picture; this time the code is a little bit less; but not fully optimized;
The above is the test code, CSS and content are not optimized;
Program Code <style>
/* Child Mouse www.zishu.cn * *
ul,li{list-style:none; float:left;}
body{font-size:12px line-height:1.6; Font-family:verdana, "XXFarEastFont-Arial", "Song-Body";
#info li{margin-left:4px; margin-top:15px;}
#info a {display:block;text-align:center; padding-left:15px;line-height:22px;
Background-image:
URL (http://www.alixixi.com/UploadPic/2007-4/200741142140650.gif);
Background-repeat:no-repeat;color: #000; width:47px; Cursor:hand; Text-decoration:none;}
#job A:link, #job a:visited{background-position: -62px 0px;}
#eve A:link, #eve a:visited{background-position: -124px 0px;}
#oth A:link, #oth a:visited{background-position: -186px 0px;}
#car a:hover, #car a:active {background-position:0px-22px; color: #fff;}
#job a:hover, #car a:active {background-position: -62px-22px; color: #fff;}
#eve a:hover, #car a:active {background-position: -124px-22px; color: #fff;}
#oth a:hover, #car a:active {background-position: -186px-22px; color: #fff;}
</style>
Here is the Content section:
Program code <div id= "Info" >
<ul>
< li id= "car" ><a href= "http://www.zishu.cn/blogview.asp?logID=439" target = "_blank" ><span> Child mouse </ Span></a></li>
<li id = "Job" ><a href= "http://www.zishu.cn/blogview.asp?logID=439" target= "_blank" ><span> mouse </ Span></a></li>
<li id = "Eve" ><a href= "http://www.zishu.cn/blogview.asp?logID=439" target= "_blank" ><span> mouse </ Span></a></li>
<li id = "Oth" ><a href= "http://www.zishu.cn/blogview.asp?logID=439" target= "_blank" ><span> mouse </ Span></a></li>
</ul>
</div>
< div style= "Clear:both" > Reprint please indicate the source mouse <a href= "http://www.zishu.cn" target= "_blank" >http://www.zishu.cn </a> Author: Child Mouse </div>
The effect is as follows:
HTML code <! doctypehtml Public "-//w3c//dtd XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title>test</title><style>ul,li{list-style:none; float:left;} body{font-size:12px line-height:1.6; Font-family:verdana, "XXFarEastFont-Arial", "Song-Body"; #info li{margin-left:4px; margin-top:15px;} #info a {display:block;text-align:center; Padding-left:15px;padding-top:2px;padding-bottom:1px;background-image: URL (http://www.alixixi.com/UploadPic/2007-4/200741142140650.gif); Background-repeat:no-repeat;color: #000; width:47px; Cursor:hand;text-decoration:none;} #job A:link, #job a:visited{background-position: -62px 0px;} #eve A:link, #eve a:visited{background-position: -124px 0px;} #oth A:link, #oth a:visited{background-position: -186px 0px;} #car a:hover, #car a:active {background-position:0px-22px;color: #fff;} #job a:hOver, #car a:active {background-position: -62px-22px;color: #fff;} #eve a:hover, #car a:active {background-position: -124px-22px;color: #fff;} #oth a:hover, #car a:active {background-position: -186px-22px;color: #fff;} </style></pead><body> <div id= "info" > <ul> <li id= "car" ><ahref= "http://" www.zishu.cn/blogview.asp?logID=439 "target=" "_blank" ><span> mouse </span></a></li><li Id= "Job" ><ahref= "http://www.zishu.cn/blogview.asp?logID=439" target= "_blank" ><span> mouse </span ></a></li><li id= "Eve" ><ahref= "http://www.zishu.cn/blogview.asp?logID=439" target= "_ Blank "><span> mouse </span></a></li><li id=" oth "><ahref=" http://www.zishu.cn/ blogview.asp?logid=439 "target=" _blank "><span> mouse </span></a></li></ul> </div ><div style= "Clear:both" > Reprint please indicate the source mouse <ahref= "http://www.zishu.cn" target= "_blank" >http:// Www.zishu.cn</a> author: Child Mouse </div></body></ptml>
The following is a picture applied to:
