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

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

与上图相比，如何改变文本框和按钮的外观？下面，我将提供两种样式的文本框和按钮作为示例供大家参考。第一种是文本框和按钮没有立体感，只有线条颜色和填充颜色。这种效果可能在很多网站上都看到过，给人一种特别的感觉。非常好。第二个效果相当特别。就是把文本框做成类似下划线和颜色的效果。同时，按钮的背景颜色不是灰色，而是彩色的。可以说这是一个非常特殊的效果。二是没有立体效果的文本框和按钮，那么我们就以DW3中网页的编辑操作为例来说明。首先，我们在网页中插入了相应的表单对象，比如插入文本框和按钮。此时，我们按下[F10]键，显示网页的源代码编辑窗口。然后我们在网页的head和/head标签之间插入这个样式表：styletype=' text/CSS '输入。FONT-SiZe :9 pt；FONT-STYLe : normal；FONT-variant : normal；FONT-weight : normal；高度：18 Px；第一步已经完成。在下一步中，我们将把这个代码分别添加到文本框和按钮的htm语句中：class=smallInput例如，把这个代码添加到文本框和按钮的htm语句中，输入类型=' text ' name=' text field ' class=small input，输入类型=' submit ' name=' submit ' value=' flat buttons ' class=small input。最终效果如下：。

怎么样，是不是比上图的标准按钮好看多了？实现它并不太困难。第三，带下划线的彩色文本框具有与按钮相同的效果，我们还需要样式表的帮助来实现这种效果。和第一个效果的操作步骤一样，在网页的head和/head标签之间插入样式表： jb51 . net]style type=' text/CSS ' input . small input { background 3360 # ffffff；边框-底部-颜色： # ff 6633；边框-底部-宽度：1 px；边框-顶部-宽度：0 px；边框-左侧-宽度：0 px；边框-右侧-宽度：0 px；固体# ff6633color: # 000000FONT-SiZe :9 pt；FONT-STYLe : normal；FONT-variant : normal；FONT-weight : normal；高度：18 Px；LINE-height : normal } input . button face { background : # ffcc 00；border:1solid # ff6633COLOR: # ff0000FONT-SiZe :9 pt；FONT-STYLe : normal；FONT-variant : normal；FONT-weight : normal；高度：18 Px；LINE-HEIGHT:normal}/style从上面的样式表中可以看到，这种效果是通过两种样式实现的，一种是文本框，一种是按钮，因此需要在文本框和按钮的htm语句中插入两种不同的代码，并且在文本框中插入class=smallInput代码。示例input type=' text ' name=' textfield ' class=small input，class='buttonface '代码插入button语句，示例input type=' submit ' name=' submit ' value=' color button ' class=' button face '其实这对应的是样式表中文本框和按钮的样式，最终效果如下图所示：(9502.163.com。

看上面的效果，会不会让你想起单调的文本框和按钮？以上两种方法都是通过样式表实现的，使用方法也很简单。表单的制作是网页开发的关键。通过表单，可以实现交互和交流，也可以收集和共享信息。以上两篇文章分别从语义和结构两个角度进行讨论，大家也可以参与讨论学习！