电脑技术学习

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

dn001

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


<style>

.hbuttons a{
display: block;
text-decoration: none;
font: bold 13px Arial;
color: black;
width: 78px;
height: 23px;
float: left;
display: inline;
margin-right: 8px;
background-image:url(/js/tabsquare.jpg);
background-repeat: no-repeat;
padding-top: 4px;
text-align:center;
}

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

</style>


<!-- 把下列代码加入到body区内 -->
<div class="hbuttons">
<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>
<div style="clear: left;"></div>

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