css实战布局

枫枫博客后台布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>博客后台框架</title>

    <style>

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        .admin {
            display: flex;
        }

        .admin > aside {
            width: 240px;
            height: 100vh;
            background-color: white;
            border-right: 1px solid #f0eeee;
        }

        .admin > aside > .logo {
            height: 90px;
            border-bottom: 1px solid #f0eeee;

        }

        .admin > main {
            width: calc(100% - 240px);
            height: 100vh;
            background-color: white;
        }

        .admin > main > .head {
            height: 60px;
        }

        .admin > main > .tabs {
            height: 30px;
            border-top: 1px solid #f0eeee;
            border-bottom: 1px solid #f0eeee;
        }

        .admin > main > .container {
            height: calc(100vh - 90px);
            overflow-y: auto;
            background-color: #f0eeee;
            padding: 20px;
        }

        .default_main {
            width: 100%;
            height: 100%;
            background-color: white;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="admin">
    <aside>
        <div class="logo">

        </div>
        <div class="menu">

        </div>
    </aside>
    <main>
        <div class="head">

        </div>
        <div class="tabs">

        </div>
        <div class="container">
            <div class="default_main">

            </div>
        </div>
    </main>
</div>
</body>
</html>

css实战布局

枫枫博客后台布局

枫枫博客前台布局