<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<form action="2.学生信息管理.html" method="post">
<div id="login">
<span >
<h1 id="lo">学生信息管理系统</h1>
</span>
<div id="use">账号
<input text="text" id="user" required placeholder="请输入用户名" >
</div>
<br>
<div id="psw">密码
<input text="password" id="password" required placeholder="请输入密码" >
</div>
<br>
<br>
<button type="submit" onclick="myFunction()" id="butt">登录</button>
</div>
</form>
</body>
<script>
<!-- 登陆验证-->
function myFunction() {
if (document.getElementById("user").value == "a") {
if (document.getElementById("password").value == "1") {
alert("登录成功");
}
else {
alert("密码错误");
}
}
else {
alert("账号密码都错");
}
}
</script>
</body>
</html>2.cs
body{
/*初始化 */
margin: 1;
padding: 0;
}
#login{
border:1px solid rgb(18, 205, 205);
width: 500px;
height: 389px;
/* 固定定位，浏览器怎么滑动，这个块都不变 */
position: fixed;
right: 80px;
top: 150px;
/* background-color: #68a3c6;
background-image: linear-gradient(160deg, #68a3c6 0%, #80D0C7 100%);
*/
}
#lo{
width:500px;
text-align:center;
font-size: 50px;
}
#use,#psw{
width:70px;
text-align:center;
font-size: 25px;
}
#user,#password{
width:300px;
text-align:center;
font-size: 25px;
}
#butt{
width:500px;
height: 60px;
text-align:center;
font-size: 20px;
}