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

    知识点:

    绝对定位+overflowhidden

    整体思路

     

    三大块

    pg-header---需要固定 (height:48px)

    pg-content

    menu 右侧菜单-需要固定(200px; top:48;left:0; bottom:0;)
    
    content---当内容较多时候需要有滚动条(top:48;left:200px;right:0; bottom:0; overflow: auto;)

    pg-footer

    关键技术:

    position绝对定位

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>后台管理</title>
        <style>
            .fl {
                float: left;
            }
    
            .fr {
                float: right;
            }
    
            body {
                margin: 0;
            }
    
            .pg-header {
                margin: 0 auto;
                height: 48px;
                background-color: black;
            }
    
            .pg-content .menu {
                width: 200px;
                position: fixed;
                top: 48px;
                left: 0;
                bottom: 0;
                background-color: bisque;
            }
    
            .pg-content .content {
                position:
    fixed
    ; top: 48px; left: 200px; right: 0; bottom: 0; overflow: auto; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu fl">a</div> <div class="content fr"> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> </div> </div> <div class="pg-footer"></div> </body> </html>
  • 相关阅读:
    noip2018练习总结
    东方CannonBall (概率DP)
    数论
    逆序对
    USACO5.3 校园网Network of Schools(Tarjan缩点)
    USACO09FEB 改造路Revamping Trails(分层图模板)
    Comet OJ模拟赛 Day1
    Tarjan模板
    NOIP 天天爱跑步(树上差分)
    树上差分
  • 原文地址:https://www.cnblogs.com/iiiiher/p/6442295.html
Copyright © 2011-2022 走看看