DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 用CSS來實現鼠標翻轉的特效代碼2
用CSS來實現鼠標翻轉的特效代碼2
編輯:CSS詳解     

<!-- 把下列代碼加入到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="Home'>http://www.knowsky.com">Home </a>
 <a href="Submit'>http://www.knowsky.com">Submit </a> <a href="Resources'>http://www.knowsky.com/">Resources </a> <a href="Contact'>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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved