JS+CSS实现的一种交互体验
@charset "utf-8";
/*元素初始值*/
html {background: #FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,ins,hr{margin: 0px;padding: 0px;}
p{cursor: text;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
ol,ul{list-style-type: none;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
table{border-collapse:collapse;}
fieldset,img{border:0;}
img{display:block;}
caption,th{text-align:left;}
body{position: relative;font-size:62.5%;font-family: "宋体"}
a{text-decoration: none;}
/*demo所用元素值*/
#need {margin: 20px auto 0;width: 610px;}
#need li {height: 26px;width: 600px;font: 12px/26px Arial, Helvetica, sans-serif;background: #FFD;border-bottom: 1px dashed #E0E0E0;display: block;cursor: text;padding: 7px 0px 7px 10px!important;padding: 5px 0px 5px 10px;}
#need li:hover,#need li.hover {background: #FFE8E8;}
#need input {line-height: 14px;background: #FFF;height: 14px;width: 200px;border: 1px solid #E0E0E0;vertical-align: middle;padding: 6px;}
#need label {padding-left: 30px;}
#need label.old_password {background-position: 0 -277px;}
#need label.new_password {background-position: 0 -1576px;}
#need label.rePassword {background-position: 0 -1638px;}
#need label.email {background-position: 0 -429px;}
#need dfn {display: none;}
#need li:hover dfn, #need li.hover dfn {display:inline;margin-left: 7px;color: #676767;}
原始密码:
新的密码: (密码长度为6~20字节。不想修改请留空)
重复密码:
邮箱设置: (Codemoz! 承诺绝不会给您发送任何垃圾邮件。)
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
推荐阅读
js之完全兼容ie与firefox的拖动层代码[测试好用]
zhou's html
一共三个层,下面还有一个,把他拖上来
Magnolia Mag.nolia
Mozilla Red
小 纸 条一共三个层,下面还有一个,把他拖上来
有了拖动层,做局部拖动很简单
小 纸 条一共三个层,下面还有>>>详细阅读
本文标题:js验证符合用户体验的网页表单特效
地址:http://www.17bianji.com/kaifa2/JS/29332.html
1/2 1