簡單後臺管理模板
阿新 • • 發佈：2018-08-08
log 退出 lin 左側菜單 aaa itl 控制 body hit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="fontawesome-free-5.2.0-web/css/all.css" />
<style>
a{
border: 0;
margin: 0;
text-decoration: none;
}
.left{
float: left;
}
.right{
float: right;
}
.hide{
display: none;
}
.pg-header{
height: 48px;
background-color: #2459a2;
color: white;
line-height: 48px;
}
.pg-header .sign-a{
padding: 3px 6px;
line-height: 48px;
font-size: 9px;
background-color: red;
border-radius: 50%;
}
.pg-header .logo{
text-align: center;
float: left;
width: 200px;
height: 48px;
}
.pg-header .user{
position: relative;
float: right;
width: 150px;
height: 48px;
}
.pg-header .user:hover{
background-color: #dddddd;
}
.pg-header .user:hover .user-detail{
display: block;
}
.pg-header .user-detail{
position: absolute;
top: 48px;
left: 0;
background-color: white;
color: #000;
width: 150px;
z-index: 20;
display: none;
}
.pg-header .user .a img{
width: 40px;
height: 40px;
margin-top: 4px;
border-radius: 50%;
}
.pg-header .user .username{
margin-left: 10px;
}
.pg-content{
min-width: 700px;
}
.pg-content .menu{
position: absolute;
top: 50px;
left: 0;
bottom: 0;
min-width: 200px;
background-color: #dddddd;
}
.pg-content .content{
position: absolute;
top: 50px;
left: 210px;
right: 0;
bottom: 0;
background: #406645;
z-index: 5;
overflow: auto;
/*這裏可以實現一條代碼，控制左側菜單是否跟著右邊一起滾動，加overflow:auto;不一起滾動，不加一起滾動，前提是左側菜單和右側的內容的positon都是absolute,這是一個特殊用途。*/
}
</style>
</head>
<body style="margin: 0;">
<div class="pg-header">
<div class="logo left"><b>運維後臺管理</b></div>
<div class="user right">
<a href="#" class="a left"><img src="img/user.png"/></a>
<div class="username left">ALEX</div>
<div class="user-detail">
<div>個人資料</div>
<div>修改密碼</div>
<div>更換頭像</div>
<div>退出</div>
</div>
</div>
<div class="right">
<i class="far fa-envelope"><a class="sign-a">1</a></i>
<i class="far fa-bell"><a class="sign-a">2</a></i>
</div>
<div style="clear: both;"></div>
</div>
<div class="pg-content">
<div class="menu left">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
<div class="content left">
<p>afdsa</p><p>afdsa</p><p>afdsa</p><p>afaaaaaaaaaaa</p>
<p>afdsa</p><p>afdsa</p><p>afdsa</p><p>afdsa</p>
<p>afdsa</p><p>afdsa</p><p>afdsa</p><p>afdsa</p>
<p>afdsa</p><p>afdsa</p><p>afdsa</p><p>afdsa</p>
<p>afdsa</p><p>afdsa</p><p>afdsa</p><p>afdsa</p>
</div>
</div>
<div class="pg-footer"></div>
<script type="application/javascript">
</script>
</body>
</html>
簡單後臺管理模板