CSS實現Windows風格的菜單按鈕_菜單導航特效

Windows風格的菜單按鈕,假如你不能很好掌控代碼中CSS的話，盡量不要動，由于仿系統風格的東西一般多以灰色調為主，有一個顏色不正確，效果就會大大衰減，不能達到想要的視覺效果。

<html>
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312">
<title>Windows風格的按鈕</title>
<style> 
.button2 
{ 
border-right:1px solid buttonhighlight; 
border-left:1px solid buttonshadow; 
border-bottom:1px solid buttonhighlight; 
border-top:1px solid buttonshadow 
}

TD 
{ 
cursor: hand; font-size: 9pt;text-align: center; text-valign: middle 
}

.handin 
{ 
height:18px; 
width:2px; 
border-left:1px solid buttonshadow; 
border-right:1px solid buttonhighlight 
}

.handout 
{ 
height:18px; 
width:2px; 
border-left:1px solid buttonhighlight; 
border-right:1px solid buttonshadow; 
} 
.into 
{ 
width:100%; 
border-right:1px solid buttonhighlight; 
border-left:1px solid buttonshadow; 
border-bottom:1px solid buttonhighlight; 
border-top:1px solid buttonshadow 
}

.outto,.button1 
{ 
background-color: buttonface; 
background-repeat: repeat; 
background-attachment: scroll; 
border-left: 1px solid buttonhighlight; 
border-right: 1px solid buttonshadow; 
border-top: 1px solid buttonhighlight; 
border-bottom: 1px solid buttonshadow; 
background-position: 0%" 
} 
.button0 
{

} 
</style> 
</head>
<body topmargin="0" leftmargin="0" bgcolor="#E0E0E0"> 
<script> 
function change_button(num) 
{ 
if(event.srcElement.tagName=="TD"&&event.srcElement.value=="button") 
event.srcElement.className = "button"+num; 
} 
</script>

所屬頻道：菜單導航特效/更新時間：2010-05-22

[收藏][報錯][返回列表]

相關菜單導航特效：

CSS實現Windows風格的菜單按鈕_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些