由于是静态界面所以我换成了html重写，可是我发现直接预览是没问题的，但是一旦运行到TomCat上就会出错
怎么解决啊，换台式运行，就错乱了（而且昨天好好的，今天一运行错乱了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>浙师艺行</title>
<link rel="icon"
href="https://pic.stackoverflow.wiki/uploadImages/125/113/137/144/2021/08/04/16/00/bc3fc577-9dfb-451b-928d-3d5f9f909b89.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/component.css"/>
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
<script>
function jump1() {
window.open("/pages/login/register.html");
alert(window.location);
}
function jump2() {
window.open("/pages/login/login.html");
alert(window.location);
}
</script>
</head>
<body>
<div class="container demo-1">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<div class="logo_box">
<h3>欢迎来到浙师艺行</h3>
<form>
<div class="mb2">
<button type="submit" class="act-but submit"
style="color: #FFFFFF;width: 330px;height: 46px;" onclick="jump1()">注册
</button>
</div>
<div class="mb2">
<button type="submit" class="act-but submit"
style="color: #FFFFFF;width: 330px;height: 46px;" onclick="jump2()">登录
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-1.js"></script>
<div style="text-align:center;">
</div>
</body>
</html>
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
body {
background: #fff;
color: #383a3c;
font-weight: 400;
font-size: 1em;
line-height: 1.25;
font-family: 'Raleway', Calibri, Arial, sans-serif;
}
a, button {
outline: none;
}
a {
color: #566473;
text-decoration: none;
}
a:hover, a:focus {
color: #34495e;
}
section {
padding: 1em;
text-align: center;
}
p.ref {
text-align: center;
padding: 2em 1em;
}
```css
/* Header */
.large-header {
position: relative;
width: 100%;
background: #333;
overflow: hidden;
background-size: cover;
background-position: center center;
z-index: 1;
}
.demo-1 .large-header {
background-image: url('../img/demo-1-bg.jpg');
}
.logo_box{
width: 400px;
height: 500px;
padding: 35px;
color: #EEE;
position: absolute;
left: 50%;
top:50%;
margin-left: -200px;
margin-top: -250px;
}
.logo_box h3{
text-align: center;
height: 20px;
font: 20px "microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei",sans-serif;
color: #FFFFFF;
height: 20px;
line-height: 20px;
padding:0 0 35px 0;
}
.forms{
width: 280px;
height: 485px;
}
.logon_inof{
width: 100%;
min-height: 450px;
padding-top: 35px;
position: relative;
}
.input_outer{
height: 46px;
padding: 0 5px;
margin-bottom: 30px;
border-radius: 50px;
position: relative;
border: rgba(255,255,255,0.2) 2px solid !important;
}
.u_user{
width: 25px;
height: 25px;
background: url(../img/login_ico.png);
background-position: -125px 0;
position: absolute;
margin: 10px 13px;
}
.us_uer{
width: 25px;
height: 25px;
background-image: url(../img/login_ico.png);
background-position: -125px -34px;
position: absolute;
margin: 10px 13px;
}
.l-login{
position: absolute;
z-index: 1;
left: 50px;
top: 0;
height: 46px;
font: 14px "microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei";
line-height: 46px;
}
.text{
width: 220px;
height: 46px;
outline: none;
display: inline-block;
font: 14px "microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei";
margin-left: 50px;
border: none;
background: none;
line-height: 46px;
}
/*///*/
.mb2{
margin-bottom: 20px
}
.mb2 a{
text-decoration: none;
outline: none;
}
.submit {
padding: 15px;
margin-top: 20px;
display: block;
}
.act-but{
line-height: 20px;
text-align: center;
font-size: 20px;
border-radius: 50px;
background: #0096e6;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}
audio, canvas, video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
a:focus {
outline: thin dotted;
}
a:active, a:hover {
outline: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b, strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
mark {
background: #ff0;
color: #000;
}
code, kbd, pre, samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre-wrap;
}
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
button, input, select, textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button, input {
line-height: normal;
}
button, select {
text-transform: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled], html input[disabled] {
cursor: default;
}
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
```
