html登录页面

　　

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>欢迎登录学生会后台管理系统</title>

<style>
* {
    padding: 0;
    margin: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

.cms_login {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    background-repeat: no-repeat;
    background-image: url('img/p.jpg');
    background-size: 100% 100%;
}

.cms_login_container {
    width: 600px;
    height: 360px;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 10px #ccc;
    background-color: #fff;
    margin: auto;
    opacity: 0.8;
}

.cms_login_text {
    height: 100px;
    width: 100%;
    line-height: 80px;
    text-align: center;
    font-size: 30px;
}

.cms_login_table {
    font-size: 18px;
}

/* 统一盒子样式 */
.divBox {
    height: 50px;
    width: 100%;
    line-height: 50px;
    text-align: center;
}

.cms_login_ipt {
    height: 30px;
    width: 290px;
    padding-left: 5px;
    border-radius: 5px;
    outline: none;
}

input:focus {
    border-radius: 5px;
    outline: none;
    border: 2px solid #66afe9;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.margin_right10 {
    margin-right: 10px;
}

.margin_top60 {
    margin-top: 60px;
}

.login_btn {
    width: 360px;
    height: 100%;
    background-color: #1360a7;
    border-radius: 10px;
    outline: none;
    font-size: 24px;
    color: white;
    letter-spacing: 24px;
}

.login_btn:hover {
    background-color: #1e5d5d;
}
</style>
</head>

<body>
<div class="cms_login">
<div class="cms_login_container">
    <div class="cms_login_text">欢迎登录学生会后台管理系统</div>
    <div class="cms_login_table">
        <form action="" method="POST">
            <div class="divBox">
                <span class="margin_right10">账号</span>
                <input type="text" placeholder="请输入账号" name="username" class="cms_login_ipt">
            </div>
            <div class="divBox">
                <span class="margin_right10">密码</span>
                <input type="text" placeholder="请输入密码" name="password" class="cms_login_ipt">
            </div>
            <div class="divBox margin_top60">
                <button class="login_btn">登录</button>
            </div>
        </form>
    </div>
</div>
</div>
</body>

</html>

 

posted @ 2019-05-06 14:48  墨迹开发日记  阅读(1026)  评论(0)    收藏  举报