<!DOCTYPE <a href="http://www.viphot.com/InfoList/Catalog_76_1.html" target="_blank" title="Html" >Html</a> PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html <a href="http://www.viphot.com/InfoList/Catalog_83_1.html" target="_blank" title="XML学习教程" >XML</a>ns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表单效果</title> <style type="text/css"> *{ margin:0; padding:0; } body{ font-size:63%; color:#000; } /*input*/ .input_on{ padding:2px 8px 0pt 3px; height:18px; border:1px solid #999; background-color:#FFFFCC; } .input_off{ padding:2px 8px 0pt 3px; height:18px; border:1px solid #CCC; background-color:#FFF; } .input_move{ padding:2px 8px 0pt 3px; height:18px; border:1px solid #999; background-color:#FFFFCC; } .input_out{ /*height:16px;默认高度*/ padding:2px 8px 0pt 3px; height:18px; border:1px solid #CCC; background-color:#FFF; } /*form*/ ul.input_test{ margin:20px auto 0 auto; width:500px; list-style-type:none; } ul.input_test li{ width:500px; height:22px; margin-bottom:10px; } .input_test label{ float:left; padding-right:10px; width:100px; line-height:22px; text-align:right; font-size:1.4em; } .input_test p{ float:left; _margin-top:-1px; } .input_test span{ float:left; padding-left:10px; line-height:22px; text-align:left; font-size:1.2em; color:#999; } </style> </head> <body> <ul class="input_test"> <li> <label for="inp_name">姓名：</label> <p><input id="inp_name" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p> <span>请输入您的姓名</span> </li> <li> <label for="inp_email">Email：</label> <p><input id="inp_email" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p> <span>请输入您的Email</span> </li> <li> <label for="inp_web">网站：</label> <p><input id="inp_web" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p> <span>请输入您的网站</span> </li> </ul> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

鼠标经过input时的颜色会发生变化，此外当点击标题处（<label>的作用）或者输入框时，光标停留所在的input的颜色也和其他input输入框有所不同，这是<input>中JS的作用。在用户体验上告诉的用户什么是可以输入以及当前在什么输入位置。此外通过键盘上Tab键的切换，输入完当前内容移动到下一个输入框变得更方便了，这是CSS合理布局结构的作用。

[1] [2] 下一页

上一篇:Vista下使用扫描间谍软件

下一篇:网管学习教程大全

网站中比较不错的表单特效相关文章：

·Photoshop教程:MM照片弄得非常脏特效

·字体特效 Photoshop制作红粉可爱的签名字体

·flash声音特效实例--架子鼓(图)

·3DS Max特效片头精彩实例——星光灿烂

·PS教程:把MM照片制作为蓝色梦幻特效

·Photoshop字体特效

·Photoshop图层样式表现水滴文字特效

·Flash遮罩特效实例--放大镜(图)

·Flash联合粒子特效软件打造超酷浪漫动画特效

·绝对惊艳的绝技:让Vista特效更绚丽

网站中比较不错的表单特效相关软件：

·Photoshop 7.0 梦幻特效宝典附带光盘

·photoshop数码照片处理与特效制作

·PS6特效设计的光盘附带源码

·3ds max & reactor动力学特效实战教程

·网页中的特效

·javascript特效

·经典网页特效 2005 Build 05.15

·ASP秀网页特效

·网页特效制作教程

·VML特效八超眩变幻几何图形

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源：http://www.viphot.com

	\| 帮助(？) \| 版权声明 \| 友情连接 \| 关于我们 \| 信息发布
Copyright 2007 www.viphot.com All Rights Reserved.	鄂ICP备05000083号Powered by:vipcn