后台管理界面 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin: 0;

        }
        .left {
            float: left;
        }

        .right {
            float: right;
        }
        .pg-head {
            height: 48px;
            min-width: 1120px;
            background-color: cadetblue;
            line-height: 48px;
            position: relative;
        }

        .pg-body .memu {
            width: 200px;
            background-color: lavender;
            position: absolute;
            left: 0;
            bottom: 0;
            top:48px

        }

         .pg-body .memu p {
             padding: 30px 20px;
             border-bottom: 1px beige solid;
         }

        .pg-body .content {
            padding:20px 30px;
            position: absolute;
            right: 0;
            left: 200px;
            top: 48px;
            bottom: 0;
            overflow: scroll;
        }
    </style>
</head>
<body>

<div class="pg-head">
    <div class="left" style="padding:0 45px;border-right: 1px red solid">老男孩后台管理</div>
    <div >
        <div class="left" style="padding-left: 20px;" >
            <a href="" style="padding-right: 100px">首页</a>
            <input type="text" placeholder="搜索：***">
        </div>
        <div class="right" style="padding: 0 30px;">

            <a href="">消息</a>
            <a href="">个人信息</a>
        </div>
    </div>
</div>

<div class="pg-body">
    <div class="memu" >
        <p><a href="">菜单1</a></p>
        <p><a href="">菜单2</a></p>
        <p><a href="">菜单3</a></p>
        <p><a href="">菜单4</a></p>
        <p><a href="">菜单5</a></p>
    </div>

    <div class="content">
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
        <p>22</p>
    </div>
</div>







</body>
</html>

 

posted @ 2018-08-01 22:53  MAU  阅读(254)  评论(0)    收藏  举报