仿微软风格的按钮演示
2004-12-23 20:50
190 查看
<html>
<head>
<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; font-family: 宋体; 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>
<td width="1%" height="19"><span class="handin"></span></td>
<td width="9%" height="19" value="button">按钮TD</td>
<td width="1%" height="19"><span class="handin"></span></td>
<td width="9%" height="19" value="button">按钮TD</td>
<td width="1%" height="19"><span class="handin"></span></td>
<td width="69%" height="19"></td>
</tr>
</table>
</div>
</body>
</html>
<head>
<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; font-family: 宋体; 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>
<td width="1%" height="19"><span class="handin"></span></td>
<td width="9%" height="19" value="button">按钮TD</td>
<td width="1%" height="19"><span class="handin"></span></td>
<td width="9%" height="19" value="button">按钮TD</td>
<td width="1%" height="19"><span class="handin"></span></td>
<td width="69%" height="19"></td>
</tr>
</table>
</div>
</body>
</html>
相关文章推荐
- [效果演示]仿Win8风格按钮&边栏
- 微软风格的按钮
- 在vc MFC下制作具有XP风格按钮等控件
- 按钮布局演示
- 按钮布局演示
- 6.2 按钮布局演示
- 给Delphi的工具条按钮添加BTNS_WHOLEDROPDOWN风格
- 微软介绍Excel Web App交互式按钮
- [原创]jQuery插件大全新增演示[1]--tooltips & facebook风格对话框FBModal
- [Material Design] 教你做一个Material风格、动画的按钮(MaterialButton)
- BCG属性表单风格修改与删除“上一步”“下一步”“帮助”“确定”四个按钮
- 现代C++风格以及在实际开发中的使用——谈微软英库中文输入法开发经验
- VC下动态创建了BUTTON按钮后,如何设置按钮的Modal Frame风格???
- 快速制作微软风格下拉菜单
- 安卓中自定义按钮风格文本教程
- 非常清凉简洁的图片演示风格->>JavaScript实现
- 用CSS风格的文本和图形构建网页实用按钮
- 用户控件--(XP风格的按钮)
- 《Windows Fun 7》三:Metro风格的图标按钮