富有想象力的后台登陆框特效

脚本代码

<!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(/Pri_upfile/jspic/2009/login-bg.jpg);
}
#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(/Pri_upfile/jspic/2009/login-input.gif) 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(/Pri_upfile/jspic/2009/login-buttom.jpg);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(/Pri_upfile/jspic/2009/login-text.jpg);width:202px;" onblur="if (this.value == '') { this.style.background='url(/Pri_upfile/jspic/2009/login-text.jpg)'; } else { this.style.background='url(/Pri_upfile/jspic/2009/login-text.jpg) 135px 0px'; }" onclick="if (this.value == '') { this.style.background='url(/Pri_upfile/jspic/2009/login-text.jpg) 135px 0px'; }" maxlength="10" />
      </li>
      <li>
        <input name="password" type="password" id="password" style="background:url(/Pri_upfile/jspic/2009/login-text.jpg) 0px -17px;width:202px;" onblur="if (this.value == '') { this.style.background='url(/Pri_upfile/jspic/2009/login-text.jpg) 0px -17px'; } else { this.style.background='url(/Pri_upfile/jspic/2009/login-text.jpg) 135px -17px'; }" onclick="if (this.value == '') { this.style.background='url(/Pri_upfile/jspic/2009/login-text.jpg) 135px -17px'; }" maxlength="10" />
      </li>
      <li>
        <input name="username" type="text" id="username" style="background:url(/Pri_upfile/jspic/2009/login-text.jpg) 0px -34px;width:150px;" onblur="if (this.value == '') { this.style.background='url(/Pri_upfile/jspic/2009/login-text.jpg) 0px -34px'; } else { this.style.background='url(/Pri_upfile/jspic/2009/login-text.jpg) 70px -34px'; }" onclick="if (this.value == '') { this.style.background='url(/Pri_upfile/jspic/2009/login-text.jpg) 70px -34px'; }" maxlength="4" />
        <img src="/Pri_upfile/jspic/2009/login-code.jpg" align="absmiddle" /></li>
    </ul>
    <div class="test_buttom"><a href="http://www.2ky.cn/">登 录</a><a href="#">刷 新</a></div>
  </div>
</div>
</body>
</html>

当前页面所处路径为共享世纪 / 脚本特效 / 表单特效 / ，本特效的Tag为：共享世纪

很少见的后台登陆口特效，比较要想象力。

共有5张特效，如要使用，自行下载。

会员登陆close X