在网页制作中,表单中的对象总是给人一种单调与沉闷的感觉,比如说按钮、文本框等,它们一成不变的模样与颜色出现在您的主页上时,或多或少都会破坏主页的美观程度,那么可不可以改变它们的模样呢?我的回答是,这当然可以啊,下面我们就一起来动手来改变吧。
先看看在网页中经常出现的按钮与文本框的本来面目吧!如下图:
对照上图,我们怎么样才能改变文本框与按钮的模样呢?那在下面我为大家提供两种文本框与按钮样式作为例子参考,第一种是文本框与按钮无立体感,只是有线条颜色与填充颜色的,这种效果大家可能在很多网站上都看见过,给人一种特别的感觉,很不错的,第二种效果就比较特殊了,是将文本框做成一种类似于下划线的效果并且是彩色的,同时按钮的背景色也不再是灰色,而是彩色的,可以说这是一种非常酷的效果,好了,下面我就来说说这两种效果实现的详细操作步骤吧。
第一种效果:无立体效果的文本框与按钮
那我们就通过在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"〉其实这就对应了样式表中文本框与按钮的样式,最后的效果如下图所示:
看看上面的效果,还会不会让您想起那单调的文本框与按钮呢?以上两种效果的方法都是通过样式表来实现的,使用方法也十分的简单,不要对我说这很难喔,最真心的希望能通过这篇文章介绍的方法能让你的主页多一点精彩。否则就对不起我这双为了研究它们而成的黑眼圈了。
分享到:
相关推荐
对asp中常用的按钮、文本框、复选框等控件样式进行编辑,让其外观更加友好!
可定制外观的文本框,按钮,下拉菜单和工具提示。 无需外部文件,如JavaScript,否则样式表。控制打理一切。 ASP.NET AJAX兼容。工程的UpdatePanel。 使用普通的JavaScript。没有JavaScript框架(如jQuery,MooTools...
可定制外观的文本框,按钮,下拉菜单和工具提示。 无需外部文件,如JavaScript,否则样式表。控制打理一切。 ASP.NET AJAX兼容。工程的UpdatePanel。 使用普通的JavaScript。没有JavaScript框架(如jQuery,MooTools...
已有一个产品录入界面input.html,采用div+css布局,请按要求新增样式表美化界面。 (1)为产品名称所在的div添加样式属性,使得产品名称保持在文本框的左边; (2)调整产品名称所在div的宽度和间距,使得产品...
01070获取Excel命令按钮的外观图像和FaceID号(输出到工作表) 01071改变Excel命令按钮的外观图像 01072删除、恢复Excel菜单栏和工具栏 01073隐藏Excel菜单栏和工具栏 01074显示Excel默认的菜单栏和工具栏 01075执行...
mxp/以前的连接外部javascript文件的插件都做的一般,使用不直观,这个在object面板中加入了一个按钮,使用方便多了 mxp/使页面中的图片都恢复到原始大小,可以作用到单个页面或者整个站点,甚至是site窗口选中的...
97、让你受益终身的10个word的使用技巧 97 98 其他常用技巧 98 99、Word中查找/替换通配符和代码 101 四十三、Word中公式编辑器的使用技巧 104 1、公式编辑器的启动与退出 104 四十四、Word文档设置多个不同的页眉...
提供了一个完整的GUI工具箱,包含各种控件(如按钮、文本框、滑块、列表视图等)、布局管理器、样式表支持、动画效果等,帮助开发者快速构建美观、功能丰富的桌面和移动应用界面。Qt Designer是一个可视化界面设计...
15.1 为什么要使用样式表 15.1.1 过去的不足和样式表的优点 15.1.2 了解css(层迭样式表) 15.1.3 html 4对样式表技术的支持 15.2 添加css样式到html网页 15.2.1 设置默认的样式表语言 15.2.2 内联样式 15.2.3 定义...
2.14 使用按钮控制文本渐变 2.15 翻页效果的公告栏 2.16 动态设置控件的事件 第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首...
2.14 使用按钮控制文本渐变 2.15 翻页效果的公告栏 2.16 动态设置控件的事件 第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首...
插入竖排的文本框只要单击【竖排文本框】按钮 20、 设置文本框格式:文本框里的文本可以对待象普通文本那样设置格式 21、 设置文本框边框和底纹: 鼠标右键文本框对象, 打开快捷菜单,选择"设置文本框格式", 设置...
//让父视图取消编辑会让其身上的所有文本框都取消相应 [self.window endEditing:YES]; //将子视图在前面 [self.window bringSubviewToFront:_taiyang]; //超出这个view的边界的控件不再显示 [_infoView ...
光标移到第二章,这时可以看到第二章的页眉和第一章是相同的,鼠标双击页眉Word会弹出页眉页脚工具栏,工具栏上有一个“同前”按钮(图像按钮,不是文字),这个按钮按下表示本节的页眉与前一节相同,我们需要的是各...
25111.2.1 设计和测试选择查询 25211.2.2 将选择查询转换为生成表查询 25311.2.3 为新表建立关系 25411.2.4 使用新的tblShipAddresses表 25511.3 创建操作查询向一个表中追加记录 25611.4 用操作查询从一个表中删除...
25111.2.1 设计和测试选择查询 25211.2.2 将选择查询转换为生成表查询 25311.2.3 为新表建立关系 25411.2.4 使用新的tblShipAddresses表 25511.3 创建操作查询向一个表中追加记录 25611.4 用操作查询从一个表中删除...
25111.2.1 设计和测试选择查询 25211.2.2 将选择查询转换为生成表查询 25311.2.3 为新表建立关系 25411.2.4 使用新的tblShipAddresses表 25511.3 创建操作查询向一个表中追加记录 25611.4 用操作查询从一个表中删除...
25111.2.1 设计和测试选择查询 25211.2.2 将选择查询转换为生成表查询 25311.2.3 为新表建立关系 25411.2.4 使用新的tblShipAddresses表 25511.3 创建操作查询向一个表中追加记录 25611.4 用操作查询从一个表中删除...
25111.2.1 设计和测试选择查询 25211.2.2 将选择查询转换为生成表查询 25311.2.3 为新表建立关系 25411.2.4 使用新的tblShipAddresses表 25511.3 创建操作查询向一个表中追加记录 25611.4 用操作查询从一个表中删除...