停车场管理系统页面实现（1）登陆页面设计

首先，用HTML搭建页面框架，具体代码如下：

<div class="background">

        <div class="dl">

            <form name="f" οnsubmit="check(this)">

                <h1 align="center">停车场管理系统</h1>

                <h3 align="center">账号<input type="text" class="text" id="name" placeholder="请输入账号" autofocus></h3>

                <h3 align="center">密码<input type="password" id="password" class="password" placeholder="请输入密码"

                        autofocus></h3>

                <input type="button" οnclick="check(this)" value="登陆" class="but">

                <a href="./wjmm.html">忘记密码</a>

                <a href="./xyh.html">新用户注册</a>

            </form>

        </div>

    </div>

接着配置css样式：

.background{

    height: 100vh;

    background-image: url("../img/tt.jpg");

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-size: 100% 100%;

}

.dl{

    width: 300px;

    height: 300px;

    background-color: white;

    border: 1px solid black;

    text-align: center;

    position: absolute;

    margin: 100px 700px 300px;

}

h1{

    padding-top: 35px;

}

h3{

    padding-top: 20px;

}

.but{  

    width: 100px;

    background-color: aqua;

    position: relative;

    left: 90px;

    top: 10px;

}

a{

    position: relative;

    right: 30px;

    top: 50px;

}

 最后，添加js，完成页面的登陆功能：

 

function check(thisform) {

    var name = document.getElementById("name").value；//获取用户名

    var pass = document.getElementById("password").value;//获取密码

    if (name == "admin" && pass == '123456') {//登陆用户名与密码

        alert("登陆成功！");

        window.document.f.action = "index.html";//跳转下一页

        window.document.f.submit();

    }

    else {

        alert("用户名或密码错误！");

    }

}