jQuery快速高效制作网页交互特效第五章课后5

最新推荐文章于 2018-04-23 19:16:06 发布

子晴呀

最新推荐文章于 2018-04-23 19:16:06 发布

阅读量991

点赞数

本文链接：https://blog.csdn.net/qq_36074064/article/details/70808899

版权

<!DOCTYPE html>
<html>
  <head>
    <title>shangji4.html</title>
   <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
     <style type="text/css" >
*{
	margin:0px;
	padding:0px;
	font-size:12px;
}
a{
	color:#174DAD;
	text-decoration:none;
}
#login{
	margin:10px;
	width:451px; 
	border:1px solid #E6E6E6;
}
#login .top{
	height:70px; 
	width:450px;
	background:#fff url(图片/top.jpg) no-repeat 20px 20px;
 
}
#login .body{ 
	padding:20px; 
	border-top:1px solid #E6E6E6;	 	
}
#login .body div{
	height:50px;
	line-height:50px;
}
#login .body lable{
	text-align:right;
	width:60px; 
}
#login .body div.pt  input{
	height:30px;
	line-height:30px;
	border:1px solid #999;
	width:190px;
}
#login  .body div.pt input.code{
	width:80px;
	
}
  
#login .bt{
	height:80px;  
	text-align:center; 
	background:url(图片/otherlogin.jpg) no-repeat; 
}
#login input.btn{
	margin-top:20px;
	margin-left:48px;
	width:93px; 
	height:27px;
	text-align:center;
	color:#fff;
	border:none; 
	background:url(图片/login.jpg) no-repeat;
}

#login .body div.pt  input.chooseInput{
	border:2px solid blue;
}
</style>
<script type="text/javascript">	
	$(document).ready(function(){
		$(".pt").find("input.text").focus(function(){
			$(this).addClass("chooseInput");	
		});
		$(".pt").find("input.text").blur(function(){
			$(this).removeClass("chooseInput");	
		});		
	});
</script>
  </head>
  
  <body>
    <div id="login">
	<div class="top"> 
    </div>
    <div class="body">
    	<form>
            <div class="pt">
                <label>用户名：</label>
                <input type="text" class="text"  name="username" />
            </div>
            <div class="pt">
                <label>密    码：</label>
                <input type="text" class="text"  name="password" />
                <a href="#">忘记密码？</a>
            </div>
            <div class="pt">
                <label>验证码：</label>
                <input type="text" class="code"  name="code" />
                <img src="图片/code.jpg" class="codeimg" />
                <a href="#">换张图</a>
            </div>
            <div class="lg">
                 <input  type="submit" class="btn"  value=" "/> 
            </div>
        </form>
    </div>
    <div class="bt">
    	 
    </div>
</div>
  </body>
</html>