页面布局： 主站： <div class='pg-header'> <div style='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; 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; 200px; background-color: #dddddd; } .pg-content .content{ position:absolute; top:48px; left:200px; right:0; bottom:0; /*内容页宽度像素小于980px时出现左右滚动条*/ min- 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{ 200px; background-color: cadetblue; text-align: center; } .pg-header .user{ 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;40px; } .pg-header .user .b { position: absolute; top: 48px; right: 20px; 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; 200px; background-color: #dddddd; } .pg-content .content{ position:absolute; top:48px; left:200px; right:0; bottom:0; /*内容页宽度像素小于980px时出现左右滚动条*/ min- 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>