博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

简单后台管理模板

Posted on 2018-08-08 12:02  alex_hrg  阅读(236)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="fontawesome-free-5.2.0-web/css/all.css" />
    <style>
        a{
            border: 0;
            margin: 0;
            text-decoration: none;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .hide{
            display: none;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
            line-height: 48px;
        }
        .pg-header .sign-a{
            padding: 3px 6px;
            line-height: 48px;
            font-size: 9px;
            background-color: red;
            border-radius: 50%;
        }
        .pg-header .logo{
            text-align: center;
            float: left;
            width: 200px;
            height: 48px;
        }
        .pg-header .user{
            position: relative;
            float: right;
            width: 150px;
            height: 48px;
        }
        .pg-header .user:hover{
            background-color: #dddddd;
        }
        .pg-header .user:hover .user-detail{
            display: block;
        }
        .pg-header .user-detail{
            position: absolute;
            top: 48px;
            left: 0;
            background-color: white;
            color: #000;
            width: 150px;
            z-index: 20;
            display: none;
        }
        .pg-header .user .a img{
            width: 40px;
            height: 40px;
            margin-top: 4px;
            border-radius: 50%;
        }
        .pg-header .user .username{
            margin-left: 10px;
        }
        .pg-content{
            min-width: 700px;

        }
        .pg-content .menu{
            position: absolute;
            top: 50px;
            left: 0;
            bottom: 0;
            min-width: 200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position: absolute;
            top: 50px;
            left: 210px;
            right: 0;
            bottom: 0;
            background: #406645;
            z-index: 5;
            overflow: auto;
            /*这里可以实现一条代码，控制左侧菜单是否跟着右边一起滚动，加overflow:auto;不一起滚动，不加一起滚动，前提是左侧菜单和右侧的内容的positon都是absolute,这是一个特殊用途。*/
        }
    </style>
</head>
<body style="margin: 0;">
<div class="pg-header">
    <div class="logo left"><b>运维后台管理</b></div>
    <div class="user right">
        <a href="#" class="a left"><img src="img/user.png"/></a>
        <div class="username left">ALEX</div>
        <div class="user-detail">
            <div>个人资料</div>
            <div>修改密码</div>
            <div>更换头像</div>
            <div>退出</div>
        </div>
    </div>
    <div class="right">
        <i class="far fa-envelope"><a class="sign-a">1</a></i>
        <i class="far fa-bell"><a class="sign-a">2</a></i>
    </div>
    <div style="clear: both;"></div>
</div>
<div class="pg-content">
    <div class="menu left">
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
    </div>
    <div class="content left">
        <p>afdsa</p><p>afdsa</p><p>afdsa</p><p>afaaaaaaaaaaa</p>
        <p>afdsa</p><p>afdsa</p><p>afdsa</p><p>afdsa</p>
        <p>afdsa</p><p>afdsa</p><p>afdsa</p><p>afdsa</p>
        <p>afdsa</p><p>afdsa</p><p>afdsa</p><p>afdsa</p>
        <p>afdsa</p><p>afdsa</p><p>afdsa</p><p>afdsa</p>
    </div>
</div>
<div class="pg-footer"></div>


<script type="application/javascript">

</script>
</body>
</html>