静态登录页面示例,-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51105538/article/details/131060183

登录页面可以根据不同的账号进入不同的页面（这个账号没有链接数据库，都在代码中，哈哈哈技术有限~）

登录页的代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>学生成绩管理系统</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        body {
            background: url(img/主页a.png);
        }

        #d1 {
            width: 100%;
            height: 100px;
            /* background-color: #008000; */
            line-height: 100px;
        }

        #d2 {
            width: 100%;
            height: 50px;
            /* background-color: #1E90FF; */
        }

        #d31 {
            width: 35%;
            height: 450px;
            /* background-color: #808080; */
            float: left;
        }

        #d32 {
            width: 30%;
            height: 450px;
            background: rgba(200, 190, 220, 0.3);
            float: left;
            border-radius: 30px;
            /* padding-left: 120px; */
            padding-right: 0px;
        }

        #d33 {
            width: 35%;
            height: 450px;
            /* background-color: #808080; */
            float: left;
        }

        #zhanghao

        {
            border-radius: 10px;
            border: 1px solid #000;
            align-content: center;
        }

        input[type=password],
        textarea {
            border-radius: 10px;
            border: 1px solid #000;
            align-content: center;
        }

        input[type=submit],
        textarea {
            border-radius: 15px;
            border: 1px solid;
            background-color: lightseagreen;
        }

        input[type=reset],
        textarea {
            border-radius: 15px;
            border: 1px solid;
            background-color: yellowgreen;
        }

        #yanzhengma {
            width: 60px;
            height: 30px;
            font-size: 24px;
            text-align: center;
        }

        #d9 {
            width: 60px;
            height: 40px;
            background-color: #808080;
            display: inline-block;
            line-height: 40px;
        }
        #checkCode{
            width: 200px;
            height: 30px;
            border-radius: 10px;
            font-size: 20px;
            text-align: center;
        }
        #yzm{
            width: 100px;
            height: 30px;
            border-radius: 10px;
            font-size: 20px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        var code ; //在全局 定义验证码
        function createCode(){
            code = new Array();
            var codeLength = 4;//验证码的长度
            var checkCode = document.getElementById("checkCode");
            checkCode.value = "";

            var selectChar = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');

            for(var i=0;i<codeLength;i++) {
                var charIndex = Math.floor(Math.random()*32);
                code +=selectChar[charIndex];
            }
            if(code.length != codeLength){
                createCode();
            }
            checkCode.value = code;
        }


        function hao() {
            var z = document.getElementById("zhanghao").value;
            var p = document.getElementById("pass").value;
            var flag = 0;
            if (z == "") {
                alert("账号不能为空");
                flag = 0;
            } else if (p == "") {
                alert("密码不能为空!");
                flag = 0;
            } else if (p.length < 6) {
                alert("密码小于六位!");
                flag = 0;
            } else flag = 1;
            if (flag == 1) {
                var zuhe = document.getElementsByName("user");
                for (var i = 0; i < zuhe.length; i++) {
                    if (zuhe[i].checked) {
                        var ischecked = zuhe[i].value;
                    }
                }
                var inputCode = document.getElementById("yzm").value.toUpperCase();
                var cc = 0;

                if(inputCode.length <=0) {
                    alert("请输入验证码！");
                    cc = 0;
                    return;
                }
                else if(inputCode != code ){
                    alert("验证码输入错误！");
                    createCode();
                    cc = 0;
                    return;
                }
                else {
                    /*alert("验证码无误");*/
                    cc = 1;
                }
                if (z == "student" && p == "student" && ischecked == 0 && cc==1) {
                    window.location.href = "student.html";
                    window.event.returnValue = false;
                }
                else if (z == "teacher" && p == "teacher" && ischecked == 1 && cc==1) {
                    window.location.href = "teacher.html";
                    window.event.returnValue = false;
                }
                else if (z == "administrator" && p == "administrator" && ischecked == 2 && cc==1) {
                    window.location.href = "administrator.html";
                    window.event.returnValue = false;
                } else{
                    alert("账号无效或身份错误!");
                }

            }

        }
    </script>
</head>

<body>
<div id="d1">
    <h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <font size="" color="white" id="">学生成绩管理系统</font>
    </h1>
</div>
<div id="d2">

</div>
<div id="d31">

</div>
<div id="d32">
    <form action="" method="" name="a">
        <br>
        <font size="5" color="white">
            <p align="center">欢迎登录平台</p>
        </font><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <font size="5" color="">账号 </font>
        <input type="text" style="width: 240px;height: 30px;" name="zhanghao" id="zhanghao" value="" size="" placeholder="&nbsp;&nbsp;&nbsp;请输入账号" /><br>
        <br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <font size="5" color="">密码 </font>
        <input type="password" style="width: 240px;height: 30px;" name="pass" id="pass" value="" placeholder="&nbsp;&nbsp;&nbsp;请输入不少于六位的密码" /><br><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <!-- 验证码 -->
        <input type="text" onclick="createCode()" readonly="readonly"
        id="checkCode" class="unchanged" style="width: 6.1em" placeholder="单击获取验证码" name="check" />
        <input type="text" id="yzm" name="yzm"/>
        <br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="radio" name="user" id="" value="0" checked=""/>
        <font size="5" color="">学生</font>
        <input type="radio" name="user" id="" value="1"  />
        <font size="5" color="">教师</font>
        <input type="radio" name="user" id="" value="2" />
        <font size="5" color="">管理员</font>
        <br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="submit" name="" id="" value="登录" style="width: 100px;height: 30px;" onclick="hao()" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="reset" name="" id="" value="重置" style="width: 100px;height: 30px;" />
        <br><br>
    </form>
</div>
<div id="d33">

</div>
</body>

</html>

其他页面代码就不放了，太乱太杂了，感觉还可以的话可以参考一下页面的布局。页面的左侧类似于固定的导航栏，点击之后内容在它左侧的div中显示。

学生页面