DIV CSS 佈局教程網

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

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

<br/><br/><br/><br/><br/><br/><br/>
兩個圖片供大家下載使用
<img src=/JS/menu.jpg>
<img src=/JS/menuover.jpg>

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