效果不错的登录框制作
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>
<!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>