问题遇到的现象和发生背景
html界面错乱
用代码块功能插入代码，请勿粘贴截图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit" />
<title>华强北商城</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../bootstrap3/js/holder.js"></script>
<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
<script src="../bootstrap3/js/bootstrap.js"></script>
<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="../css/top.css" />
<link rel="stylesheet" type="text/css" href="../css/index.css" />
<link rel="stylesheet" type="text/css" href="../css/layout.css" />
<link rel="stylesheet" type="text/css" href="../css/login.css" />
<link rel="stylesheet" type="text/css" href="../css/footer.css" />
<script src="../bootstrap3/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/autoLogin.js" type="text/javascript"></script>
</head>
<body>
<header class="header">
<img src="../images/index/stumalllogo.png" alt="" />
<span class="pull-right"><small>欢迎访问</small><b>华强北商城</b></span>
</header>
<div class="container mycontent text-left">
<div class="loginDiv">
<p>用户登录</p>
<form id="form-login" action="index.html" class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-md-3 control-label">名字：</label>
<div class="col-md-8">
<input name="username" type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label"> 密码：</label>
<div class="col-md-8">
<input name="password" type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-6">
<div class="checkbox">
<label>
<input type="checkbox" id="auto">自动登录
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input id="btn-login" class="btn btn-primary" type="button" value="登录" />
<span class="pull-right"><small>还没有账号？</small><a href="register.html">注册</a></span>
</div>
</div>
</form>
</div>
</div>
<footer class="footer">
<div class="text-center rights container">
<div class="col-md-offset-2 col-md-2">
<span class="fa fa-thumbs-o-up"></span>
<p>品质保障</p>
</div>
<div class="col-md-2">
<span class="fa fa-address-card-o"></span>
<p>私人订制</p>
</div>
<div class="col-md-2">
<span class="fa fa-graduation-cap"></span>
<p>学生特供</p>
</div>
<div class="col-md-2">
<span class="fa fa-bitcoin"></span>
<p>专属特权</p>
</div>
</div>
<div class="container beforeBottom">
<div class="col-md-offset-1 col-md-3">
<div><img src="../images/index/stumalllogo.png" alt="" class="footLogo" /></div>
<div><img src="../images/index/footerFont.png" alt="" /></div>
</div>
<div class="col-md-4 callus text-center">
<div class="col-md-4">
<ul>
<li><a href="#"><p>买家帮助</p></a></li>
<li><a href="#">新手指南</a></li>
<li><a href="#">服务保障</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</div>
<div class="col-md-4">
<ul>
<li><a href="#"><p>商家帮助</p></a></li>
<li><a href="#">商家入驻</a></li>
<li><a href="#">商家后台</a></li>
</ul>
</div>
<div class="col-md-4">
<ul>
<li><a href="#"><p>关于我们</p></a></li>
<li><a href="#">联系我们</a></li>
<li>
<span class="fa fa-wechat"></span>
<span class="fa fa-weibo"></span>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="col-md-5">
<p>华强北商城客户端</p>
<img src="../images/index/ios.png" class="lf">
<img src="../images/index/android.png" alt="" class="lf" />
</div>
<div class="col-md-6">
<img src="../images/index/erweima.png">
</div>
</div>
</div>
<div class="col-md-12 text-center bottom">
Copyright © 2022 dnsc.cn All Rights Reserved 京ICP备114514号-76 <a target="_blank" style="font-size: 12px" href="http://www.baidu.com/">YYY科技集团有限公司</a> 版权所有
</div>
</footer>
<script type="text/javascript">
$("#btn-login").click(function (){
$.ajax({
url:"/users/login",
type:"POST",
data:$("#form-login").serialize(),
dataType:"JSON",
success:function (json){
if(json.state==200){
location.href="index.html";
//将服务器返回的头像设置到cookie中
$.cookie("avatar",json.data.avatar,
{expires:7});
console.log(json.data.avatar);
}else {
alert("登录失败");
}
},
error:function (xhr) {
alert("登陆时产生未知的异常"+xhr.message);
}
});
});
</script>
</body>
</html>
