后台页面管理布局 

后台管理页面布局：
主站-
    <div class='pg-header'>
        <div style='width:980px;margin:0 auto;'>
            内容自动居中
        </div>
    </div>
    <div class='pg-content'></div>
    <div class='pg-footer'></div>
后台管理布局：
    position:
        fixed --永远固定在窗口的某个位置
        relative ---单独无意义
        absolute ---第一次定位，可以在指定位置，滚轮滚动时就不在了



    a.左侧菜单跟随滚动条

    b.左侧菜单固定
　　　　　　在.pg-content .content里添加：overflow: auto;
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
  7     <style>
  8         body{
  9             margin: 0;
 10         }
 11         .left{
 12             float: left;
 13         }
 14         .right{
 15             float: right;
 16         }
 17         .pg-header{
 18             height: 48px;
 19             background-color: #2459a2;
 20             color: white;
 21             line-height: 48px;
 22         }
 23         .pg-header .user .a img{
 24             height: 40px;
 25             width: 40px;
 26             margin-top: 4px;border-radius: 50%
 27         }
 28         .pg-header .user .b{
 29             z-index: 20;
 30             position: absolute;
 31             top: 48px;
 32             right: 44px;
 33             width: 160px;
 34             background-color: white;
 35             color: black;
 36             display: none;
 37         }
 38         .pg-header .user:hover .b{
 39             display: block;
 40         }
 41         .pg-header .user .b a{
 42             display: block;
 43         }
 44         .pg-content .menu{
 45             position: absolute;
 46             top: 48px;
 47             left: 0;
 48             bottom:0;
 49             width: 200px;
 50             background-color: rosybrown;
 51         }
 52         .pg-header .logo{
 53             width: 200px;
 54             background-color: cadetblue;
 55             text-align: center;
 56         }
 57         .pg-header .icons{
 58             padding: 0 20px;
 59         }
 60         .pg-header .icons:hover{
 61             background-color: blueviolet;
 62         }
 63         .pg-header .user{
 64             width: 160px;
 65             background-color: wheat;
 66             /*text-align: center;*/
 67             height: 48px;
 68         }
 69         .pg-header .user:hover{
 70             background-color: blue;
 71         }
 72 
 73         .pg-content .content{
 74             position: absolute;
 75             top: 48px;
 76             right: 0;
 77             bottom:0;
 78             left: 200px;
 79             background-color: purple;
 80             z-index: 9;
 81             /*overflow: auto;*/
 82             /*两种布局修改处*/
 83 
 84         }
 85     </style>
 86 </head>
 87 <body>
 88     <div class="pg-header ">
 89         <div class="logo left">老男孩</div>
 90 
 91 
 92 
 93 
 94         <div class="user right" style="position: relative;">
 95             <a class="a" href="#">
 96                 <img src="22.png">
 97             </a>
 98             <div class="b">
 99                 <a>我的资料</a>
100                 <a>注销</a>
101             </div>
102         </div>
103         <div class="icons right">
104             <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
105         </div>
106         <div class="icons right">
107             <i class="fa fa-bell-o" aria-hidden="true"></i>
108             <span style="display: inline-block;padding: 10px 7px;line-height: 1px;
109             background-color: red;border-radius: 50%;font-size: 12px">5</span>
110         </div>
111     </div>
112     <div class="pg-content">
113         <div class="menu left">a</div>
114         <!--<div class="menu right">a</div>-->
115         <div class="content left">
116             <!--<div style="position: fixed;bottom: 0px;right: 0px;width: 50px;height: 50px;">返回顶部</div>-->
117             <!--<div style="position: absolute;bottom: 0px;right: 0px;width: 50px;height: 50px;">返回顶部</div>-->
118             <!--最小宽度min-width-->
119             <div style="background-color: red;min-width: 500px">
120             <p style="margin: 0">adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
121             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
122             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
123             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
124             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
125             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
126             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
127             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
128             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
129             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
130             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
131             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
132             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
133             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
134             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
135             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
136             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
137             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
138             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
139             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
140             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
141             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
142             <p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p><p>adsas</p>
143                 </div>
144         </div>
145     </div>
146     <div class="pg-footer"></div>
147 </body>
148 </html>
后台页面布局


 






 








            

            
posted @ 
2019-04-02 20:02 
Dylan123 
阅读(72) 
评论(0) 
 
收藏 
举报