王麒越_20271246.html

<!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">
    <title>登录页面</title>

    <style>
        body{
            height: 300px;
    width: 300px;
    background: cornflowerblue;
    margin: 0 auto;
        }
        .box{    
    height: 100px;
    width: 300px;
    background: cornflowerblue;
    align-items: center;
    text-align: center;
    align:center;
        }

    </style>
<script>
    function login()
    {
        var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    if (username == "wqy" && password == "20271246") {
     alert("登录成功")
    } else {
        alert("用户名或密码错误")
        event.preventDefault();
    }
    }
</script>
</head>
<body >
    
  
    <div class="box" >
        <h1 textAlign: ‘center’  >登录页面</h1>
        <p>username:wqy</p>
        <p>password:20271246</p>
    <div >
        <span>
            username:
        </span>
        <input type="text" name="username" id="username">
    </div>
<div >
    <span>password:</span>
    <input type="password" name="password" id="password">
</div>
<div >
    
<input class="inputButton" type="submit" onclick="login()" value="登录">

</div>
</div>
</body>
</html>