1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > php给html标签添加样式 html button标签的样式怎么设置?html button标签的样式介绍...

php给html标签添加样式 html button标签的样式怎么设置?html button标签的样式介绍...

时间:2024-07-18 10:14:50

相关推荐

php给html标签添加样式 html button标签的样式怎么设置?html button标签的样式介绍...

本篇文章主要的介绍了关于HTML button标签的样式设置,还有关于HTML button标签的美化样式介绍,接下来就让我们一起来阅读本篇文章吧

首先我们先介绍HTML中的button标签的样式设置:

普通按钮设置:

把input元素的type属性设置为“button”,可以创建普通按钮。按钮上显示的文本是value属性的值,如果没有提供value属性,则只创建一个空按钮。如:

效果很明显,这是默认普通按钮的设置。

默认情况下,在普通按钮上点击,是没有任何反应的。因此,需要为普通按钮注册事件,并手动编写相应的处理函数。假如希望单击上述按钮时,提交表单,则要为按钮注册onClick 事件。如:

立即购买

现在点击按钮,就会触发onClick事件,并调用事件处理函数submitForm(buy),参数buy为待处理表单name属性的值。如果希望点击按钮后提交表单,就可以在事件处理函数中调用form对象的submit()方法:

function submitForm(f) {

f.submit();

}

这是一个默认情况的设置,现在我们来看看给html button标签设置样式:

给大家看一个完整的代码实例:

PHP中文网

.div {

display: inline-block;

padding: .3em .5em;

background-image: linear-gradient(#ddd, #bbb);

border: 1px solid rgba(0,0,0,.2);

border-radius: .3em;

box-shadow: 0 1px white inset;

text-align: center;

text-shadow: 0 1px 1px black;

color:white;

font-weight: bold;

}

.div:active{

box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;

border-color: rgba(0,0,0,.3);

background: #bbb;

}

Button

这个的效果如图:

这个的效果是不是很明显,比默认的时候好看多了,等到我们学到js的时候,我们还能用js的技术把这默认的按钮设置的更加美观。

好了,以上就是关于html button标签的样式设置,还有美化样式的总结(想学更多就来PHP中文网),有问题的可以在下方提问。

【小编推荐】

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。