爱易网
IT新闻
IT新闻
爱易资讯
网站搭建
云虚拟主机教程
云服务器教程
Apache教程
IIS教程
Nginx教程
网站策划
站长文章
推广教程
淘宝客教程
网页设计
HTML教程
XHTML教程
CSS教程
HTML5教程
CSS3教程
JavaSript基础
JQuery教程
Node.js教程
前端技术
Ajax教程
Js特效
Xml教程
平面设计
页面UI设计
photoshop教程
程序开发
AI人工智能
Asp教程
Php教程
Asp.Net教程
Net Core教程
C#教程
Java教程
Jsp教程
开发技术
微信小程序教程
Uniapp开发教程
微信公众号开发
Andriod教程
IOS教程
DOS教程
Python教程
Docker教程
Windows Container教程
数据库
MSSQL教程
MySQL教程
Redis教程
Access教程
Oracle教程
数据库教程
操作系统
Linux教程
Windows教程
MAC教程
Cisco教程
交换机教程
防火墙教程
搜索
爱易网页
HTML教程
轻松玩转花招表单(二)花招表单
轻松玩转花招表单(二)花招表单
日期:2013-09-14 浏览次数:20699 次
二、表单外观的美化
很多时候,我们仅仅为了实现数据采集这个功用来使用表单,常看到的表单都是“千人一面”、毫无生气,本专题尝试着来改变这一景象,试图赋予表单一个丰富多彩的面貌。
表单的外观,也是最为直接的花样,可以通过改变它来实现特效,本文分两个出发点来讲述:CSS魔法和图像魔法。
1、CSS魔法
CSS,就是大家知道的层叠款式单,它可以定义页面元素的外观,包括字体款式、背景颜色和图像款式、边框款式、补白款式、边界款式等等,下面就从这几个方面出发,讨论怎样将CSS使用到表单中,彻底美化它!
1.1 字体款式的使用
字体款式包括:字体族科(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size)、字体(font),具体的定义方法,在这里不详细讲述,可以参考它的材料。
也许你曾经留意到,按钮上的文字不漂亮,其实可以通过CSS字体款式来处理,同样地,其它的几个涉及到文字的表单项,例如,文本框、多行文本框、口令框、下拉选择框都可以使用字体款式。
为了充分展现这些使用,下例特别设计了几种款式,在实际使用中,不必这么凌乱,灵活运用:
样例12:
表单元素的字体款式展现
yesky.com
redidea.net
underline css style
分析:
文本框里的文字是加粗的,大小是9pt,字体是宋体,代码:
<input type="text" name="formExam" size="10" maxlength="10" style="font-family:宋体; font-size: 12px; font-weight: bold" value="加粗">
口令框文字是红色的,代码:
<input type="password" name="formExam3" style="font-size: 9pt; color: #FF0000" size="8" maxlength="8">
下拉框文字颜色是红色的,字体是Verdana,大小是9pt,代码:
<select name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000">
<option value="2" selected>yesky.com</option>
<option value="1">redidea.net</option>
</select>
多行文本框了的字体是Verdana,有下划线,大小是9pt,代码:
<TEXTAREA name="formExam2" cols="30" rows="3" style="font-family:Verdana, Arial; font-size: 9pt; color: #000099; text-decoration: underline" align=right>underline css style</TEXTAREA>
发送1和发送2按钮的文字不同,是由于发送1按钮使用了9pt的宋体文字,所以比较美观,发送1按钮的代码:
<input type="submit" name="Submit" value="发送1" style="font-family:宋体; font-size: 9pt;">
小结
:只需我们对字体的款式熟悉了,就可以灵活多变,不一定要在标签里面使用style来定义,完全可以在<head>里定义,或者外部援用CSS文件,用到的时候援用一下就能达到预期的效果。
1.2 背景颜色和图像款式的使用
有很多时候,网页由于颜色的搭配,不得不对表单的背景颜色和图像款式进行设计,背景颜色利用background-color属性,背景图像利用background-image属性,颜色和图像同样能够得到意想不到的效果。
样例13:
表单元素的背景展现
复选
单选
yesky.com
redidea.com
chinabyte.com
sina.com
sohu.com
分析:
文本框背景是黑色的,字体是白色的,代码:
<input type="text" name="RedFld" size="10" maxlength="10" style="color: #FFFFFF; background-color: #000000"> <
上一篇:轻松玩转花招表单(一)表单概述
下一篇:轻松玩转花招表单(三)表单的提交
免责声明:
本文仅代表作者个人观点,与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
相关资料
更多>
html5取得gis信息
htmlparser要害包结构,类说明
ext htmleditor带标签没法提交
盘点六个时尚有用的 jQuery 和 CSS3 实例
这段程序应该如何理解?输出结果到底是什么
DIV+CSS绝对定位跟相对定位详解
css统制UL LI 的样式
css怎么画竖线
HEAD元素运用集锦
推荐阅读
更多>
CSS 的优先级机制[小结]
dhtmlxTree目录树增加右键菜单及拖拽排序+源码示例上载
禁止Chrome加载计算机管家广告过滤脚本代码
css 去掉超链接式样
正文转载自http://xdom.blogbus.com/logs/63153339.html
关于footer居中有关问题
IE9为啥这样
vim html 编者技巧
ExcelToHtmlTable变换算法:将Excel转换成Html表格并展示(项目源码+详细注释+项目截图)
急个人主页制作html格式 交作业解决办法
HTML 五搴旂敤寮�彂瀹炶返鎸囧崡
firefox innerHTML 性能交付
去掉单元格左右上边框-
转:HTML5的drag and drop API兑现的图片拖拽分组效果
td最后一条数据的下划线如何去掉
flash网站里面的geturl如何用,求
使用360浏览器下载文件有有关问题
跪求答案,ff8在win环境下载生成index.php但目标文件可以正常下载,ubuntu下只生成index.php,该怎么解决
asp.net 页眼生成html页面 方法二
Css中针对IE的兼容(式样属性前缀法)