在网页制作中，表单中的对象总是给人一种单调与沉闷的感觉，比如说按钮、文本框等，它们一成不变的模样与颜色出现在您的主页上时，或多或少都会破坏主页的美观程度，那么可不可以改变它们的模样呢？我的回答是，这当然可以啊，下面我们就一起来动手来改变吧。
先看看在网页中经常出现的按钮与文本框的本来面目吧！
对照上图，我们怎么样才能改变文本框与按钮的模样呢？那在下面我为大家提供两种文本框与按钮样式作为例子参考，第一种是文本框与按钮无立体感，只是有线条颜色与填充颜色的，这种效果大家可能在很多网站上都看见过，给人一种特别的感觉，很不错的，第二种效果就比较特殊了，是将文本框做成一种类似于下划线的效果并且是彩色的，同时按钮的背景色也不再是灰色，而是彩色的，可以说这是一种非常酷的效果，好了，下面我就来说说这两种效果实现的详细操作步骤吧。
第一种效果：无立体效果的文本框与按钮
那我们就通过在DW3中网页的编辑操作为例来进行说明，首先我们已经在网页中插入了相应的表单对象，比如插入一个文本框与一个按钮，此时，我们在按下[F10]键，显示出网页源代码编辑窗口，那我们在网页的<head>与</head>标签之间插入这个样式表：
<style type="text/css">
input.smallInput{border:1 solid black;FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}
</style>
好了第一步就完成了，下一步我们就分别在文本框与按钮的htm语句中加上这一句代码：
class=smallInput
比如在<input type="text" name="textfield" class=smallInput>与<input type="submit" name="Submit" value="平面按钮" class=smallInput>这个文本框与按钮的htm语句中加入了这句代码。最后的效果如下图：
怎么样，比起前面那张图中的标准按钮来说是不是美观多了，要实现起来其实也不是太难吧。
第二种效果：带颜色的下划线式文本框与按钮效果
同样，我们也需要样式表的帮助来实现这个效果，和第一种效果的操作步骤一样在网页的<head>与</head>标签之间插入样式表，
<style type="text/css">
input.smallInput{background:#ffffff;border-bottom-color:#ff6633; border-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px; solid #ff6633; color: #000000; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}
input.buttonface{BACKGROUND: #ffcc00; border:1 solid #ff6633; COLOR: #ff0000; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}
</style>
大家从上面的样式表中可以看出，这个效果的实现是通过两个样式来实现的，一个是文本框的，一个是按钮的，所以在文本框与按钮的htm语句中就需要插入两句不同的代码，在文本框中插入的是class=smallInput代码 如例子 <input type="text" name="textfield" class=smallInput>，在按钮语句中插入的是 class="buttonface"代码如例子<input type="submit" name="Submit" value="彩色按钮" class="buttonface">其实这就对应了样式表中文本框与按钮的样式，最后的效果如下图所示：
看看上面的效果，还会不会让您想起那单调的文本框与按钮呢？以上两种效果的方法都是通过样式表来实现的，使用方法也十分的简单，不要对我说这很难喔，最真心的希望能通过这篇文章介绍的方法能让你的主页多一点精彩。否则就对不起我这双为了研究它们而成的黑眼圈了。
分享到：
相关推荐
1. smohan.face.css：这是样式表文件，负责定义表情插件的外观和布局。它可能包含了表情面板的样式，表情图标的位置和大小，以及与文本框的交互效果等。CSS在网页设计中起到关键作用，通过调整这些样式，我们可以...
通过使用样式表，开发者可以控制窗口、按钮、文本框等各种控件的颜色、字体、边框、阴影、动画效果等，从而创建出独特且吸引人的用户界面。 在“qt样式表.pdf”中，你可能会学到以下关键知识点： 1. **基础概念**...
这种样式表通常包含一系列用于改变Qt界面元素颜色的规则，比如将窗口背景色设置为粉色，按钮、文本框的边框和填充色也调整为粉红色调。此外，可能还会对字体颜色、高亮状态、鼠标悬停效果等进行定制，以确保在粉红色...
《jQuery实现文本框输入表情符号技术详解》 在现代网页应用中，用户交互体验的提升是至关重要的。其中，允许用户在文本输入框中插入表情符号已经成为一种常见且受欢迎的功能，尤其是在社交媒体和聊天应用程序中。...
"简洁的PPT文本框.rar"这个压缩包文件显然提供了与PPT设计相关的素材，特别是关于文本框的设计。让我们深入探讨一下PPT文本框的重要性和使用技巧。 1. **文本框的基本功能**：在PPT中，文本框是一种容器，用来放置...
1. QSS样式表的应用范围：在Qt框架中，几乎所有的控件（如按钮、文本框、滚动条等）都可以通过QSS样式来定义其外观。QSS的语法和CSS类似，但是它能够直接作用于Qt的GUI组件。 2. 基本语法结构：QSS的语法结构与CSS...
首先，QSSEditor是一个开源的Qt样式表编辑器，其版本号为0.6.0，安装文件名为"qsseditor-setup-0.6.0.exe"。这个工具允许开发者直接看到样式修改的效果，而无需重新编译和运行应用程序。通过QSSEditor，你可以创建、...
Qt样式表（QSS）是Qt框架中的一个核心特性，它允许我们使用类似CSS的语法来控制Qt应用程序的外观和布局，使得界面定制变得更为灵活和高效。 Qt样式表借鉴了Web开发中的CSS（层叠样式表）概念，但同时也针对桌面应用...
然后，"按钮"是用户界面的一个关键元素，它允许用户与应用进行交互。在HTML中，按钮可以通过`<button>`标签定义，而在JavaScript中，你可以通过事件监听器（如`addEventListener`）来响应用户的点击行为。当用户点击...
QT使用C++语言，但通过其强大的信号与槽机制，使得事件处理变得简单易懂。 在QT中，样式表（QSS，Qt Style Sheets）类似于网页开发中的CSS（层叠样式表），用于控制Qt界面元素的外观。QSS允许开发者以一种声明式的...
在Excel2021中，将文本框与单元格对齐是一个常见的需求，尤其是在创建复杂的电子表格或报表时。为了使工作表看起来更加整洁专业，确保文本框与单元格对齐至关重要。以下是一些详细步骤和技巧，帮助你快速实现这一...
首先，Qt样式表（QSS）的基础概念与CSS相似，它定义了一系列规则，这些规则可以应用于Qt的各个控件类，如按钮、标签、文本框等。样式表通过控件的类名、对象名或者ID来选择特定的元素，并定义它们的颜色、字体、边框...
在Excel 2010中，文本框是一个非常实用的功能，它允许用户在工作表上添加独立的文本区域，这些区域可以自由移动和调整大小，为数据报告和演示文稿增添更多灵活性。以下是对如何在Excel 2010中使用文本框的详细解释。...
对于需要支持多语言的应用，可以使用资源文件的字符串表来存储不同语言的文本，然后在程序运行时根据用户的选择动态加载。 总结来说，添加静态文本框到对话框是Windows编程中的基础任务，涉及资源编辑、控件属性...
标题中的“用Visual Studio .NET开发样式表”指的是使用微软的Visual Studio .NET IDE来创建和管理层叠样式表（CSS）。CSS是用于定义网页内容布局和样式的语言，它可以控制网页元素的颜色、字体、布局等视觉效果。...
在QT中，QSS（Qt Style Sheet）类似于HTML中的CSS，是一种样式表语言，用于定义QT界面元素的外观，包括窗口、按钮、文本框等。QSS的引入极大地提升了QT应用的定制性和灵活性，让开发者能够轻松地改变窗体和按钮的...
CSS3是层叠样式表的最新版本，提供了许多增强的特性，如选择器、过渡（transitions）、动画（animations）、多列布局、阴影和渐变等。在这个特效中，CSS3的过渡和动画功能被充分利用，使标签的显示和隐藏过程平滑而...
CSS（层叠样式表）则用于美化这些元素，如设置边框、颜色、大小等。而JavaScript是关键，它提供了动态交互的能力，使得用户可以通过点击按钮来增加或删除文本框。 在JavaScript中，我们可以创建函数来处理点击事件...
《Qt样式表武林秘籍》是一本专注于QT5框架中QSS（Qt StyleSheet）技术的详细指南。QSS是Qt提供的一种强大的界面样式设计语言，它借鉴了HTML/CSS的语法，使得Qt应用程序的界面设计变得更为灵活和直观。通过学习这本书...
其中，QSS（Qt Style Sheets）是Qt提供的一种样式表语言，类似于网页设计中的CSS（Cascading Style Sheets），用于定制Qt应用程序的外观和感觉。 标题提到的"QSS样式表之PS黑色风格+白色风格+淡蓝色风格"，是指利用...