<html>
<head>
<meta charset="utf-8">
<title>css sprite完成版</title>
<style>
body,div,ul,li,a{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
#container{
width:800px;
margin: 0 auto;
}
ul{
width: 800px;
height: 50px;
}
li{
float: left;
}
li a{
width: 160px;
height: 50px;
display: block;
white-space: nowrap;
background: url(img/nav01.jpg) no-repeat;
text-indent: 100%;
overflow: hidden;
}
li#home a:hover{
background-position: 0px -60px;
}
li#food a{
background-position: -160px 0;
}
li#food a:hover{
background-position: -160px -60px;
}
li#drink a{
background-position: -320px 0;
}
li#drink a:hover{
background-position: -320px -60px;
}
li#info a{
background-position: -480px 0;
}
li#info a:hover{
background-position: -480px -60px;
}
li#contact a{
background-position: -640px 0;
}
li#contact a:hover{
background-position: -640px -60px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<ul>
<li id="home"><a href="#">home</a></li>
<li id="food"><a href="#">food</a></li>
<li id="drink"><a href="#">drink</a></li>
<li id="info"><a href="#">info</a></li>
<li id="contact"><a href="#">contact</a></li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
