后台管理页面布局
一、整体分布
简单的一个页面布局，头部、左侧菜单栏，右侧内容，头部和菜单栏固定位置，内容部分如果很长就会出现滚动条
两种方法能实现，其实两种差别只有一个属性不一样。
1.1 使用position：fixed
1.先定义三个div标签
<body>
<div class="pg_header"></div>
<div class="pg_content"></div>
<div class="pg_footer"></div>
</body>
2.设定头部样式，高48px，背景色蓝色
<style>
body{
margin: 0 auto;
}
.pg_header{
height: 48px;
background-color: #2459a2;
color: white;
}
</style>
顶部出现一个蓝色长条
3.在pg_content里划分出两个区域，一个左侧菜单栏，一个右侧内容区
一般会要求左侧菜单栏能固定位置，一直显示在左侧，高度就是整个浏览器高度
# 先增加两个div标签
<div class="pg_content">
<div class="menu"></div>
<div class="content"></div>
</div>
# 为menu设置样式
.pg_content .menu{
position: fixed;
top: 50px;
left: 0;
bottom: 0;
width: 200px;
background-color: #dddddd;
}
左侧增加一个灰色长条：
4.同样我们想要右侧的内容区也能像菜单栏一样，固定位置、并占据整个右侧位置。并且在内容过长时，会出现滚动条（overflow实现）
.pg_content .content{
position: fixed;
top: 50px;
right: 0;
bottom: 0;
left: 202px;
background-color: darkturquoise;
overflow: auto;
}
当内容很长时，会出现滚动条：
1.2 使用position：absolute
第二种方法相比第一种方法，只需将position:fixed改为position:absolute
再为content增加一个最小宽度的属性，当浏览器缩小时，小于一定宽度是，就会出现横滚动条，可以防止页面内容布局错乱，但是这样header也需要修改一下，加了最小宽度以后，header在有横滚动条时宽度无法满屏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page_layout2</title>
<style>
body{
margin: 0 auto;
}
.pg_header{
position: fixed;
top: 0;
width: 100%;
height: 48px;
background-color: #2459a2;
color: white;
}
.pg_content .menu{
position: absolute;
top: 50px;
left: 0;
bottom: 0;
width: 200px;
background-color: #dddddd;
}
.pg_content .content{
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 202px;
background-color: darkturquoise;
overflow: auto;
min-width: 980px;
}
</style>
</head>
<body>
<div class="pg_header"></div>
<div class="pg_content">
<div class="menu"></div>
<div class="content">
</div>
</div>
<div class="pg_footer"></div>
</body>
</html>
整体效果和上一个差不多： 
二、头部设计
2.1 头部左侧增加logo
（1）首先定义两个经常用到的float css样式
.left{
float: left;
}
.right{
float: right;
}
（2）在header下定义一个div
# 定义div
<div class="pg_header">
<div class="logo left">
<a href="https://www.google.com" target="_blank">
<img src="images/logo.png">
</a>
</div>
</div>
# css样式
.pg_header .logo{
height: 48px;
width: 200px;
text-align: center;
color: white;
}
.pg_header .logo a img{
height: 48px;
width: 50px;
}
增加了logo：
2.2 header右侧增加登入信息
（1）头像
右侧个人信息其实只要一个头像，鼠标移到头像上时，会有信息框出现
# 在header中定义一个div标签
<div class="pg_header">
<div class="person_info right">
<img src="images/head.jpg">
</div>
</div>
# 添加person_info的css样式
.pg_header .person_info{
position: relative;
height: 48px;
width: 160px;
}
.pg_header .person_info img{
border: 0;
height: 48px;
width: 50px;
/*使用border-radius可以定义边框的圆角程度*/
border-radius: 50%;
}
出现头像：
（2）增加一个div,用于显示信息和操作，其位置相对于peron_info固定
# 在person_info下增加一个div
<div class="info">
<a>我的信息</a>
<a>注销</a>
<a>修改密码</a>
<a>修改头像</a>
</div>
# 为其设置css样式
.pg_header .person_info .info{
position: absolute;
width: 150px;
background-color: cornflowerblue;
top: 50px;
z-index: 20;
}
.pg_header .person_info .info a{
display: block;
color: white;
}
这样完成后还是不行，因为看不到这个标签，我们需要对pg_header也增加一个z-index属性，设置值为10
（3）默认情况下是看不到info这个标签的，所以还需要对info的css样式增加display:none属性
.pg_header .person_info .info{
position: absolute;
width: 150px;
background-color: cornflowerblue;
top: 50px;
z-index: 20;
display: none;
}
（4）显示info标签
增加了display：none后，信息标签默认看不到，现在的需求是鼠标移到person_info这个div标签时，info标签显示
# 增加一个css样式就能实现
.pg_header .person_info:hover .info{
display: block;
}
# hover就是为元素增加样式的，上面的意思就是当鼠标移到person_info这个标签时，就将info标签的display设置为block
鼠标移到头像出就显示信息：
2.3 插入图标
头部信息中通常还有邮件和提醒服务存在，也就是插入一下图标，登入后提示一下信息需要处理。
需要的图标可以在https://fontawesome.com中去下载，并放到自己的项目中。
（1）寻找图标
在下载图标的网站上寻找需要的图标
点击相应的图标，拷贝
（2）增加邮件和铃铛的图标
# 引用css样式
<link rel="stylesheet" href="fontawesome-free-5.1.0-web/css/all.css">
# 在pg_header下增加两个div标签（person_info div之后）
<div class="icons right">
<i class="far fa-bell"></i>
</div>
<div class="icons right">
<i class="far fa-envelope"></i>
</div>
# 增加css样式
.pg_header .icons{
line-height: 48px;
padding: 0 20px 0 5px;
}
.pg_header .icons:hover{
background-color: cornflowerblue;
}
效果：
（3）增加消息数量显示
如果有3封邮件，就在邮件旁边显示数字3
# 邮件图标的div下增加一个span标签
<div class="icons right">
<i class="far fa-envelope"></i>
<span>3</span>
</div>
# 为span 添加css样式
.pg_header .icons span{
padding: 1px 5px;
line-height: 1px;
border-radius: 50%;
background-color: red;
font-size: 12px;
}
效果：
完整html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page_layout2</title>
<link rel="stylesheet" href="fontawesome-free-5.1.0-web/css/all.css">
<style>
body{
margin: 0 auto;
}
.left{
float: left;
}
.right{
float: right;
}
.pg_header{
position: fixed;
top: 0;
width: 100%;
height: 48px;
background-color: #2459a2;
color: white;
z-index: 10;
}
.pg_header .logo{
height: 48px;
width: 200px;
text-align: center;
color: white;
}
.pg_header .logo a img{
height: 48px;
width: 50px;
}
.pg_header .person_info{
position: relative;
height: 48px;
width: 160px;
/*text-align: center;*/
}
.pg_header .person_info img{
border: 0;
height: 48px;
width: 50px;
/*使用border-radius可以定义边框的圆角程度*/
border-radius: 50%;
}
.pg_header .person_info .info{
position: absolute;
width: 150px;
background-color: cornflowerblue;
top: 50px;
z-index: 20;
display: none;
}
.pg_header .person_info .info a{
display: block;
color: white;
}
.pg_header .person_info:hover .info{
display: block;
}
.pg_header .icons{
line-height: 48px;
padding: 0 20px 0 5px;
}
.pg_header .icons:hover{
background-color: cornflowerblue;
}
.pg_header .icons span{
padding: 1px 5px;
line-height: 1px;
border-radius: 50%;
background-color: red;
font-size: 12px;
}
.pg_content .menu{
position: absolute;
top: 50px;
left: 0;
bottom: 0;
width: 200px;
background-color: #dddddd;
}
.pg_content .content{
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 202px;
background-color: darkturquoise;
overflow: auto;
min-width: 980px;
z-index: 8;
}
</style>
</head>
<body>
<div class="pg_header">
<div class="logo left">
<a href="https://www.google.com" target="_blank">
<img src="images/logo.png">
</a>
</div>
<div class="person_info right">
<img src="images/head.jpg">
<div class="info">
<a>我的信息</a>
<a>注销</a>
<a>修改密码</a>
<a>修改头像</a>
</div>
</div>
<div class="icons right">
<i class="far fa-bell"></i>
</div>
<div class="icons right">
<i class="far fa-envelope"></i>
<span>3</span>
</div>
</div>
<div class="pg_content">
<div class="menu"></div>
<div class="content">
</div>
</div>
<div class="pg_footer"></div>
</body>
</html>
