后台管理界面

最新推荐文章于 2023-06-06 10:37:28 发布

qq_45670012

最新推荐文章于 2023-06-06 10:37:28 发布

阅读量202

点赞数

分类专栏：前端文章标签：页面展示作业

原文链接：https://www.mk2048.com/blog/blog.php?id=hi1h0bch210j&title=%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86%E7%95%8C%E9%9D%A2

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

<!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>