CSS 页面布局、后台管理示例
CSS 页面布局、后台管理示例
页面布局
1、头部菜单
2、中间内容/中间左侧菜单
3、底部内容
<div class='pg-header'> <div style='width:980px;margin:0 auto;'> 内容自动居中 </div> </div> <div class='pg-content'></div> <div class='pg-footer'></div>
网站图片推荐：fontawesome.io
下载：font-awesome-4.7.0 推荐：使用压缩过的min
导入：放入当前路径
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
后台管理示例
后台管理2：加入overflow: auto;后左侧菜单不动
后台管理2：未加入overflow: auto;菜单跟随右侧延伸
后台管理2：两者切换更方便
<!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; } /*左边菜单内的.menu*/ .pg-content .menu { position: fixed; top: 48px; left: 0; bottom: 0; width: 200px; background-color: cornflowerblue; } /*y右边菜单内的.content*/ .pg-content .content { position: fixed; top: 48px; right: 0; bottom: 0; left: 200px; background-color: powderblue; /*加入滚动条*/ overflow: auto; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left">菜单</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> </div> </div> <div class="pg-footer"></div> </body> </html>
<!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; } /*左边菜单内的.menu*/ .pg-content .menu { position: absolute; top: 48px; left: 0; bottom: 0; width: 200px; background-color: cornflowerblue; } /*y右边菜单内的.content*/ .pg-content .content { position: absolute; top: 48px; right: 0; bottom: 0; left: 200px; /*加入滚动条*/ /* */ } </style> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left">菜单</div> <div class="content left"> <div style=" background-color: powderblue;"> <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> </div> </div> </div> <div class="pg-footer"></div> </body> </html>
后台管理完整版
<!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"> <style> /*去页面间距*/ body{ margin: 0; } /*标签左侧飘起*/ .left{ float: left; } /*标签右侧飘起*/ .right{ float: right; } /*头部菜单区域*/ .pg-header{ height: 48px; background-color: #2459a2; color: white; /*设置文字上下居中*/ line-height: 48px; } /*设置网站log区域*/ .pg-header .log{ /*log区域设置菜单大小*/ width: 200px; background-color: darkblue; /*设置文字左右居中*/ text-align: center; } /* 其他图标区域边距设置*/ .pg-header .icons{ padding: 0 20px; } /*消息提示个数文字背景色*/ .pg-header .zbjj { border-radius: 50%; display: inline-block; padding: 10px 7px; line-height: 1px; background-color: red; font-size: 12px; } .pg-header .icons:hover{ background-color: darkblue; } /*添加登陆管理区域*/ .pg-header .user{ /*user区域设置菜单大小*/ margin-right: 60px; padding: 0 20px; color: white; /*飘起后防止出去*/ height: 48px; /*user文字左右居中*/ /*text-align: center;*/ } /*鼠标点击后背景颜色更改*/ .pg-header .user:hover{ background-color:mediumslateblue ; } /*用户头像图片*/ .pg-header .user .a img{ height: 40px; width: 40px; margin: 4px; /*图片变为圆形*/ border-radius: 50%; } /*用户选择框*/ .pg-header .user .b{ position: absolute; top: 48px; right: -1px; width: 160px; background-color: white; color: black; /*解决分层*/ z-index:20; /*不适用当前函数*/ display: none; } /*鼠标指向用户管理区域触发用户选择框*/ .pg-header .user:hover .b{ display: block; } /*用户选择框解决分行*/ .pg-header .user .b a{ display: block; } /*左边菜单内的.menu*/ .pg-content .menu{ position: absolute; top:48px; left: 0; bottom: 0; width: 200px; background-color: cornflowerblue; } /*y右边菜单内的.content*/ .pg-content .content{ position: absolute; top:48px; right: 0; bottom: 0; left: 200px; overflow: auto; z-index: 9; } </style> </head> <body> <!--上部区域--> <div class="pg-header"> <!--log--> <div class="log left"> Kevin.Xiang </div> <div class="user right" style="position: relative"> <!--点击头像跳转--> <a class="a" href="#"> <!--添加图片--> <img src="xsk.jpg"> </a> <div class="b"> <a>我的资料</a> <a>注销</a> </div> </div> <!--消息--> <div class="icons right"> <i class="fa fa-comment-o" aria-hidden="true"></i> <!--消息个数--> <span class="zbjj">5</span> </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">菜单</div> <div class="content left"> <div style=" background-color: powderblue;"> <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> </div> </div> </div> <!--底层区域--> <div class="pg-footer"></div> </body> </html>
