代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px auto;
padding: 0px;
}
ul{
width: 300px;
height: 300px;
border: 1px solid red;
background-repeat: no-repeat;
background-image: url(img/02.jpg);
}
ul li{
width: 100px;
height: 100px;
float: left;
list-style: none;
}
a{
display: block;
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-image: url(img/01.jpg);
text-decoration: none;
background-position: 100px 100px;
}
#one:hover{
background-position: 0px 0px;
}
#two:hover{
background-position: -100px 0px;
}
#three:hover{
background-position: -200px 0px;
}
#four:hover{
background-position: 0px -100px;
}
#five:hover{
background-position: -100px -100px;
}
#six:hover{
background-position: -200px -100px;
}
#seven:hover{
background-position: 0px -100px;
}
#eight:hover{
background-position: -100px -200px;
}
#nine:hover{
background-position: -200px -200px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#" id="one">one</a></li>
<li><a href="#" id="two">two</a></li>
<li><a href="#" id="three">three</a></li>
<li><a href="#" id="four">four</a></li>
<li><a href="#" id="five">five</a></li>
<li><a href="#" id="six">six</a></li>
<li><a href="#" id="seven">seven</a></li>
<li><a href="#" id="eight">eight</a></li>
<li><a href="#" id="nine">nine</a></li>
</ul>
</nav>
</body>
</html>
显示出来的效果图：
随机选择一个数字点击上面，即可使那个数字亮起来，例如：
所需要的两张图片：
666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
