爱易网
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 浏览次数:20662 次
二、表单外观的美化
很多时候,我们仅仅为了实现数据采集这个功用来使用表单,常看到的表单都是“千人一面”、毫无生气,本专题尝试着来改变这一景象,试图赋予表单一个丰富多彩的面貌。
表单的外观,也是最为直接的花样,可以通过改变它来实现特效,本文分两个出发点来讲述: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"> <
上一篇:轻松玩转花招表单(一)表单概述
下一篇:轻松玩转花招表单(三)表单的提交
免责声明:
本文仅代表作者个人观点,与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
相关资料
更多>
最新界别兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明
急background:none!important 这个是什么意思?该如何处理
直接运作html的代码
下面的css代码为什么在ie7 与 ie8上宽度不一样呢
大家帮小弟我看一下,这段CSS什么意思
网页下分辨率不同,显示的窗体图片位置怎么确定呢
将HTML自动转入JS代码
如何设置表格的单元格与表格边框距离
fieldSet中能否加入两个legend标签?该怎么解决
推荐阅读
更多>
一些三角的CSS写法
惯用HTML转义字符,html转义符,JavaScript转义符,html转义字符表,HTML语言特殊字符对照表(ISO Latin-1字符集)
求超链效果,速结
html5 输入框默许提示
css-bug-div中英文没法自动换行
在html中利用WScript.Shell起用本地程序
<textarea>元素可读写性的切换,该怎么处理
对网站运用css sprite 技术自动化实施方式的探讨
简析 HTML5 canvas在retina屏(视网膜屏幕,如iphone4)设备下的优化(更新原理)
用div+css实现三角,三角形内有字
CSS兼容IE6,IE7,FF的技艺
网站首页head区代码专业规范
ipad 的浏览器点击input file没反应,该如何解决
Css中的 pixelHeight属性解决思路
HTML5引见
如何实现文字自动过渡效果
漂亮的报表css
为啥鼠标滑过效果出不来呢
CSS命名规范,如何命名才不会出错
带锁行锁列,整合行宽,排序功能的HTML