后台布局第二种形式，左侧absolute，内容absolute加overflow或者不加可以实现两种不同的布局 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"/>
    <style>
        .pg-header{
            height: 48px;
            background-color: #1d9ad6;
            color: white;
            min-width: 1180px;
            line-height: 48px;
        }
        .pg-header .icon{
            padding: 0px 20px;
            font-size: 20px;
        }
        .pg-header .icon .span{
            display: inline-block;
            line-height: 2px;
            border-radius: 50%;
            /*width: 20px;*/
            /*height: 20px;*/
            padding: 10px;
            background-color: red;
        }
        .pg-header .icon:hover{
             background-color: #3bae56;
        }
        .pg-content{}
        .pg-footer{}
        .pg-content .menu{
              position: absolute;
              top:48px;
              left:0;
              bottom: 0;
              width: 200px;
              background-color:red ;
        }
        .pg-content .content{
            position: absolute;
            background-color: green;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            min-width: 980px;
            overflow: auto;
            z-index: 10;
        }
        .left{
            float:left;
        }
        .right{
            float: right;
        }
        .pg-header .logo{
            width: 200px;
            background-color: blue;
            text-align: center;
        }
        .pg-header .user{
            width: 100px;
            height: 48px;
            background-color: blue;
            margin-right:60px;
            /*text-align: center;*/
        }
        .pg-header .user:hover{

            background-color: white;
            /*text-align: center;*/
        }
        .pg-header .user:hover .b{
            display: block;
            /*text-align: center;*/
        }
        .pg-header .user .a img {
            width: 40px;height: 40px;margin-top:5px;border-radius: 50%;
        }
        .pg-header .user .b {
            position: absolute;top: 48px;right: 0;background-color: white;color:black;z-index: 20;
            display: none;

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

    </style>
</head>
<body style="margin: 0">
        <div class="pg-header">
            <div class="logo left">
                大世界
            </div>
            <div class="user right" style="position: relative">
                <a  class="a" href="#">
                    <img  src="网页前标1.jpg" />
                </a>
                <div class="b" >
                    <a class="a">东临碣石</a>
                    <a class="a">东临碣石</a>
                </div>
            </div>
            <div class="icon right">
               <i  class="fa fa-envelope-open-o"></i>
                <span>5</span>
            </div>
            <div class="icon right">
               <i class="fa fa-flag "></i>
                <span class="span">5</span>
            </div>
        </div>
        <div class="pg-content">
            <div class="menu left">asd</div>
            <div class="content left" >
                <div style="background-color: #2f96b4">
                <p style="margin: 0">asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
                <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p></div>
            </div>
        </div>
        <div class="pg-footer"></div>
</body>
</html>
posted @ 2018-04-22 21:41  梦中琴歌  阅读(145)  评论(0)    收藏  举报