很有创意的导航

效果

<!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=gb2312" />
<title>很有创意的CSS导航</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    
<ul>
    <li class="home">home</li>
    <li class="about">about</li>
    <li class="rss">rss</li>
</ul>
    
</body>
</html>

CSS文件

* {
    padding:0;
    margin:0;
}
ul{
    width:774px;
    height:210px;
    background:url(../images/menu-bg.jpg) no-repeat;
    list-style-type:none;
    position:relative;
    margin:100px;
}
li.home {
    background:url(../images/home.gif) no-repeat;
    width:144px;
    height:58px;
    text-indent:-9999px;
    cursor:pointer;
    position:absolute;
    top:30px;
    left:80px;
}    
li.home:hover {
    background-position:0 -58px;
}        
li.about {
    background:url(../images/about.gif) no-repeat;
    width:131px;
    height:51px;
    text-indent:-9999px;
    cursor:pointer;
    position:absolute;
    top:70px;
    left:270px;
}
li.about:hover {
    background-position:0 -51px;
}

li.rss {
    background:url(../images/rss.gif) no-repeat;
    width:112px;
    height:47px;
    text-indent:-9999px;
    cursor:pointer;
    position:absolute;
    top:50px;
    left:510px;
}
li.rss:hover {
    background-position:0 -47px;
}

 

posted @ 2014-03-22 16:12  胡椒粉hjf  阅读(235)  评论(0)  编辑  收藏  举报