zoukankan      html  css  js  c++  java
  • 后台界面布局

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>后台界面布局</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .wrap {
                min-width: 100%;
                position: absolute;
                min-height: 100%;
                overflow: hidden;
            }
            .head-div {
                position: absolute;
                box-sizing: border-box;
                width:100%;
                height: 70px;
                line-height: 70px;
                background-color: #1299ff;
                min-width: 824px !important;
                z-index:3;
            }
            .left-div {
                position: absolute;
                box-sizing: border-box;
                width: 150px;
                height: 100%;
                padding-top: 70px;
                background: #4d5e70 bottom;
                z-index:2;
            }
            .body-div {
                position: absolute;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                background-color: #00ff21;
                padding-left: 150px;
                padding-top: 70px;
                min-width: 824px !important;
                z-index:1;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="head-div">head</div>
            <div class="left-div">left</div>
            <div class="body-div">boby</div>
        </div>
    </body>
    </html>

    效果如下:

  • 相关阅读:
    DOM(文档对象模型)
    客户端检测
    mysql之触发器
    mysql之select(二)
    浅谈mysql中varchar(m)与char(n)的区别与联系
    mysql之select(一)
    mysql(一)
    mysql5.7.11安装遇到的问题
    Java 网络编程(二)
    Java 网络编程(一)
  • 原文地址:https://www.cnblogs.com/hllive/p/6005232.html
Copyright © 2011-2022 走看看