|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>LoginUI</title>
|
|
|
<script type="text/javascript">
|
|
|
function submits(btn){
|
|
|
var userName = document.getElementById("username").value;
|
|
|
var pwd = document.getElementById("pwd").value;
|
|
|
console.log(userName)
|
|
|
if (userName == "admin" && pwd == "admin") {
|
|
|
window.location.href="MainPageUI.html";
|
|
|
window.event.returnValue=false;
|
|
|
}
|
|
|
else {
|
|
|
alert("用户名或密码不正确！");
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style>
|
|
|
/* 让页面所有元素的padding和margin都设置为0 */
|
|
|
/*{margin:0;padding:0;box-sizing:border-box;}*/
|
|
|
.wrapper {
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
grid-template-rows: 150px 150px;
|
|
|
grid-gap: 10px;
|
|
|
}
|
|
|
/* 设置背景图，字体设置为微软雅黑 */
|
|
|
body{background:url(bg.jpg);font-family: "微软雅黑", sans-serif;}
|
|
|
/* 引用图片高度设置为28px，就是页面最上方像屋檐一样的黑色图 */
|
|
|
.headtop{background:url(dove.png);height:28px;}
|
|
|
/* 整个登录框的css，并使用绝对定位居中 */
|
|
|
.login {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 75%;
|
|
|
margin: -150px 0 0 -150px;
|
|
|
width:300px;
|
|
|
height:300px;
|
|
|
}
|
|
|
|
|
|
.login h1 { color:#555555; text-shadow: 0px 10px 8px #CDC673; letter-spacing:2px;text-align:center;margin-bottom:20px; }
|
|
|
input{
|
|
|
grid-column: 2;
|
|
|
grid-row: 1/3;
|
|
|
padding:10px;
|
|
|
width:100%;
|
|
|
color:white;
|
|
|
margin-bottom:10px;
|
|
|
background-color:#555555;
|
|
|
border: 1px solid black;
|
|
|
border-radius:4px;
|
|
|
letter-spacing:2px;
|
|
|
}
|
|
|
.imgBox{
|
|
|
padding-top: 80px;
|
|
|
border-top: 2px solid cadetblue;
|
|
|
width: 100%;
|
|
|
height: 450px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.imgBox img{
|
|
|
width: 100%;
|
|
|
height: 450px;
|
|
|
margin: 0 auto;
|
|
|
padding-top: 30px;
|
|
|
|
|
|
}
|
|
|
.img1{
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.img2{
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.img3{
|
|
|
display: block;
|
|
|
}
|
|
|
.box1 {
|
|
|
grid-column: 2;
|
|
|
grid-row: 1/3;
|
|
|
}
|
|
|
label{
|
|
|
color: #ffffff;
|
|
|
font-weight: bold;
|
|
|
font-size: 20px;
|
|
|
margin-left: 40px;
|
|
|
}
|
|
|
.box2 {
|
|
|
grid-column: 1;
|
|
|
grid-row: 1 / 3;
|
|
|
}
|
|
|
|
|
|
/* 登录按钮的css，cursor:pointer当鼠标移到按钮上面时变成小手形状 */
|
|
|
form button{
|
|
|
width: 107%;
|
|
|
padding:10px;
|
|
|
background-color:#CDC673;
|
|
|
border:1px solid black;
|
|
|
border-radius:4px;
|
|
|
cursor:pointer;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="wrapper">
|
|
|
<div class="box1">
|
|
|
<div class="headtop"></div>
|
|
|
<div class="login">
|
|
|
<h1 style="font-size: 25px;">//欢迎来到HADG的登入界面//</h1>
|
|
|
<h1 style="font-size: 15px;">请核实您登入的身份</h1>
|
|
|
<form action="" method="post">
|
|
|
<label for="username">用户名</label><br>
|
|
|
<input type="text" name="username" id="username" class="input" value="" placeholder="用户名admin"><br>
|
|
|
<label for="pwd">密码</label><br>
|
|
|
<input type="password" name="" id="pwd" class="input" value="" placeholder="密码admin">
|
|
|
<button type="submit" class="submit" onclick="submits(this)">开始登录</button>
|
|
|
</form>
|
|
|
<td class="login_td" align="right" width=71><a
|
|
|
href="RegisterUI.html"
|
|
|
>新用户注册</a></td>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="imgBox">
|
|
|
<img class="img-slide img1"
|
|
|
src="./assets/images/bg.png"
|
|
|
alt="1"
|
|
|
/>
|
|
|
<img class="img-slide img2"
|
|
|
src="./assets/images/dove.png"
|
|
|
alt="2"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</body>
|
|
|
<script type="text/javascript">
|
|
|
var index=0;
|
|
|
//效果
|
|
|
function ChangeImg() {
|
|
|
index++;
|
|
|
var a=document.getElementsByClassName("img-slide");
|
|
|
if(index>=a.length) index=0;
|
|
|
for(var i=0;i<a.length;i++){
|
|
|
a[i].style.display='none';
|
|
|
}
|
|
|
a[index].style.display='block';
|
|
|
}
|
|
|
//设置定时器，每隔两秒切换一张图片
|
|
|
setInterval(ChangeImg,2000);
|
|
|
</script>
|
|
|
</html> |
