servlet登录界面进行用户名和密码验证

1.代码展示

<!DOCTYPE html>
<html>
    <head>
        
        <title>登录</title>
        <link href="login.css" type="text/css" rel="stylesheet"/>
        
    </head>
    <body>
        <div id="topBar">
            <div class="topContent">
                <i></i>
                <p>学生登录</p>
                <span>帮助</span>
            </div>
        </div>

        <div id="main">
            <div id="sign_in_part" class="login_form">
                <p class="title_caption">账号登录</p>
                <div class="login_block">
                    <form method="post" action="check" id="loginForm" onsubmit="return checkForm()">
                        <fieldset>
                            <h1 id="login-info">用户登录</h1>
                            <div class="login_input">
                                <input type="text" id="checkInID" name="checkInID" placeholder="请输入账号" required/>
                                <div class="clear"></div>
                            </div>
                            <div class="login_input">
                                <input type="password" id="checkInPass" name="checkInPass" placeholder="请输入密码" required/>
                                <div class="clear"></div>
                            </div>
                            
                            <div class="login_sub_in">
                                <button type="submit" value="登录" id="subBut">登录</button>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
        <div id="foot">
            <p>西南石油大学登录</p>
        </div>
    </body>
</html>
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #111;
}

#topBar {
    width: 100%;
    background-color: #f5f5f5;
    height: 70px;
}

#topBar .topContent {
    width: 964px;
    margin-left: auto;
    margin-right:auto;
}

#topBar i {
    display: inline-block;
    width: 50px;
    height: 50px;
    float: left;
    margin-top: 10px;
    background: url(../images/login_logo.png) no-repeat;
}

#topBar p {
    display: inline;
    line-height: 70px;
    margin-left: 10px;
    border-left: solid 1px #aaa;
    padding-left: 10px;
}

#topBar span {
    width: 50px;
    float: right;
    line-height: 70px;
}

#main {
    overflow: hidden;
    width: 964px;
    height: 462px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    background: url(../images/login_bg_03.jpg) no-repeat;
}

.login_form {
    width: 35%;
    float: right;
    margin-top: 100px;
    margin-right: 100px;
}

.title_caption {
    font-size: 16px;
    text-align: center;
    background-color: rgba(93, 209, 161);
    color: #000;
    height: 40px;
    line-height: 40px;
}

fieldset {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 0 2em 2em 2em;
}

fieldset #login-info {
    display: block;
    text-align: center;
    height: 2em;
    line-height: 2em;
    font-size: 17px;
    font-weight: normal;
    color: #555;
    background-color: rgba(221, 133, 118, 0.5);
    visibility: hidden;
}

.login_input{
    position: relative;
    margin-bottom: 20px;
}

.login_input i {
    width: 26px;
    height: 26px;
    margin: 1px;
    position: absolute;
    left: 0;
    bottom: 1em;
}

.login_input i.login_icon_user {
    background: url(../images/user.png);
}

.login_input i.login_icon_pass {
    background: url(../images/lock.png);
}


.login_input input {
    background: transparent;
    border: none;
    height: 50px;
    width: 100%;
    border-bottom: 2px solid rgb(93, 209, 161);
    font-size: 15px;
    color: #fff;
    color: rgb(131, 138, 145);
    outline: none;
}

button[type="submit"] {
    width: 40%;
    height: 30px;
    float: right;
    background-color: rgb(93, 209, 161,0.9);
    color: #000;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

.login_sub_in input:hover {
    transition: all 0.3s ease;
    border: 2px solid #fff;
}

#foot {
    background: #f7f7f7;
    color: #999;
    width: 964px;
    margin-left: auto;
    margin-right: auto;
}

#foot p {
    
    font-size: 13px;
    text-align: center;
    height: 70px;
    line-height: 70px;
}

2.效果展示

 

posted on 2019-03-30 13:25  侯江波  阅读(413)  评论(0)  编辑  收藏  举报