<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="moban1830/javascript/jquery.min.js"></script><!--自己去下载一个JQUERY-->
<style>
.header{
width:100%
border:1px solid red
}
.left{
float:left
width:40%
border:1px solid red
}
.right{
float:left
width:58%
border:1px solid red
}
.ok{
display:none
}
#tishi{
color:red
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="left">
<div class="up">
<p>
用户名：<input type="text" name="user" id="user"></input>
</p>
<p>
密 码：<input type="password" name="password" id="password"></input>
</p>
<p id="tishi"></p>
<p style="text-align:center">
<input type="button" name="new" id="new" value="注册"></input>
<input type="button" name="up" id="up" value="登录"></input><input type="button" name="re" id="re" value="重置"></input>
</p>
</div>
<!-- 这里是登录后显示的内容 -->
<div class="ok">
<p>欢迎您的登录！</p>
<p class="name"></p>
<input type="button" name="off" id="off" value="注销"></input>
</div>
</div>
<div class="right">这里是右边的块</div>
</body>
<script>
$(document).ready(function(e) {
$("#up").click(function(){
if($("#user").val()==""){
$("#tishi").html("用户名不能空！")
}else
if($("#password").val()==""){
$("#tishi").html("密码不能空！")
}else
if($("#user").val()=="111"&&$("#password").val()=="111"){
$(".up").css("display","none")
$(".name").html("111！")
$(".ok").css("display","block")
} else{
$("#tishi").html("用户名或密码不正确！")
}
})
$("#off").click(function(){
$(".up").css("display","block")
$(".ok").css("display","none")
})
})
</script>
</html>
大概的思路告诉你吧，你已经写到判断input内账号和密码真确的情况
if(用户名&密码都对）{
这个块开始是display是none，如果密码正确设置display为block,同时将登陆框的display设置为none；
然后去监听注销这个按钮，如果点击了，上面的步骤反过来就好了。
}
最主要的题目要求使用jquery，你没有用啊。
可以用html进行程序编写，从而实现系统登陆界面文本框前有小图案的需求。可参照以下代码为模板进行编写：完整的代码1：https://download.csdn.net/download/mingzi1245/12406208 代码2https://download.csdn.net/download/mingzi1245/12406204
html是超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
