页面布局：
主站：
<div class='pg-header'>
<div style='width:980px;margin:0 auto'>
内容自动居中
</div>
</div>
<div class='pg-content'></div>
<div class='pg-footer'></div>
后台管理布局：
position:
fixed 永远固定在窗口的某个位置
relative 单独无意义
absolute 单独应用是，首开页面的定位是按照定义的指定位置，但是不随滚动条而固定在窗口的位置
布局方式：a.（菜单栏固定不变，内容页随滚动条而变化）（position:fixed的运用还有overflow:auto的运用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*去掉间距*/
body{
margin:0;
}
/*因为float可能经常用到，所以单独分开来写*/
.left{
float:left;
}
.right{
float:right;
}
.pg-header{
height:48px;
background-color:blue;
color:white;
}
.pg-content .menu{
position: fixed;
top:48px;
left:0;
bottom:0;
width:200px;
background-color: #dddddd;
}
.pg-content .content{
position: fixed;
top:48px;
right:0;
bottom:0;
left:200px;
background-color: purple;
/*只让内容页出现滚动条，其他固定不变*/
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
b.（菜单栏和页面都随滚动条而变化）（position:absolute的单独运用）（左右滚动条的实现）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*去掉间距*/
body{
margin:0;
}
/*因为float可能经常用到，所以单独分开来写*/
.left{
float:left;
}
.right{
float:right;
}
.pg-header{
height:48px;
background-color:blue;
color:white;
}
.pg-content .menu{
position:absolute;
top:48px;
left:0;
bottom:0;
width:200px;
background-color: #dddddd;
}
.pg-content .content{
position:absolute;
top:48px;
left:200px;
right:0;
bottom:0;
/*内容页宽度像素小于980px时出现左右滚动条*/
min-width: 980px;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<div style="background-color: purple;">
<p style="margin:0;">这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
</div>
</div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
c.菜单下拉框的实现（hover的两点运用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*去掉间距*/
body{
margin:0;
}
/*因为float可能经常用到，所以单独分开来写*/
.left{
float:left;
}
.right{
float:right;
}
.pg-header{
height:48px;
background-color:blue;
color:white;
line-height: 48px;
}
.pg-header .logo{
width:200px;
background-color: cadetblue;
text-align: center;
}
.pg-header .user{
width:160px;
background-color: wheat;
height:48px;
}
.pg-header .user:hover{
background-color:blueviolet;
}
.pg-header .user .a img{
margin-top:4px;border-radius:50px;height:40px;width:40px;
}
.pg-header .user .b {
position: absolute;
top: 48px;
right: 20px;
width:160px;
z-index: 20;
background-color: white;
color:black;
display:none;
}
/*鼠标移动对应位置下拉框的实现*/
.pg-header .user:hover .b{
display:block;
}
.pg-header .user .b a{
/*让a标签独自占一行*/
display: block;
}
.pg-content .menu{
position:absolute;
top:48px;
left:0;
bottom:0;
width:200px;
background-color: #dddddd;
}
.pg-content .content{
position:absolute;
top:48px;
left:200px;
right:0;
bottom:0;
/*内容页宽度像素小于980px时出现左右滚动条*/
min-width: 980px;
/*为了菜单栏下拉框能显示，必须设置级数，否则下拉框菜单会被content覆盖*/
z-index: 9;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">
功能菜单
</div>
<div class="user right" style="position:relative">
<a class="a" href="#">
<img src="m3.png">
</a>
<!--默认b是隐藏的-->
<div class="b">
<a>我的资料</a>
<a>注销</a>
</div>
</div>
</div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<div style="background-color: purple;">
<p style="margin:0;">这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p><p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
<p>这是一个测试</p>
</div>
</div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
