登录页面

最新推荐文章于 2024-07-22 21:11:24 发布

dmbuwt0370

最新推荐文章于 2024-07-22 21:11:24 发布

阅读量189

点赞数

文章标签： 5g javascript ViewUI

原文链接：http://www.cnblogs.com/zwx-code/p/10606223.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>西南石油大学登录界面</title>
<link href="Login.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Login.js"></script>
</head>
<body>
    <div class="top">
        <div class="head">
            <div class="logo">
                <img src="../src/login_logo.png">
            </div>
            <a href="http://stu.swpu.edu.cn/?q=help" target="_blank" class="help">帮助</a>
        </div>
    </div>

    <div class="content">
        <div class="box" style="right: 60px; top: 60px; left: auto;" id="box">
            <ul class="tab" id="tab">
                <li οnclick="tabClick(this)" id="via_acct" class="current">帐号登录</li>
                <li class="dragbar" id="dragbar"></li>
            </ul>
            <div class="boxc" id="tab_via_acct" style="">
                <h3 id="msg">用户登录</h3>
                <div class="text_item">
                    <input type="text" class="text" id="user" style="font-size: 20px;"
                        autocomplete="off" _placeholder="用户名"
                         placeholder="用户名">
                </div>
                <div class="text_item">
                    <input type="hidden" class="text" name="user" value=""> <input
                        type="password" class="text" name="password" style="font-size: 20px;"
                        id="password" _placeholder="密码"
                         placeholder="密码">
                </div>
                <div class="attention">
                    <span style="float: left"> <input type="hidden"
                        name="login_ssl" value="0"> <font
                        style="color: red; font-family: 宋体; clear: both;">学生选择@stu.swpu.edu.cn</font></span>
                    <span class="forget_password"> <a href="/?q=resetpw"
                        target="_self">忘记密码</a>
                    </span>
                </div>
                <div class="btn_Login">
                    <input type="submit" name="submit" class="btn" id="Login" value="登  录"
                        style="float: right">
                    <div style="clear: both"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">西南石油大学</div>
</body>
</html>

@charset "UTF-8";

* {
    margin: 0;
    padding: 0
}

body {
    font-family: "微软雅黑", Verdana, Geneva, sans-serif;
    font-size: 12px;
    background: #fff
}

.top {
    height: 76px;
    line-height: 90px;
    background: #f5f5f5;
    border-bottom: 1px solid #e5ecf0;
    overflow: hidden;
}

.head {
    width: 964px;
    margin: 0 auto;
}

.logo {
    padding-top: 15px;
    float: left
}

.help {
    float: right;
    font-size: 14px;
    font-weight: 700;
    color: #787878;
    text-decoration: none;
}

.content {
    width: 964px;
    height: 460px;
    margin: 20px auto 0 auto;
    background: url(../src/login_bg_05.jpg) no-repeat;
    position: relative
}

.bottom {
    height: 70px;
    border-top: 1px solid #fff;
    border-radius: 0 0 5px 5px;
    background: #f7f7f7;
    clear: both;
    width: 964px;
    margin: 0 auto;
    text-align: center;
    line-height: 70px;
    color: #999;
}

.box {
    width: 376px;
    position: absolute;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4)
}

.tab {
    border-bottom: 3px solid #ff7e00;
    border-bottom: 3px solid rgba(255, 126, 0, 0.8);
    overflow: hidden;
}

.tab li {
    height: 40px;
    line-height: 40px;
    float: left;
    width: 354px;
    text-align: center;
    background: url(../src/tabli.png);
    _background: #333;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.tab li.current {
    background: url(../src/tablicurrent.png);
    _background: #ff7e00;
}

.tab li.dragbar {
    width: 22px;
    background: url(../src/dragbar.png);
    cursor: move
}

.boxc {
    background: #fff;
    padding: 20px 0 30px 42px;
}

.text_item {
    height: 38px;
    line-height: 38px;
    width: 292px;
    margin: 15px 0 30px 0;
}

.attention {
    color: #999;
    width: 292px;
    overflow: hidden;
    position: relative;
    top: -3px;
    font-size: 14px;
}

.forget_password {
    float: right;
}

.btn_Login {
    height: 38px;
    width: 142px;
    border: none;
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    background: url(../src/login_btn.jpg) 0 0;
    font-size: 20px;
    font-family: "微软雅黑"
}

.btn_Login a {
    float: right;
    color: #787878;
    text-decoration: none;
}

.btn {
    height: 38px;
    width: 142px;
    border: none;
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    background: url(../sr/login_btn.jpg) 0 0;
    font-size: 20px;
    font-family: "微软雅黑"
}

fieldset {
    background: #cc3300;
    border: none;
    padding: 0 2em 2em 2em;
}

fieldset #msg {
    display: block;
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-size: 17px;
    font-weight: normal;
    color: #fff;
    background-color: #cc3300;
    visibility: hidden;
}

/**
 * 
 */
function Login() {
    var subButton = document.getElementById("Login");
    var user_name = document.getElementById("user");
    var user_password = document.getElementById("password");

    subButton.onclick = function() {
        if (user_name.value == "" || user_password.value == "") {
            var info = document.getElementById("msg");
            var infoStyle = info.style;
            infoStyle.visibility = "visible";
            info.innerText = "用户名或密码不能为空";
        } else if (user_name.value == "tom" && user_password.value == 123) {
            window.location.href = "http://mail.swpu.edu.cn/";
        } else {
            var info = document.getElementById("msg");
            var infoStyle = info.style;
            infoStyle.visibility = "visible";
            info.innerText = "用户名或密码错误";
        }
    }
}
window.onload = Login;

效果图：

网盘：

链接: https://pan.baidu.com/s/1v8fSrDTfcZ4jYcPZDf0T5g

提取码: 9di8

大致照着原网页的布局制作，密码输入不正确的颜色不能正确显示。

转载于:https://www.cnblogs.com/zwx-code/p/10606223.html

dmbuwt0370

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
登录页面

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>西南石油大学登录界面</title><link href="Login.css" rel="stylesheet" type="text/css" /><scr...
复制链接

扫一扫