一个我觉得好看的登录页面（2）-CSDN博客

本文链接：https://blog.csdn.net/weixin_53211817/article/details/136131806

先上效果：

html，css以及js代码：

<!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.0">
    <link rel="shortcut icon" href="../GirlfriendWeb/image/web_pic.png" type="image/x-icon">
    <title>欢迎您来到登录页~</title>
    <style>
    html{
        background:url(backgroundlogin.jpg) no-repeat;
        }
    h1{
        color:#FF7744;
        font-size:50px;
    }
    p{
        color:gold;
        font-weight:bold;
    }
    *{
        font-family: Segoe Print;
    }
    form{
	    text-align: center;
	    position: absolute;  
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
    }
 
    input[type=text],input[type=password]{
	    background-color: white;  
	    color: black;
	    border:none;
	    border-radius: 20px;
	    outline: none;
	    text-align: center;
	    height: 50px;
	    width: 250px;
	    margin: 5px;
    }
 
    input[type=button]{
	background-color: #45A0F2; 
	color: white;
	border:none;
	border-radius: 20px;
	outline: none;
	text-align: center;
	height: 50px;
	width: 250px;
	margin: 5px;
    }
 
    input[type=text]:hover,input[type=password]:hover{
	    outline: none;  
	    background-color: #65BCD6;
	    color: white;
	    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.45), 0 6px 20px 0 rgba(0,0,0,0.19); 
    }
 
    input[type=button]:hover{
	    outline: none; 
	    background-color:#168DBE;
	    color: white;
	    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.45), 0 6px 20px 0 rgba(0,0,0,0.19); 
    }
    </style>
</head>
<body>
    <div>
        <form name="f" onsubmit="check(this)">
			<h1>Dear,welcome to the login page!</h1>
			<input type="text" id="name" placeholder="账号"><br>
			<input type="password" id="pass" placeholder="密码"><br>
			<input type="button" onclick="check(this)" value="Click me~">
			<p>© 2022 HeartDance 版权所有</p>
		</form>
    </div>
	<script>function check(thisform) {
		var name=document.getElementById("name").value;
		var pass=document.getElementById("pass").value;
		if (name=="lxyzyf99" && pass=="20181222" || name=="zyf20020420" && pass=="yifan666") {  
			alert("hi宝贝，请你进入心动空间~");
			window.document.f.action="https://login-in-1312741596.cos.ap-nanjing.myqcloud.com/index.html"; 
			window.document.f.submit();
		}
		else{
			alert("唉，出错了亲爱的，请再试一次叭");
		}
	}</script>
</body>
</html>