需要制作出如下图片的效果 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0 auto;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height: 48px;
background-color: #2459a2;
color:white;
line-height: 48px;
}
.pg-header .logo{
width: 200px;
background-color:green;
text-align: center;
}
.pg-header .user{
width: 160px;
background-color: palegreen;
height: 48px;
}
.pg-header .user .b{
top: 48px;
right: 95px;
background-color: green;
z-index: 20;
width: 160px;
}
.pg-header .user .b a{
display: block;
}
.pg-content .menu{
position: fixed;
top: 48px;
left: 0;
bottom: 0;
background-color: #dddddd;
width: 200px;
}
.pg-content .content{
position: fixed;
top: 48px;
right: 0;
bottom: 0;
left: 200px;
background-color:blue;
overflow: auto;
z-index: 10;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">LOGO</div>
<div class="user right" style="position: relative">
<a>
<img style="width: 40px;height: 40px;margin-top: 4px;border-radius: 50%;" src="4.jpg">
</a>
<div class="b" style="position: absolute">
<a>我的资料</a>
<a>退出</a>
</div>
</div>
</div>
<div class="pg-content">
<div class="menu"></div>
<div class="content">
<div style="height: 5000px">fdsa</div>
</div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/wulafuer/p/11113161.html