当前位置:首页 > 网页设计 >Javascript >
发布时间: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>密 :码:</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关于我们 - 网站声明 - 联系我们