效果不错的登录框制作

http://bbs.blueidea.com/thread-2830870-1-1.html

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title ></ title >
< style >
*{}{
padding:0px;margin:0px;
}
body{}{
background:#EAEAEA;font-size:12px;
}
#test{}{
position:absolute;width:751px;height:246px;left:50%;top:50%;margin:-123px 0 0 -375px;background:url(http://bbs.blueidea.com/attachment.php?aid=79193&noupdate=yes);
}
#test_left{}{
float:left;width:459px;
}
#test_right{}{
float:right;width:292px; padding:51px 0px 0px 0px;
}
#test_right ul{}{
list-style:none;
}
#test_right ul li{}{
background:url(http://bbs.blueidea.com/attachment.php?aid=79195&noupdate=yes) no-repeat left center; padding:10px 0px 0px 4px; height:27px;
}
#test_right input{}{
height:17px;border:none;font-size:12px;
}
.test_buttom{}{
line-height:28px;text-align:center;
}
.test_buttom a:link, .test_buttom a:visited, .test_buttom a:active {}{
float:left;display:block;width:63px;background: url(http://bbs.blueidea.com/attachment.php?aid=79194&noupdate=yes);text-decoration: none;color:#000000; margin:10px 15px 10px 15px;
}
.test_buttom a:hover {}{
position:relative;left:1px;top:1px;
}
</ style >
</ head >
< body >
< div  id ="test" >
    < div  id ="test_left" ></ div >
    < div  id ="test_right" >
    < ul >
    < li >< input  name ="username"  type ="text"  id ="username"  style ="background:url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes);width:202px;"  onblur ="if (this.value == '') { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes)'; } else { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 135px 0px'; }"  onclick ="if (this.value == '') { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 135px 0px'; }"  maxlength ="10"   /></ li >
    < li >< input  name ="password"  type ="password"  id ="password"  style ="background:url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 0px -17px;width:202px;"  onblur ="if (this.value == '') { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 0px -17px'; } else { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 135px -17px'; }"  onclick ="if (this.value == '') { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 135px -17px'; }"  maxlength ="10"   /></ li >
    < li >< input  name ="username"  type ="text"  id ="username"  style ="background:url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 0px -34px;width:150px;"  onblur ="if (this.value == '') { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 0px -34px'; } else { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 70px -34px'; }"  onclick ="if (this.value == '') { this.style.background='url(http://bbs.blueidea.com/attachment.php?aid=79196&noupdate=yes) 70px -34px'; }"  maxlength ="4"   />< img  src ="http://bbs.blueidea.com/attachment.php?aid=79192&noupdate=yes"  align ="absmiddle"   /></ li >
    </ ul >
    < div  class ="test_buttom" >< a  href ="#" > 登 录 </ a >< a  href ="#" > 刷 新 </ a ></ div >
   </ div >
</ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/CB/archive/2008/03/31/1131195.html