CSS文本框和按钮美化效果代码

首先,看看网页中经常出现的按钮和文本框。


我们如何更改图表顶部的文本框和按钮的模式在下面我可以给你两个文本框和按钮样式作为例子参考,首先是文本框和按钮没有立体感,只是线条颜色和填充颜色,这样的效果我们可以在很多网站上看到,给人一种特别的感觉,很好,第二效果比较特殊,是由一个类似于下划线的效果和颜色的文本框,和背景色按钮是灰色的,但颜色,可以说,这是一个非常酷的效果,很好的,详细的步骤,下面我就谈谈两效应。

两。没有立体效果的文本框和按钮

然后我们可以通过网页在DW3编辑操作为例,首先我们在网页转换成相应的表单对象,如一个文本框和一个按钮的插入,在这个时候,我们按F10 } {显示网页的源代码编辑器窗口,然后我们插入样式表在网页和标签之间:




Input.smallInput{border:1 solid black; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; FONT-WEIGHT:;

第一步已经完成,下一步是将这些代码添加到文本框和按钮的HTM语句中。
类= smallinput
例如,在
U3000 U3000
此代码添加到文本框和按钮的HTM语句中:


好吧,它比前一张图片中的标准按钮漂亮多了。实现它并不难。

三。带有下划线的文本框和按钮效果。

同样,我们也需要对样式表的帮助来达到这一效果,像第一个效果的操作程序,插入网页标签和标签之间的样式。





输入。smallinput {背景:# ffffff;底部边框颜色:# ff6633;底部边框宽度:1px;边框顶部宽度:0px;左边框宽度:0px;权利边界宽度:0px;固体# ff6633;颜色:# 000000;FONT-SIZE: 9pt;font-style:正常;font-variant:正常;font-weight:正常;身高:18px;line-height:正常}
输入。按钮表面颜色{背景:# ffcc00;边界:1固体# ff6633;颜色:# FF0000;FONT-SIZE: 9pt;font-style:正常;9pt;;威;玉;玉。

我们可以从上面的样式表,这样的效果是由两种方式实现,一个是一个文本框,一个按钮,在文本框和按钮的HTM语句将需要插入不同的代码插入文本框类= smallinput代码。
作为一个例子,
类=按钮表面颜色的代码插入按钮语句为例
U3000 U3000
事实上,这相当于在样式表中的文本框和按钮的样式,而最终效果如下图所示:


看看它的效果,它会让你想起单调的文本框和按钮吗以上两种方法都是通过样式表来实现,以及使用的方法是非常简单的。


表单的生成是网页开发的重点。通过形式化、互动性和交流性,实现信息的收集和共享。以上两篇文章是从语义学和结构的角度进行讨论的,你也可以参加讨论和学习。