JS+CSS实现的一种交互体验表单页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS+CSS实现的一种交互体验</title> 
<style> 
@charset "gb2312"; 
/*元素初始值*/ 
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;} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20suckerfish(type%2C%20tag%2C%20parentId)%20%7B%20%0D%0Aif%20(window.attachEvent)%20%7B%20%0D%0Awindow.attachEvent(%22onload%22%2C%20function()%20%7B%20%0D%0Avar%20sfEls%20%3D%20(parentId%3D%3Dnull)%3Fdocument.getElementsByTagName(tag)%3Adocument.getElementById(parentId).getElementsByTagName(tag)%3B%20%0D%0Atype(sfEls)%3B%20%0D%0A%7D)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Ahover%20%3D%20function(sfEls)%20%7B%20%0D%0Afor%20(var%20i%3D0%3B%20i%3CsfEls.length%3B%20i%2B%2B)%20%7B%20%0D%0AsfEls%5Bi%5D.onmouseover%3Dfunction()%20%7B%20%0D%0Athis.className%2B%3D%22%20hover%22%3B%20%0D%0A%7D%20%0D%0AsfEls%5Bi%5D.onmouseout%3Dfunction()%20%7B%20%0D%0Athis.className%3Dthis.className.replace(new%20RegExp(%22%20hover%5C%5Cb%22)%2C%20%22%22)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Asuckerfish(hover%2C%20%22li%22)%3B%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<ol id="need"> 
<li><label class="old_password">原始密码：</label> <input name='' type='password' id='' /></li> 
<li><label class="new_password">新的密码：</label> <input name='' type='password' id='' /><dfn>（密码长度为6~20字节。不修改请留空）</dfn></li> 
<li><label class="rePassword">重复密码：</label> <input name='' type='password' id='' /></li> 
<li><label class="email">邮箱设置：</label> <input name='' type='text' id='' /><dfn>（我们不会给您发送任何垃圾邮件。）</dfn></li> 
</ol> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程

JS+CSS实现的一种交互体验 表单页面

JS+CSS实现的一种交互体验表单页面