前端武器库系列之html后台管理页面布局
设计网页，让网页好看：网上找模板
- 搜 HTML模板
- BootStrap
一、页面布局之主站页面
主站布局一般不占满页面，分为菜单栏、主页面、底部 上中下三部分。伪代码如下：
<div class='pg-header'> <div style='width:980px;margin:0 auto;'> 内容自动居中 </div> </div> <div class='pg-content'></div> <div class='pg-footer'></div>
二、页面布局之后台布局
后台页面一般分为上面顶部菜单、左侧操作栏、中右为内容三部分。有的后台可能会有个底部栏。
首先，左侧操作栏和中间内容栏怎么分，按照百分比的话，为了防止页面拖拽导致布局变化，可以设置最小宽度：
width: 20%;
min-width: 200px; /*当宽度小于200像素时生效*/
其次，左侧操作栏一般都是直接到底的，高度怎么设置呢？
后台管理布局：position:
- fixed – 永远固定在窗口的某个位置
- relative – 单独无意义
- absolute – 第一次定位，可以在指定位置，滚轮滚动时，不在了。。。。
1.后台布局之：fixed实现
只能实现左边菜单栏一直固定在左边的这种情况。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .left{ float: left; } .right{ float: right; } .pg-header{ height: 48px; background-color: #2459a2; 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; /***************当内容多时，出现滚动条**************/ /*不加overflow的话，内容多就不可见了*/ } </style> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left">a</div> <div class="content left"> <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p> </div> </div> <div class="pg-footer"></div> </body> </html>
2.后台布局之：absolute实现
通过改一个属性，就可以实现一下两种布局：
- a. 左侧菜单跟随滚动条
- b. 左侧以及上部不动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .left{ float: left; } .right{ float: right; } .pg-header{ height: 48px; background-color: #2459a2; 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; right: 0; bottom: 0; left: 200px; overflow: auto; /*注释不注释，两种布局效果*/ } </style> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left">a</div> <div class="content left"> <!--<div style="position: fixed;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>--> <!--<div style="position: absolute;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>--> <div style="background-color: purple;"> <p style="margin: 0;">a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p> </div> </div> </div> <div class="pg-footer"></div> </body> </html>
三、后台页面布局之菜单栏设计
后台管理页面一般顶部菜单栏，左侧有个logo，右侧有登录用户，以及报警信息，会话信息等。
- 用户头像设计为圆的
border-radius: 50%; /*设计头像图片是圆的*/
- 鼠标移动过去之后，多个内容显示出不同的样式
<head> <style> .item{ background-color: #dddddd; } .item:hover{ color: red; } .item:hover .b{ background-color: greenyellow; } </style> </head> <body> <div class="item"> <div class="a">123</div> <div class="b">567</div> </div> </body>
- 引入第三方css插件，好多图标就可以直接用了。
下载图标插件 —> The Icons 地址
总体实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/> <!--导入第三方图片插件，目录里两个css，一个压缩版的一个没有压缩（压缩版是一行）--> <style> body{ margin: 0; } .left{ float: left; } .right{ float: right; } .pg-header{ height: 48px; background-color: #2459a2; color: white; line-height: 48px; } .pg-header .logo{ width: 200px; background-color: #204982; text-align: center; } .pg-header .icons{ padding: 0 20px; } .pg-header .icons:hover{ background-color: #204982; } .pg-header .user{ margin-right: 60px; padding: 0 20px; color: white; height: 48px; position: relative; } .pg-header .user:hover{ background-color: #204982; } .pg-header .user .a img{ height: 40px;width: 40px;margin-top: 4px;border-radius: 50%; } .pg-header .user .b{ z-index: 20; position: absolute; /*相对于用户div定位*/ top: 48px; right: 0; background-color: white; color: black; width: 160px; display: none; font-size: 14px; line-height: 30px; } .pg-header .user .b a{ padding: 5px; color: black; text-decoration: none; } .pg-header .user .b a:hover{ background-color: #dddddd; } .pg-header .user:hover .b{ display: block; } .pg-header .user .b 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; right: 0; bottom: 0; left: 200px; overflow: auto; z-index: 9; } /* 设置消息样式，数字外边加个圆圈 */ .info { border-radius: 50%; line-height: 1px; background-color: red; padding: 10px 7px; font-size: 12px; display: inline-block; } </style> </head> <body> <div class="pg-header"> <div class="logo left"> 顺势而为 </div> <div class="user right"> <a class="a" href="#"> <img src="22.jpg"> </a> <!--鼠标放在头像上的下拉框--> <div class="b"> <a href="#">我的资料</a> <a href="#">注销</a> </div> </div> <div class="icons right"> <i class="fa fa-commenting-o" aria-hidden="true"></i> <!--从图标官网找图标引用语句复制下来 --> <span class="info">5 </span> <!--比如5条消息--> </div> <div class="icons right"> <i class="fa fa-bell-o" aria-hidden="true"></i> </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;">a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p> </div> </div> </div> <div class="pg-footer"></div> </body> </html>
