效果如下：
此效果运用了html，js，css
参考了前端之登录注册页面案例_前端登录注册页面_程序员班长的博客-CSDN博客s
借此来学习，真正实战
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
height:100%;
background-color:darkslategray
}
h1{
text-align: center;
color:aquamarine;
}
.wai{
margin:100px auto;
width: 30%;
}
form{
background-color:aquamarine;
height: 300px;
width: 100%;
border-radius: 10px;
position: relative;
}
label{
font-size: 20px;
margin-left: 40px;
font-weight:2px;
}
input{
margin-left: 40px;
}
.submit{
background-color: black;
color: aliceblue;
text-align: center;
border-radius: 5px;
margin-left:50%;
}
.left{
position: absolute;
left: 20px;
}
.right{
position: absolute;
right: 20px;
}
</style>
</head>
<body>
<div class="wai">
<h1>用户登录</h1>
<form>
<label for="username">用户名</labor><br>
<input type="text" name="username" id="username" value="" placeholder="请输入用户名">
<br>
<label for="password">密码</label><br>
<input type="password" name="pass" id="pass" value="" placeholder="请输入密码">
<div class="choose1">
<input type="checkbox" value="" name="">
<span>记住密码</span>
</div>
<div class="choose2">
<input type="checkbox" value="" name="">
<span>阅读并同意页面所指定的服务协议和个人信息保护政策</span>
</div>
<br>
<button type="submit" class="submit" οnclick="submits(this)">登录</button>
<br>
<a href="index.html" class="left">回到首页</a>
<a href="register.html" class="right">注册账号</a>
</form>
</div>
<script>
function submits(byd){
var userName = document.getElementById("username").value;
var pwd = document.getElementById("pass").value;
console.log(userName)
if (userName == "admin" && pwd == "admin") {
alert("成功！")
}
else {
alert("用户名或密码不正确！");
}
};
</script>
</body>
</html>
2884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
