CSS实现Windows风格的菜单按钮

2024-09-05 12:19:34

字体：大中小

来源：转载

供稿：网友

Windows风格的菜单按钮,如果你不能很好掌控代码中CSS的话，尽量不要动，因为仿系统风格的东西一般多以灰色调为主，有一个颜色不正确，效果就会大大衰减，不能达到想要的视觉效果。

<html><head><meta http-equiv="Content-Type" content="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> <div class="into" style="width: 100%; height: 25"> <table class="outto" border="0" width="100%" height="25" cellspacing="1" onmouseover="change_button(1)" onmouseup="change_button(0)" onmousedown="change_button(2)" onmouseout="change_button(0)"> <tr> <td width="1%" height="19"><span class="handout"></span></td> <td width="9%" height="19" value="button">打开</td> <td width="1%" height="19"><span class="handin"></span></td> <td width="9%" height="19" value="button">关闭</td> <td width="1%" height="19"><span class="handin"></span></td> <td width="9%" height="19" value="button">另存</td> <td width="1%" height="19"><span class="handin"></span></td> <td width="9%" height="19" value="button">刷新</td> <td width="1%" height="19"><span class="handin"></span></td> <td width="69%" height="19"></td> </tr> </table> </div> </body> </html>

上一篇：博客里的竖向纯CSS圆角导航栏

下一篇：类似淘宝一样的纯CSS导航菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注