当前位置:首页 > 网页设计 >Javascript >

jQuery登录框特效

发布时间:2017-04-26 09:06:21 作者:佚名 阅读:(84)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录框特效</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <style type="text/css" rel="stylesheet">
        *{
            margin:0px;
            padding:0px;
            font-size: 12px;
        }
  #login{
      width:386px;
      border:1px solid red ;
  }
#login .top{
    height:70px;
    line-height: 70px;
    padding-left: 70px;
    width: 316px;
    background:#aaaaaa url(images/login.gif) no-repeat 26px 16px ;
    font-size: 14px;
    font-weight: bold;
 
}
#login .body{
    height:160px;
    padding:20px ;
    width:336px;
    border-top: 1px solid yellow;
    border-bottom:1px solid yellow;
}
#login .body div{
    height:50px;
    line-height: 50px;
}
#login .body label{
    text-align: right;
    width:60px;
 
}
#login .body div.pt input {
    height: 30px;
    line-height: 30px;
    border: 1px solid darkgoldenrod;
    width: 190px;
}
#login .bt{
    height:30px ;
    line-height: 30px;
    text-align: center;
    background-color: darkkhaki;
}
#login input.btn{
    width:100px ;
    height:33px ;
    line-height: 33px ;
    text-align: center;
    color:yellow;
    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(){
            $(".pt").find("input").focus(function(){
                $(this).addClass("chooseInput");
            });
            $(".pt").find("input").blur(function(){
                $(this).removeClass("chooseInput");
            });
        });
    </script>
 
</head>
<body>
<div id="login">
    <div class="top">登录通行证</div>
    <div class="body">
        <form>
            <div class="pt" id="uu">
                <label>用户名:</label>
                <input type="text" class="" name="username">
            </div>
            <div class="pt" >
                <label>密&nbsp:码:</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" alt=""></a> <a href="#"> <img src="images/qq.gif" /></a>
        </div>
</div>
</body>
</html>

欢迎分享转载→ jQuery登录框特效

© 2015-2021 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们