<! 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" > <pead> <meta http-equiv= "Content-type" content=; charset=gb2312 "/> <TITLE>JS+CSS implementation of an interactive experience </title> <style> @charset" gb2312 "; /* Element Initial value */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: "Song Body"} A{text-decoration:none;} /*demo element Value/#need {margin:20px auto 0;width:610px;} #need li {height:26px;width:600px;font:12px/26px Arial, Helvetica, Sans-serifBackground: #FFD; border-bottom:1px dashed #E0E0E0;d isplay: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> <script type= "Text/javascript" > Function suckerfish (type, tag, parentid) {if (window.attachevent) {window.attachevent ("onload", function () {var sfels = (parentid==null)? document.getElementsByTagName (TAG): document.getElementById (parentid). GetelementsbyTagName (tag); Type (sfels); }); } hover = function (sfels) {for (var i=0; i<sfels.length; i++) {sfels[i].onmouseover=function () {This.classnam e+= "hover"; } sfels[i].onmouseout=function () {This.classname=this.classname.replace (New RegExp ("hover\\b"), ""); }} suckerfish (hover, "Li"); </script> </pead> <body> <ol id= "Need" > <li><label class= "old_password" > Original password: </label> <input name= ' type= ' password ' id= '/></li> <li><label class= ' New_password ' > The new password:</label> <input name= ' type= ' password ' id= ' "/><dfn> (password length is 6~20 bytes. Leave blank) </dfn></li> <li><label class= "Repassword" > Duplicate password:</label> <input ' type = ' password ' id= '/></li> <li><label class= ' email ' > Mailbox settings:</label> <input ' name= ' Text ' id= '/><dfn> (we will not send you any spam messages.) ) </dfn></li> </ol> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
