JavaScript一个用户登录的简单界面

来源：互联网发布：单片机制作u盘编辑：程序博客网时间：2024/05/04 17:59
<!DOCTYPE html><html>  <head>   <title>登录框特效</title>   <style type="text/css" >*{margin:0px;padding:0px;font-size:12px;}#login{width:384px; border:1px solid #999;}#login .top{height:70px;line-height:70px;padding-left:70px;width:314px;background:#F4F4F4 url(images/login.gif) no-repeat 26px  16px;font-size:14px;font-weight:bold;}#login .body{height:160px;padding:20px;width:344px;border-top:1px solid #999;border-bottom:1px solid #999;}#login .body div{height:50px;line-height:50px;}#login .body lable{text-align:right;width:60px;border:1px solid red;}#login .body div.pt  input{height:30px;line-height:30px;border:1px solid #999;width:190px;}#login .bt{height:30px; line-height:30px;  text-align:center; background-color:#EDF1F3;}#login input.btn{width:100px;height:33px;line-height:33px;text-align:center;color:#fff;border:none;font-weight:bold;background:url(images/bt.gif) no-repeat;}#login .body div.pt  input.chooseInput{border:1px solid blue;}</style><script type="text/javascript">$(document).ready(function(){});</script>  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>  <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script></head>    <body>  <div id="login"><div class="top">    登录通行证    </div>    <div class="body">    <form>            <div class="pt">                <label>用户名：</label>                <input type="text" class=""  name="username" />            </div>            <div class="pt">                <label>密    码：</label>                <input type="text" class=""  name="username" />                <a href="#">忘记密码？</a>            </div>            <div class="">                 <input  type="submit" class="btn"  value="登录"/>                 <input  type="button" class="btn"  value="注册"/>            </div>        </form>    </div>    <div class="bt">    使用合作网站账号登陆 <a href="#"> <img src="images/wb.gif" /></a>  <a href="#"> <img src="images/qq.gif" /></a>    </div></div>    </body></html>
0 0