html 后台页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<style>
body{
margin:0;
}
.left{
float:left;
}
.right{
float:right;
}
.clear{
clear:both;
}
.pg-header .header{
margin: 0 auto;
width:100%;
min-width:1080px;
height: 48px;
background-color:#2a6496;
line-height: 48px;
color: white;
}
.pg-header .header .logo{
font-size:16px;
font-weight: 600;
width: 200px;
text-align: center;
padding:0 20px;
}
.pg-header .header .user{
width:150px;
height: 48px;
position: relative;
}
.pg-header .header .user-list{
width:120px;
background-color: grey;
position: absolute;
top:40px;
right:80px;
display:none;
z-index: 10;
}
.pg-header .header .user-list a{
display: block;
}
.pg-header .header .user a img{
height: 32px;
width: 32px;
border-radius: 50%;
padding: 0 5px;
vertical-align: middle;
}
.pg-header .header:hover .user-list{
display: block;
}
.pg-content .left_content{
position: absolute;
top:48px;
left:0;
bottom: 0;
width:280px;
background-color: grey;
}
.pg-content .right_content{
position: absolute;
right:0;
top:48px;
bottom: 0px;
left:285px;
background-color: #eeeeee;
overflow: auto;
}
.pg-content .right_content .right_text{
min-width: 780px;
background-color: red;
z-index: 9;
}
</style>
</head>
<body>
<div class='pg-header'>
<div class='header'>
<div class='logo left'>博客</div>
<div class='user right'><a><img src='head2.jpg'/>howhy</a></div>
<div class='user-list'><a>个人中心</a><a>设置</a></div>
</div>
</div>
<div class='pg-content'>
<div class='left_content'></div>
<div class='right_content'>
<div class='right_text'>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<p>erwer</p>
<div>
</div>
</div>
<div class='pg-footer'></div>
</body>
</html>
