<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.right{
float: right;
}
.pg-header{
height: 48px;
line-height: 48px;
background-color: #303a40;
color: white;
}
.pg-header .logo{
float: left;
width: 200px;
text-align: center;
}
.pg-header .user{
padding: 0 20px;
height: 48px;
position: relative;
}
.pg-header .user:hover{
background-color: #425a66;
}
.pg-header .user .a{
height: 48px;
}
.pg-header .user .a img{
width: 40px;
height: 40px;
margin-top: 4px;
border-radius: 50%;
}
.pg-header .user .more{
width: 200px;
border: 1px solid darkgreen;
position: absolute;
top: 48px;
right: 20px;
background-color: #C0C0C0;
display: none;
z-index: 9999;
}
.pg-header .user:hover .more{
display: block;
}
.pg-header .user .more a{
display: block;
}
.pg-body .body-menu{
position: absolute;
top: 50px;
bottom: 0;
left: 0;
width: 200px;
border: 1px solid #336699;
}
.pg-body .body-content{
position: absolute;
top: 50px;
bottom: 0;
left: 210px;
right: 0;
border: 1px solid #336699;
overflow: auto;
z-index: 10;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo">Hello Python</div>
<div class="user right" style="position: relative">
<div class="a">
<img src="1.jpg">
</div>
<div class="more">
<a>我的信息</a>
<a>注销</a>
</div>
</div>
</div>
<div class="pg-body">
<div class="body-menu"></div>
<div class="body-content">
<p>klvchen</p><p>klvchen</p><p>klvchen</p>
<p>klvchen</p><p>klvchen</p><p>klvchen</p>
<p>klvchen</p><p>klvchen</p><p>klvchen</p>
<p>klvchen</p><p>klvchen</p><p>klvchen</p>
<p>klvchen</p><p>klvchen</p><p>klvchen</p>
<p>klvchen</p><p>klvchen</p><p>klvchen</p>
</div>
</div>
</body>
</html>
