<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.pg-header {
height: 48px;
background-color: #545454;
color: white;
line-height: 48px;
}
/*//Logo 居中*/
.pg-header .logo {
width: 200px;
background-color: #458B00;
text-align: center;
}
/*用户*/
.pg-header .user {
width: 160px;
background-color: bisque;
height: 48px;
}
/*当鼠标放在用户头像位置时候。背景变色*/
.pg-header .user:hover {
background-color: #115599;
}
.pg-header .user .a img {
height: 40px;
width: 40px;
margin-top: 4px;
border-radius: 50%;
}
/*<!-- z-index分层优先级-- >*/
/*用户头像菜单*/
.pg-header .user .b{
z-index: 20;
position: absolute;
top: 48px;
right: 27;
background-color: #dddddd;
color: black;
width: 160px;
display: none;
/*隐藏用户头像下拉菜单*/
}
/*添加显示下拉菜单*/
.pg-header .user:hover .b{
display:block;
}
/*显示改为竖方式显示，实际为吧A标签改为块级标签*/
.pg-header .user a{
display: block;
}
.pg-content .menu {
position: fixed;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
background-color: red;
z-index: 9;
/*<!-- z-index分层优先级-- >*/
}
.pg-content .content {
position: fixed;
top: 48px;
right: 0;
bottom: 0;
left: 200px;
background-color: darkblue;
overflow: auto;
/*overflow为自适应页面长度*/
}
</style>
</head>
<body>
<div class="pg-header">
<!--<div style="width: 100px;margin: 0 auto">-->
<!--自动居中-->
<!--</div>-->
<div class="logo left">
<!--向左对齐。-->
Sooele
</div>
<div class="user right" style="position: relative">
<!--向右对齐-->
<a class="a" href="#">
<!--href="#"默认跳转为当前-->
<img style="height: 40px; width: 40px;margin-top: 4px;border-radius: 50%"
src="https://secure.gravatar.com/avatar/a553c75a1cd244e47d9aec48b88bd543">
<!--border-radius: 50% 头像变为圆边框。。当数值为px时候为方-->
</a>
<div class="b" >
<a>我的资料</a>
<a>注销</a>
</div>
</div>
</div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<!--</p><p>asd</p>-->
<!--<p>asd</p>-->
<!--<p>asd</p>-->
<!--<p>asd</p>-->
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
相关
