新闻后台登录页面

以下为界面图：
<!Doctype html>
<html>
<head>
<title>西南石油大学电子邮件系统登录界面</title>
    <script>
        function fnLogin()
        {
            var uname=document.getElementById("input_user");
            var password=document.getElementById("input_password")
            if(uname.value.length==0)
            {
                document.getElementById("tip").style.display = "block"
            }
            else if(uname.value=="tom"&&password.value=123)
            {
                window.location="http://mail.swpu.edu.cn/";
                
            }
        }
    </script>
    <style type="text/css">
        #page{
                background-color:white;
                width:auto;height:600px;
                border:1px;
                margin:auto;
        }
        #page_head{
                    background-color:#f5f5f5;
                    height:60px
        }
        #page_body{
                    background-color:yellow;
                    height:460px; width:964px;
                    margin:auto;
                    background-image:url(img/login_bg_02.jpg)
        }
        #page_foot{
                    background-color:#f5f5f5;
                    height:70px;width:964px;
                    margin:auto;
                    padding-top:20px;
                    text-align:center;
        }
        #logo{
                margin-left:100px;
        }
        #login{
                margin-top:60px;
                margin-left:550px;
                width: 380px; height:350px;
                position: absolute;
                background-color:white;
        }
        #loginTitle{
                width:380px;height:40px;padding-top:10px;
                background-color:orange;
                text-align:center;color:#fff;font-size:16px;
        }
        #tip{
                display:none;
                height:40px;width:380px;
                background-color:#cc3300; color:white;
                text-align:center;line-height:50px;
        }
        .textitem1{
                    position:absolute;
                    height:40px;
                    left:30px; top:100px;
        }
        .textitem2{
                    position:absolute;
                    height:40px;
                    left:30px;top:160px;
        }
        .btn{
                height:38px;width:100px;
                border:none;color:#fff;
                font-weight:400;font-size:20px;
                font-family:"微软雅黑";
        }
    </style>
</head>
<body>
<div id="page">
    <div id="page_head">
        <div id="logo">
            <img src="img\login_logo.png"/>
        </div>
    </div>
    <div id="page_body">
        <div id="login">
            <div id="loginTitle"><b>账号登录</b></div>
            <div id="tip">请填写用户名</div>
            <div class="textitem1">
                <input style="width:320px;height:30px"id="input_user"type="text"name="zh"placeholder="用户名">
            </div>
            <div class="textitem2">
                <input style="width:320px;height:30px"id="input_password"type="text"name="zh"placeholder="密码">
            </div>
            
            <div style="position:absolute;left:30px;top:220px;width:320px">
                <span style="color:red;float:left">学生选择@stu.swpu.edu.cn</span>
                <a href="#" style="float:right;">忘记密码</a>
            </div>
            <div style="position:absolute;left:30px;top:260px;width:320px">
                <input onclick="fnLogin()"style="float:right;background:url(img/login_btn.jpg);"
                class="btn"type="submit"value="登  录"/>
            </div>
        </div>
    </div>
    <div id="page_foot">
    西南石油大学
    </div>
</div>
</body>
</html>
以上为代码。
以下为百度云盘链接：
链接：https://pan.baidu.com/s/1igqmmZgHmD26_0mQLlJPKg
提取码：7akd
复制这段内容后打开百度网盘手机App，操作更方便哦
新闻后台登录页面

猜你喜欢
