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>
  • 相关阅读:
    inotifywait 目录或文件的监控
    outlook邮件中样式问题
    IE8兼容问题
    12px以下字体显示问题
    box-shadow
    cropper.js图片裁剪
    利用vcard和qrcode.js生成二维码导入联系人
    使用link rel="shortcut icon"为网页标题加图标
    将input或textarea设置为disabled的样式问题
    img没有src属性时自动出现边框
  • 原文地址:https://www.cnblogs.com/iiiiher/p/6442295.html
Copyright © 2011-2022 走看看