微软风格的按钮

最新推荐文章于 2024-07-04 11:09:13 发布

若白师妹

最新推荐文章于 2024-07-04 11:09:13 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签：微软 button class scroll border function

本文链接：https://blog.youkuaiyun.com/ghostzp/article/details/165176

此博客主要围绕HTML展开，通过CSS代码定义了多种按钮样式，如button0、button1等，设置了边框、背景等属性。同时利用JavaScript编写了change_button函数，实现按钮在鼠标不同操作下样式的切换，展示了HTML中按钮样式与交互的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

.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>

</body>
</html>