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;
            --bodyFontSiz.........完整代码请登录后点击上方下载按钮下载查看

网友评论0