电脑技术学习

用CSS来实现鼠标翻转的特效代码

dn001

<!-- 把下列代码加入到head区内 -->
需要两个图片:menu.jpg,menuover.jpg

<style>

.menulist a{

color: black;
display: block;
width: 170px;
height: 20px;
padding-left: 5px;
padding-top: 1px;
margin-bottom: 5px;
background-image: url(/js/menu.jpg);
background-repeat: no-repeat;
background-position: left top;
text-decoration: none;
font-weight: bold;
}

.menulist a:hover{
background-image: url(/js/menuover.jpg);
}

</style>


<!-- 把下列代码加入到body区内 -->
<div class="menulist">
<a href="http://www.knowsky.com">Home</a>
<a href="http://www.knowsky.com/">Submit</a> <a href="http://www.knowsky.com/">Resources</a> <a href="http://www.knowsky.com/">Contact</a>
</div>

<br/><br/><br/><br/><br/><br/><br/>
两个图片供大家下载使用
<img src=/js/menu.jpg>
<img src=/js/menuover.jpg>