zoukankan      html  css  js  c++  java
  • 后台管理系统基本布局

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                background: #e6e6e6;
                height: 100%;
                 100%;
            }
    
            div#app,
            div.wrap {
                height: 100%;
            }
    
            div.wrap::after,
            div.wrap::after {
                display: table;
                content: "";
                clear: both;
            }
    
            aside {
                 200px;
                float: left;
                height: 100%;
                background: #ccc;
                overflow-y: auto;
            }
    
            ul>li {
                height: 50px;
            }
    
            main {
                height: 100%;
                background: #fff;
                margin-left: 200px;
            }
    
            header {
                height: 60px;
                 100%;
                background: blue;
                text-align: center;
                line-height: 60px;
            }
    
            .content {
                background: #fff;
                border: 1px solid #000;
                height: calc(100% - 60px);
                margin-top: -2px;
                overflow-y: auto;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            <div class="wrap">
                <aside>
                    <ul>
                        <li>列表列表</li>
                        <li>列表列表</li>
                        <li>列表列表</li>
                        <li>列表列表</li>
                        <li>列表列表</li>
                        <li>列表列表</li>
                        <li>列表列表</li>
                        <li>列表列表</li>
                        <li>列表列表</li>
                        <li>列表列表</li>
                        <li>列表列表</li>
                        <li>列表列表</li>
                        <li>列表列表</li>
                        <li>列表列表</li>
                        <li>列表列表</li>
                    </ul>
                </aside>
                <main>
                    <header>这里是Header区域</header>
                    <div class="content">
                        <h1>这里是content区域</h1>
                        <h1>这里是content区域</h1>
                        <h1>这里是content区域</h1>
                        <h1>这里是content区域</h1>
                        <h1>这里是content区域</h1>
                        <h1>这里是content区域</h1>
                        <h1>这里是content区域</h1>
                        <h1>这里是content区域</h1>
    
                        <h1>这里是content区域</h1>
                        <h1>这里是content区域</h1>
                        <h1>这里是content区域</h1>
                        <h1>这里是content区域</h1>
                        <h1>这里是content区域</h1>
                    </div>
                </main>
            </div>
        </div>
    </body>
    
    </html>
    

      

  • 相关阅读:
    C++中左移<<的使用
    学会构造素数序列
    有关lower_bound()函数的使用
    Codeforces Round #166 (Div. 2)
    暴力swap导致TLE问题解决办法
    memset的正确使用
    Codeforces Round #297 (Div. 2)
    Codeforces Round #170 (Div. 2)B
    Codeforces Round #176 (Div. 2)
    C/C++ sort函数的用法
  • 原文地址:https://www.cnblogs.com/samsara-yx/p/12084443.html
Copyright © 2011-2022 走看看