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>
后台管理布局1 ：左侧菜单跟随滚动条
<!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>
后台管理布局2：左侧以及上部不动 **常用**
后台管理完整版
<!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>
后台管理