1、后台管理页面布局，其实是对css内容的一些补充。
2、第一种布局，是将pg-content中的menu与content以宽度的百分比来进行设置，
min-200px; 给页面设置一个最小宽度；当小于200px时，应用该最小宽度；大于200px时，页面宽度按设置的20%显示
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0; //设置body没有边框
}
.left{
float:left;
}
.right{
float:right;
}
.pg-header{
height:48px;
background-color:blue;
color:white
}
.pg-content .menu{
20%;
background-color:red;
min-200px; /*页面的宽度，小于200px时，应用最小宽度；大于200px时，页面宽度按20%显示*/
height:500px;
}
.pg-content .content{
80%;
background-color:green;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">ww</div>
<div class="content left">aa</div>
</div>
<div class="pg-footer"></div>
</body>
执行结果如下：
因为给menu设置了高度500px，当前显示的页面没有500px，所以页面右侧会有滚动条
3、对于2的后台管理页面布局进行优化
该例子中，使用了 position：fixed；使其一直在当前页面显示，永远固定在窗口的某个位置。
overflow：auto；内容显示过多时，在当前页面无法显示完全，显示滚动条
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.left{
float:left;
}
.right{
float:right;
}
.pg-header{
height:48px;
background-color:blue;
color:white
}
.pg-content .menu{
position:fixed;
top:48px;
left:0;
bottom:0;
200px;
background-color:#dddddd;
}
.pg-content .content{
position:fixed;
top:48px;
right:0;
bottom:0;
left:200px;
background-color:purple;
overflow:auto; //内容显示过多，在当前页面无法显示完全，显示滚动条
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">ww</div>
<div class="content left">
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
</div>
</div>
<div class="pg-footer"></div>
</body>
执行结果如下：
4、使用了 position：absolute;的页面布局
结合position：absolute;与overflow：auto；可以使页面简单的呈现两种效果
position：absolute;第一次定位可以定位在某个位置；但是当滚轮条滚动，就不在指定的位置了。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.left{
float:left;
}
.right{
float:right;
}
.pg-header{
height:48px;
background-color:blue;
color:white
}
.pg-content .menu{
position:absolute;
top:48px;
left:0;
bottom:0;
200px;
background-color:#dddddd;
}
.pg-content .content{
position:absolute;
top:48px;
left:200px;
bottom:0;
right:0;
background-color:purple;
//overflow:auto;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">ww</div>
<div class="content left">
//<div style="position:fixed;bottom:0;right:0;50px;height:50px">返回顶部</div>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
</div>
</div>
<div class="pg-footer"></div>
</body>
有没有overflow：auto；这行代码，第一次执行页面时，这两种的结果显示一样，如下：
当content中的样式没有添加 overflow：auto时，滚动条滚动时，当前页面不会固定，执行结果如下：（发现左侧的菜单栏跟上边都随着滚动条滚动）
当content中的样式添加 了overflow：auto时，滚动条滚动时，当前页面固定，执行结果如下：（发现左侧的菜单栏跟上边都不随着滚动条滚动）；这个跟3的执行效果是一样的
5、后台页面布局：
应用布局如下：
position：absolute；
border-radius：50%；调整图片的形状，为50%时，图片为圆形。
.pg-header .user:hover .b{display:block;} 当鼠标放到hover上的时候，给b加上样式
z-index：10；设置优先级
<link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css"/> fontawesome是图库网，直接下载包，找到所要应用的图标，将其代码粘贴到引用位置
<i class="fa fa-bell-o" aria-hidden="true"></i>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css"/>
<style>
body{
margin:0;
}
.left{
float:left;
}
.right{
float:right;
}
.pg-header{
height:48px;
background-color:blue;
color:white;
line-height:48px;
}
.pg-header .logo{
200px;
background-color:cadetblue;
text-align:center;
}
.pg-header .icons{
padding:0 20px;
}
.pg-header .icons:hover{
background-color:#204982;
}
.pg-header .user{
background-color:wheat;
height:48px;
margin-right: 60px;
padding: 0 20px;
}
.pg-header .user:hover{
background-color:#204982;
}
.pg-header .user .a img{
40px;
height:40px;
margin-top:4px;
border-radius:50%; //border-radius:50%;图片变为圆形
}
.pg-header .user .b{
z-index:20;
position:absolute;
top:48px;
right:0;
background-color:white;
160px;
color:black;
display:none;
}
.pg-header .user:hover .b{
display:block; //当鼠标放到hover上的时候，给b加上样式
}
.pg-header .user .b a{
display:block;
}
.pg-header .icons span{
border-radius:50%;
display:inline-block;
padding:3px 7px;
line-height:1px;
background-color:red;
font-size:12px;
}
.pg-content .menu{
position:absolute;
top:48px;
left:0;
bottom:0;
200px;
background-color:#dddddd;
}
.pg-content .content{
position:absolute;
top:48px;
left:200px;
bottom:0;
right:0;
background-color:purple;
overflow:auto;
z-index:9;
}
</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="1.jpg">
</a>
<div class="b">
<a>我的资料</a>
<a>注销</a>
</div>
</div>
<div class=" icons right">
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<span>5</span>
</div>
<div class="icons right">
<i class="fa fa-bell-o" aria-hidden="true"></i>
</div>
</div>
<div class="pg-content">
<div class="menu left">ww</div>
<div class="content left">
<!-- <div style="position:fixed;bottom:0;right:0;50px;height:50px">返回顶部</div>-->
<!-- <div style="position:absolute;bottom:0;right:0;50px;height:50px">返回顶部</div>-->
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
</div>
</div>
<div class="pg-footer"></div>
</body>
执行结果如下：
点击右上角图片时，显示样式，如下：
