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

最新推荐文章于 2026-04-27 09:28:18 发布

原创最新推荐文章于 2026-04-27 09:28:18 发布 · 2.7k 阅读

23 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html

前端无小事专栏收录该内容

22 篇文章

订阅专栏

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

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

<head>
    <meta charset="utf-8">
    <title>登录页面布局</title>

    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            background: #1f9191 url(https://blog.csdn.net/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(https://blog.csdn.net/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>

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