web开发中按钮的制作妙法

最新推荐文章于 2024-12-11 12:04:00 发布

JOHNCOOLS

最新推荐文章于 2024-12-11 12:04:00 发布

阅读量1.8k

点赞数

分类专栏： HTML JS 网页设计学习与技巧文章标签： web开发 button url input css class

HTML JS 网页设计学习与技巧专栏收录该内容

178 篇文章

订阅专栏

在web开发中，经常要用到格式统一的按钮，如果每个按钮都用绘图工具制作的话，费时费力。我们可以结合CSS的特性，只要根据需要制作几个背景即可实现绝大部分按钮的制作使用。
图一是我们通常制作的按钮图片也是我们利用本文的方法制作出的按钮的效果。

图二是我们即将利用的按钮背景。

CSS应该这样写
.input0
{
    BORDER-RIGHT: 0px;
    PADDING-RIGHT: 5px;
    BACKGROUND-POSITION: center center;
    BORDER-TOP: 0px;
    PADDING-LEFT: 5px;
    FONT-SIZE: 9pt;
    BACKGROUND-IMAGE: url(images/button_bg0.gif);
    PADDING-BOTTOM: 5px;
    VERTICAL-ALIGN: top;
    BORDER-LEFT: 0px;
    WIDTH: 39px;
    COLOR: black;
    PADDING-TOP: 10px;
    BORDER-BOTTOM: 0px;
    BACKGROUND-REPEAT: no-repeat;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: center
}
.input1
{
    BORDER-RIGHT: 0px;
    BACKGROUND-POSITION: center center;
    BORDER-TOP: 0px;
    FONT-SIZE: 9pt;
    BACKGROUND-IMAGE: url(images/button_bg1.gif);
    PADDING-BOTTOM: 5px;
    VERTICAL-ALIGN: top;
    BORDER-LEFT: 0px;
    WIDTH: 62px;
    COLOR: black;
    PADDING-TOP: 10px;
    BORDER-BOTTOM: 0px;
    BACKGROUND-REPEAT: no-repeat;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: center
}
.input2
{
    BORDER-RIGHT: 0px;
    BACKGROUND-POSITION: center center;
    BORDER-TOP: 0px;
    FONT-SIZE: 9pt;
    BACKGROUND-IMAGE: url(images/button_bg2.gif);
    PADDING-BOTTOM: 5px;
    VERTICAL-ALIGN: top;
    BORDER-LEFT: 0px;
    WIDTH: 82px;
    COLOR: black;
    PADDING-TOP: 10px;
    BORDER-BOTTOM: 0px;
    BACKGROUND-REPEAT: no-repeat;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: center
}
.input3
{
    BORDER-RIGHT: 0px;
    BACKGROUND-POSITION: center center;
    BORDER-TOP: 0px;
    FONT-SIZE: 9pt;
    BACKGROUND-IMAGE: url(images/button_bg3.gif);
    PADDING-BOTTOM: 5px;
    VERTICAL-ALIGN: top;
    BORDER-LEFT: 0px;
    WIDTH: 99px;
    COLOR: black;
    PADDING-TOP: 10px;
    BORDER-BOTTOM: 0px;
    BACKGROUND-REPEAT: no-repeat;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: center
}
.input4
{
    BORDER-RIGHT: 0px;
    BACKGROUND-POSITION: center center;
    BORDER-TOP: 0px;
    FONT-SIZE: 9pt;
    BACKGROUND-IMAGE: url(images/button_bg4.gif);
    PADDING-BOTTOM: 5px;
    VERTICAL-ALIGN: top;
    BORDER-LEFT: 0px;
    WIDTH: 150px;
    COLOR: black;
    PADDING-TOP: 10px;
    BORDER-BOTTOM: 0px;
    BACKGROUND-REPEAT: no-repeat;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: center
}

这样我们就只要使用下面的语句就可以得到自己需要的button了。

<input type=button class="input2" value="这是按钮">

怎么样？既可以做到风格统一，又可以省时省力，不错吧！

* 链接已更新

文中代码下载：下载