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>
  • 相关阅读:
    HDU 2883 kebab
    CSUOJ 1635 Restaurant Ratings
    CSUOJ 1638 Continued Fraction
    POJ 1852 Ants
    ZOJ 3471 Most Powerful
    CSUOJ 1637 Yet Satisfiability Again!
    如何生成CA证书
    Keepalived实现双机热备
    Nginx负载均衡的优缺点
    负载均衡之 nginx
  • 原文地址:https://www.cnblogs.com/iiiiher/p/6442295.html
Copyright © 2011-2022 走看看