作符合用户体验的input输入框
作者:阿里满满 来源:阿里满满 发布时间:2008-01-10 12:21:00
今天来说说鄙人对input输入框在处理上的细节处理和心得,其实制作一个符合CSS标准、FF/IE7/IE6等主流浏览器全兼容、符合用户体验的input其实并不难。先点击看看下面的效果先!
鼠标经过input时的颜色会发生变化,此外当点击标题处(<label>的作用)或者输入框时,光标停留所在的input的颜色也和其他input输入框有所不同,这是<input>中JS的作用。在用户体验上告诉的用户什么是可以输入以及当前在什么输入位置。此外通过键盘上Tab键的切换,输入完当前内容移动到下一个输入框变得更方便了,这是CSS合理布局结构的作用。
整体的结构通过<ul>和<li>来组织,每个<li>显示一行内容。<label>标签显示标题,<p>input控制输入框,<span>显示备注信息。这里要特别说一下<input>在各个浏览器下不同的表现,对<input>设置line-height对FF是不起作用的,所以建议用padding来控制文本在输入框的位置。<input>在浏览器下的默认高度和字体一样是16px,加上下边框就是18px。特别是在需要将<input>变大的情况下,用padding来控制比较好。
再来说说JS部分,这里用到onblur(光标离开)、onfocus(光标停留)、onmousemove(鼠标停留)、onmouseout(鼠标离开)这4个属性来控制鼠标的动作。不会JS也没关系,只要定义其所对应的CSS样式就可以了。在这里要特别感谢经典论坛中WellFrog给与我JS上的帮助。
精通一样东西比学会一样东西所付出的精力和时间要多得多,这年头最值钱的东西就是坚持。制作一个符合CSS标准、FF/IE7/IE6等主流浏览器全兼容、符合用户体验的东西出来其实也可以很简单的。
猜你喜欢
- 前言哈希 又称作 “散列”,它接收任何一组任意长度的输入信息,通过 哈希 算法变换成固定长度的数据指
- 从百度百科中扣去的这个图片轮播代码,图片向左不间断滚动,有停顿:<!DOCTYPE html PUBLIC "-//W3C/
- 非常好的一篇技术文档,翻译自Louis Lazaris 2009年9月15日发表的《The Z-Index CSS Property: A
- 以下的文章主要是介绍MySQL5创建存储过程的实例演示,MySQL5创建存储在实际操作中应用的频率还是很高的,以下就是MySQL5创建存储过
- 在Flash播放器运行时,将不同来源的资源划分到独立的沙箱(sandbox)内,不同沙箱之间不能彼此操作数据(除非目标沙箱做过一些设置,授权
- 让 PHP 支持 MySQLPHP 有专有的 MySQL 函数库以使用操作 MYSQL 数据库。在 PHP 5 及以后版本中不再
- 二级域名的解析指向ASP源代码,懂程序的人一看就明白怎么实现了。呵呵!真简单<%@ LANGUAGE =&nb
- 这是一套适用于JavaScript程序的编码规范。它基于Sun的Java程序编码规范。但进行了大幅度的修改, 因为JavaScript不是J
- 1、页签的表达。页签表达很清晰,当前页签突出,且层级包涵关系明确;看下图,一目了然的感觉,不用疑惑我在那部分里。不信?拿当当的对比一下,你感
- Oracle SQL语句中的Update可以和SEQUENCE联合使用,以达到更新某字段的值连续编号,而不需要使用游标去逐条遍历更新数据库记
- 这篇论坛文章(赛迪网技术社区)根据网友的个人实践扼要的讲解了将MySQL 5.0下的数据导入到MySQL 3.23中的具体方法及步骤,详细内
- 在js中调用asp文件的方法很简单,我们可以用在静态页面的点击数统计,虽然静态页面不支持asp程序,但是我们可以使用js调用,来变相的达到这
- 如果有空格就用%20代替,如果有其它字符就用%ASCII代替,如果有汉字等四个字节的字符,就用两个%ASCII来代替。不过有时候我们也需要将
- 可怜我的C盘本来只有8.XG,所以不得不卸载掉它。卸载掉本身没啥问题,只是昨晚突然发现 Sql Server 2008 R2 Managem
- EXISTS该函数返回集合中第一个元素的索引,如果集合为空,返回NULLNULLNULLCollection.EXISTS(index)CO
- 下面是滚动条css代码参数介绍:scrollbar-3d-light-color 设置或检索滚动条亮边框颜色 scrollbar-highl
- 我看blog里,还有很多地方都引用过我写的这个类,转了不少,但自己一直也没发表过,这次正式发表一下。在蓝色理想中有人不懂怎么用,我在baid
- javascript版 俄罗斯方块(Russian box)小游戏,喜欢的朋友可以玩玩。对源代码感兴趣的朋友也可以研究一下。玩法介绍:可以输
- 写在前面的话:此篇还是asp相关的,相信玩ASP的都有这个感觉,当数据有5万多条时-------just like音乐网,要调用最新的10条
- Microsoft建立了一种既灵活又强大的安全管理机制,它能够对用户访问SQL Server服务器系统和数据库的安全进行全面地管理。按照本文