Html - 后台模板-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--单独子版的title-->
    <!--<title>{% block title %}{% endblock %}</title>-->

    <!--单独子版的css-->
    <!--{% block css %}{% endblock %}-->

    <style>
        body{
            margin: 0;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .hide{
            display: none;
        }

        .pg-header{
            height: 48px;
            background-color: #8b86ff;
            min-width: 1100px;
            line-height: 48px;
        }
        .pg-header .logo{
            color: #effdff;
            width: 200px;
            background-color: #8b86ff;
            text-align: center;
            font-size: 20px;
        }
        .pg-header .hl-menu .item ,.pg-header .hr-menu .item{
            color: white;
            padding:0 10px;
            display: inline-block;
            height: 48px;
        }
        .pg-header .hl-menu .item:hover ,.pg-header .hr-menu .item:hover{
            background-color: #726dff;
        }
        .pg-header .hl-menu .item-set{
            display: inline-block;
            position: relative;
        }
        .pg-header .hl-menu .item-set .sets{
            position: absolute;
            width: 100px;
            background-color: antiquewhite;
        }
        .pg-header .hl-menu .item-set:hover .sets {
            display: block;
            z-index: 10;
        }

        .pg-header .hl-menu .item-set .sets a{
            display: block;
            line-height: 30px;
            background-color: #ad9cff;
        }
        .pg-header .hl-menu .item-set .sets a:hover{
            background-color: #8a71ff;
        }

        .avatar{
            display: inline-block;
            position: relative;
            float: right;
        }
        .avatar .sets{
            position: absolute;
            width: 100px;
            left: -55px;
        }
        .avatar:hover .sets{
            display: block;
            border: blue solid ;
            top: 48px;
            z-index: 10;
        }
        .avatar .item img{
            width: 35px ;
            height: 35px;
            border-radius: 50%;
            margin-top: 6px;
        }
        .avatar:hover .sets a{
            display: block;
            line-height: 30px;
        }
        .pg-body .menus{
            width: 200px;
            position: absolute;
            top: 48px;
            left: 0px;
            bottom: 0px;
            background-color: #ad9cff;
        }
        .pg-body .countents{
            position: absolute;
            top: 48px;
            left: 200px;
            right: 0;
            bottom: 0;
            background-color: antiquewhite;
            overflow: scroll;
        }

        .menus-item .item{
            padding: 8px;
        }
        .menus-item .content{
            padding: 2px;
        }

    </style>

</head>
<body>
    <div class="pg-header">
        <!--共享的-->
        <div class="logo left">Anec后台管理</div>
        <div class="hl-menu left">
            <a href="#" class="item">菜单一</a>
            <div class="item-set">
                <a href="#" class="item">菜单二</a>
                <div class="sets hide">
                    <a href="#" >菜单二1</a>
                    <a href="#" >菜单二2</a>
                    <a href="#" >菜单二3</a>
                </div>
            </div>
            <div class="item-set">
                <a href="#" class="item">菜单三</a>
                <div class="sets hide">
                    <a href="#" >菜单三1</a>
                    <a href="#" >菜单三2</a>
                    <a href="#" >菜单三3</a>
                </div>
            </div>
            <div class="item-set">
                <a href="#" class="item">菜单四</a>
                <div class="sets hide">
                    <a href="#" >菜单四1</a>
                    <a href="#" >菜单四2</a>
                    <a href="#" >菜单四3</a>
                </div>
            </div>

        </div>
        <div class="hr-menu right">
             <a href="#" class="item">消息</a>
             <a href="#" class="item">通知</a>
             <a href="#" class="item">任务</a>
            <div class="avatar">
                <a href="#" class="item">
                    <img src="111.jpg" >
                </a>
                <div class="sets hide">
                    <a href="#" >菜单1</a>
                    <a href="#" >菜单2</a>
                    <a href="#" >菜单3</a>
                </div>
            </div>

        </div>
    </div>
    <div class="pg-body">
        <div class="menus">
            <!--共享的-->
            <div class="menus-item">
                <div class="item"><a>功能1</a></div>
                <div class="content"><a>功能1-1</a></div>
                <div class="content"><a>功能1-2</a></div>
                <div class="content"><a>功能1-3</a></div>
            </div>
            <div class="menus-item">
                <div class="item"><a>功能2</a></div>
                <div class="content"><a>功能2-1</a></div>
                <div class="content"><a>功能2-2</a></div>
                <div class="content"><a>功能1-3</a></div>
            </div>
            <div class="menus-item">
                <div class="item"><a>功能3</a></div>
                <div class="content"><a>功能3-1</a></div>
                <div class="content"><a>功能3-2</a></div>
                <div class="content"><a>功能3-3</a></div>
            </div>


        </div>
        <div class="countents">
            <!--单独显示的-->
            <!--{% countents %}{% endblock %}-->
            <!--<div style="height: 1000px"></div>-->
        </div>
    </div>
    <div class="pg-foot">
        <!--共享的-->
    </div>
    <!--单独子版js-->
    <!--{% block js %}{% endblock %}-->
</body>
</html>