后台管理页面示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body{
            margin:0 auto;
        }
        .left {
            float:left;
        }
        .right{
            float:right;
        }

        .pg-header{
            height:48px;
            background-color:blue;
            color:white;
            line-height:48px;
        }
        .pg-content .menu{

            position:absolute;
            top:48px;
            left:0;
            bottom:0;
            width:200px;
            background-color:#dddddd;
        }
        .pg-content .content{

            position:absolute;
            top:48px;
            right:0;
            bottom:0;
            left:200px;
            background-color:green;
            overflow:auto;
            min-width:900px;
            z-index:9;
        }

        .pg-header .logo{
            width:200px;
            background-color:#9292ba;
            text-align:center;
        }

        .pg-header .user{
            width:100px;
            background-color:blue;
            color:black;
            height:48px;
            padding:0 20px;
            margin-right: 15px;

        }

        .pg-header .user:hover{
            background-color:purple;

        }

        .pg-header .user .a img{
            height:40px;width:40px;margin-top:4px;border-radius: 68%;
        }

        .pg-header .user .b{
            z-index:20;
            position:absolute;
            top:50px;
            right:44px;
            background-color:black;
            color:white;
            width:100px;
            display:none;
        }

        .pg-header .user .b a{
            display:block;
        }

        .pg-header .user:hover .b{
            display:block;
        }

        .pg-header .icons{
            padding:0 20px;
        }

        .pg-header .icons:hover{
            background-color:purple;
        }

        .pg-header .icons .hint{
            line-height: 1px;
            padding: 8px 6px;
            background-color: red;
            border-radius: 50%;
            display: inline-block;
            font-size:10px;
        }
    </style>
</head>
<body>

    <div class="pg-header">
        <div class="logo left">
            丸子和蘑菇
        </div>

        <div class="user right" style="position:relative">
            <a class="a" href="#">
                <img src="IMG_1877.JPG">
            </a>
            <i class="fa fa-camera-retro"></i>
            <i class="fa fa-venus" aria-hidden="true"></i>
            <div class="b">
                <a>我的资料</a>
                <a>注销</a>
            </div>
        </div>

        <div class="icons right">
            <i class="fa fa-github" aria-hidden="true"></i>
            <span class="hint">5</span>
        </div>

        <div class="icons right">
            <i class="fa fa-car" aria-hidden="true"></i>
            <span class="hint">1</span>
        </div>

    </div>
    <div class="pg-content">
        <div class="menu left">a</div>
        <div class="content left">
            <div style="background-color:red;">
            <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
            <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
            <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
            <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
            <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
            <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
            <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
            <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
            <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
            <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
            <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
            <p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p><p>dfd</p>
            </div>
        </div>
    </div>
    <div class="pg-footer"></div>

</body>
</html>
后台管理页面示例

猜你喜欢
