css布局实现简洁的登录注册页面效果代码-html代码-BFW代码库

css布局实现简洁的登录注册页面效果代码

代码语言：html

代码描述：css布局实现简洁的登录注册页面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <style>
        /* config.css */

:root {
            --baseColor: #606468;
        }

        /* helpers/align.css */

        .align {
            display: grid;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            justify-items: center;
            place-items: center;
        }

        /* helpers/grid.css */

        .grid {
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            max-width: 20rem;
        }

        /* helpers/hidden.css */

        .hidden {
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        /* helpers/icon.css */

:root {
            --iconFill: var(--baseColor);
        }

        .icons {
            display: none;
        }

        .icon {
            height: 1em;
            display: inline-block;
            fill: #606468;
            fill: var(--iconFill);
            width: 1em;
            vertical-align: middle;
        }

        /* layout/base.css */

:root {
            --htmlFontSize: 100%;

            --bodyBackgroundColor: #2c3338;
            --bodyColor: var(--baseColor);
            --bodyFontFamily: "Open Sans";
            --bodyFontFamilyFallback: sans-serif;
            --bodyFontSize: 0.875rem;
            --bodyFontWeight: 400;
            --bodyLineHeight: 1.5;
        }

        * {
            -webkit-box-sizing: inherit;
            box-sizing: inherit;
        }

        html {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 100%;
            font-size: var(--htmlFontSize);
        }

        body {
            background-color: #2c3338;
            background-color: var(--bodyBackgroundColor);
            color: #606468;
            color: var(--bodyColor);
            font-family: "Open Sans", sans-serif;
            font-family: var(--bodyFontFamily), var(--bodyFontFamilyFallback);
            font-size: 0.875rem;
            font-size: var(--bodyFontSize);
            font-weight: 400;
            font-weight: var(--bodyFontWeight);
            line-height: 1.5;
            line-height: var(--bodyLineHeight);
            margin: 0;
            min-height: 100vh;
        }

        /* modules/anchor.css */

:root {
            --anchorColor: #eee;
        }

        a {
            color: #eee;
            color: var(--anchorColor);
            outline: 0;
            text-decoration: none;
        }

        a:focus,
        a:hover {
            text-decoration: underline;
        }

        /* modules/form.css */

:root {
            --formFieldMargin: 0.875rem;
        }

        input {
            background-image: none;
            border: 0;
            color: inherit;
            font: inherit;
            margin: 0;
            outline: 0;
            padding: 0;
            -webkit-transition: background-color 0.3s;
            -o-transition: background-color 0.3s;
            transition: background-color 0.3s;
        }

        input[type="submit"] {
            cursor: pointer;
        }

        .form {
            margin: calc(0.875rem * -1);
            margin: calc(var(--formFieldMargin) *-1);
        }

        .form input[type="password"],
        .form input[type="text"],
        .form input[type="submit"] {
            width: 100%;
        }

        .form__field {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin: 0.875rem;
            margin: var(--formFieldMargin);
        }

        .form__input {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

        /* modules/login.css */

:root {
            --loginBorderRadus: 0.25rem;
            --loginColor: #eee;

            --loginInputBackgroundColor: #3b4148;
            --loginInputHoverBackgroundColor: #434a52;

            --loginLabelBackgroundColor: #363b41;

            --loginSubmitBackgroundColor: #ea4c88;
            --loginSubmitColor: #eee;
            --loginSubmitHoverBackgroundColor: #d44179;
        }

        .login {
            color: #eee;
            color: var(--loginColor);
        }

        .login label,
        .login input[type="text"],
        .login input[type="password"],
        .login input[type="submit"] {
            border-radius: 0.25rem;
            border-radius: var(--loginBorderRadus);
 .........完整代码请登录后点击上方下载按钮下载查看