可翻转的图片导航条

利用4张图片，每张图片3种状态，图片高150px,每种状态为50px

 

代码 
<!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>图片翻转式的导航菜单</title>
<style type="text/css">
#nav {
    margin: 0;
    padding: 0;
    height: 50px;
    list-style: none;
    display: inline;
    overflow: hidden;
}
#nav li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline;
}
#nav a {
    float: left;
    padding: 50px 0 0 0;
    overflow: hidden;
    height: 0px !important;
    height: 50px /*针对IE5/WIN*/
}
#nav a:hover {
    background-position: 0 -50px;
}
#nav a:active, #nav a.selected{
    background-position:0 -100px;
}
#about a{
    width: 71px;
    background: url(about.jpg) top left no-repeat;
}
#contact a{
    width: 106px;
    background:url(contact.jpg) top left no-repeat;
}
#protfolo a{
    width: 95px;
    background: url(portfolio.jpg) top left no-repeat;
}
#service a{
    width: 84px;
    background: url(services.jpg) top left no-repeat;
}     
</style>
</head>
<body>
<ul id="nav">
 <Li id="about"><a href="/">关于我们</a></Li>
 <li id="contact"><a href="#" class="selected">联系我们</a></li>
 <li id="protfolo"><a href="#">本站详情</a></li>
 <li id="service"><a href="#">服务</a></li>
</ul>
</body>
</html>

 

效果图

 

posted @ 2010-11-09 12:51  nodot  阅读(276)  评论(0)    收藏  举报