爱易网
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教程
交换机教程
防火墙教程
搜索
爱易网页
页面UI设计
轻松玩转花样表单
轻松玩转花样表单
日期:2014-04-10 浏览次数:20732 次
二、表单外观的美化
很多时候,我们仅仅为了实现数据采集这个功能来使用表单,常看到的表单都是“千人一面”、毫无生气,本专题尝试着来改变这一现象,试图赋予表单一个丰富多彩的面貌。
表单的外观,也是最为直接的花样,可以通过改变它来实现特效,本文分两个出发点来讲述: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"
上一篇:用表格巧妙制作导航条按钮
下一篇:Dreamweaver中输入空格
免责声明:
本文仅代表作者个人观点,与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
相关资料
更多>
运用Fireworks制造Logo心得和体会
设计网页前端界面必备的技艺
Flash 8 中文版视频教程(5)斜角
设计实例:产品设计的情感与心情
网页设计易用性:43条网站设计中常犯的错误
网页设计之Dreamweaver入门30篇_DreamWeaver基础教程_DreamWeaver教程
顺序员眼中的Flash MX2004(1)
交互设计师技艺:优秀交互设计师的必备条件
巧用Behaviors制消息框又一法_DreamWeaver插件_DreamWeaver教程
推荐阅读
更多>
回车键触宣布单提交的效果
AS运用:鼠标控制的跑马灯效果
如何运用Microsoft FrontPage 2000制造静态按钮
参考:整理HTML,CSS和Javascript在线手册
网页设计关于超级链接的设计准绳
设计观念:设计师指导力的培育
在Dreamweaver中如何掌握好网页表格
运用预定义框架集为网页添加框架
网站更新短平快
技巧:用Dreamweaver停止网页优化
Dreamweaver CS3 破解补丁,注册码运用全进程
用户研讨:如何正视心思学
Dreamweaver 8.0/Flash 8.0/Fireworks 8.0简体中文正式版下载及注册码_Dreamweaver 8专区_DreamWeaver教程
网页应该设计为多少像素才适宜?
百度产品决策准绳:有需求、有优势、有收益
网页设计软件FrontPage常用快捷键一览表
flash trace 技巧 和lineStyle()变化
Dreamweaver MX 2004视频宝典教程(120)
用户体验:标签在web2.0网站的适用范围
Dreamweaver网页制造超级技巧36则