前端无小事--登录页布局

Bertha 。 2021-11-11 10:42 325阅读 0赞

觉得公司管理后台的登录界面挺简洁的，于是就记录下来了，方便日后直接拿来用。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="utf-8">
        <title>登录页面布局</title>
    
        <style type="text/css">
            html {
                height: 100%;
            }
    
            body {
                background: #1f9191 url(./loginbg.png) right top no-repeat;
            }
    
            .login-wrap {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 800px;
                height: 626px;
                margin-left: -400px;
                margin-top: -363px;
                padding-top: 100px;
                background: url(./login-wrapper.png) center 0 no-repeat;
                font-family: "微软雅黑", Regular, "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
                font-size: 16px;
            }
    
            .login-wrap .title {
                padding: 44px 0 20px;
                color: #36383c;
                font-size: 36px;
                font-weight: bold;
                text-align: center;
            }
    
            .login-wrap .form {
                width: 565px;
                height: 346px;
                margin: 0 auto;
            }
        </style>
    </head>
    
    <body>
        <div class="login-wrap">
            <div class="title">欢迎登录</div>
            <form action="/login" name="loginForm" target="_self" method="POST">
                <div class="form">
    
                </div>
            </form>
        </div>
    </body>
    
    </html>

登录界面效果如下图所示。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70][]

链接：https://pan.baidu.com/s/1v1kPXmtVBvbH2kA6Q7Jb1g

提取码：89n2

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70]: /images/20211109/39471367b320454aa6b65810f4d49866.png