简约大气的登录界面，记录下来方便下次使用！

程序员文章站 2022-05-06 12:41:54

...

今天写了一个登录界面，现在记录下来方便以后使用！

首先是样式文件（Login.css）：

*{
    margin:0px; padding:0px;
}

a{
    text-decoration:none;
}

body{
    background:#024aa3 url("images/loginBg.png") no-repeat;
    background-size:cover;
    background-repeat:no-repeat;
}

#loginWraper {
    position:fixed;
    top:50%;
    left:50%;
    margin-left:-250px;
    margin-top:-150px;
    width:500px;
    height:350px;
    background:url(images/loginWraper.png);
}

#title{
    width:80%;
    height:45px;
    margin:10px auto;
    line-height:45px;
    text-align:center;
    font-size:30px;
    font-family:YouYuan;
    font-weight:bold;
    color:white;
}

#content, #action, #loginConfirm{
    margin-top:15px;
}

#content table tr td, #loginConfirm table tr td{
    height:50px;
}

#content label{
    color:white;
    font-weight:bold;
    font-family:YouYuan;
    letter-spacing:1px;
    font-size:14px;
    height:30px;
    margin-left:115px;
    margin-right:5px;
}

#studentNumber, #password, #validateCode{
    color:white;
    width:200px;
    height:30px;
    border-radius:5px;
    padding-left:5px;
    letter-spacing:0.5px;
    font-size:14px;
    background-color:rgba(255, 255, 255, 0.40);
    border:0px;
    /*border:2px solid rgba(0, 215, 237, 1.00);*/
}

#validateCode{
    width:200px;
}

#studentNumber:focus, #password:focus, #validateCode:focus{
    border:0px;
    /*border:2px solid #00a3f6;*/
    outline:none;
}

#code{
    float:right;
    margin-right:5px;
    height:30px;
}

#rememberPw{
    margin-left:135px;
    width:13px;
    height:13px;
    vertical-align:middle;
}

#action label{
    color:white;
    font-weight:bold;
    font-family:YouYuan;
    font-size:13px;
    margin-left:0px;
}

#confirm{
    margin-left:115px;
    border:1px solid #FF9A14;
    background-color:#FF9A14;
    width:270px;
    height:30px;
    color:white;
    border-radius:5px;
    font-weight:bold;
    font-family:YouYuan;
    font-size:14px;
}

#confirm:hover{
    border:1px solid #E36709;
    background-color:#E36709;
    outline:none;
}

接着的就是页面布局的html文件（login.html）：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" charset="utf-8" />
    <title>登录</title>
    <link href="Login.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <!-- 登录界面 -->
    <div id="loginWraper">
        <div id="title">学生学籍管理系统</div>
        <form id="login_fm" method="post">
            <div id="content">
                <table>
                    <tr>
                        <td><label>学　号:</label></td>
                        <td><input id="studentNumber" name="studentNumber" type="text" placeholder="学　号" /></td>
                    </tr>
                    <tr>
                        <td><label>密　码:</label></td>
                        <td><input id="password" name="password" type="password" placeholder="密　码" /></td>
                    </tr>
                    <tr>
                        <td><label>验证码:</label></td>
                        <td>
                            <input id="validateCode" name="validateCode" type="text" placeholder="验证码" />
                        </td>
                    </tr>
                </table>
            </div>
            <div id="action">
				<input id="rememberPw" name="rememberPw" type="checkbox" checked="checked" />
				<label for="rememberPw">让我记住本次登录状态</label>
            </div>
        </form>
        <div id="loginConfirm">
            <table>
                <tr>
                    <td><button id="confirm" onclick="userLogin()">登 录</button></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

代码就这些，当然了，不能落下最终的效果截图：

简约大气的登录界面，记录下来方便下次使用！

代码demo实例下载地址：

登录界面demo代码