CSS快速入门-后端布局
一、后台框架概述
我们在网上随便搜索后台框架，你会发现大部分都查不多。正所谓：好看的皮囊千篇一律，有趣的灵魂万里挑一。
第一个是H-ui，H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版
采用源生html语言，完全免费，简单灵活，兼容性好
让您快速搭建中小型网站后台。
第二款是响应式Bootstrap网站后台管理系统模板ace admin，非常不错的轻量级易用的admin后台管理系统，基于Bootstrap3，拥有强大的功能组件以及UI组件，基本能满足后台管理系统的需求，而且能根据不同设备适配显示，而且还有四个主题可以切换。以前收费，好像最新版不再收费了。
从以上两款后台管理看，基本上非常类似。模型如下：
二、demo实现思路
具体实现思路如下：
1、主体分为三部分：头部导航栏、左侧菜单栏、右侧内容栏。
2、分别针对三部分设置样式。
3、头部通过浮动设置左右内容、菜单栏通过absolute定位、右侧内容栏通过absolute定位。
基本上通过以上几步就可以做出模型，但是这仅仅是个模型，如果需要丰富里面内容，让他变得更加漂亮的话，就需要不断的打磨、打扮。
三、搭建demo大体框架
a、定义div，作为header，里面分为两个子div，分别盛放logo和右侧登录框；
b、定义div，作为body，里面定义一个子div，作为menu；
c、定义div，作为content，里面盛放具体内容。
<div class="pg-header">
<div class="logo">后台管理系统</div>
<div class="login"><a href="http://www.baidu.com">登录</a></div>
</div>
<div class="pg-body">
<div class="pg-menu">
<ul>
<li>1213</li>
<li>1213</li>
<li>1213</li>
<li>1213</li>
<li>1213</li>
</ul>
</div>
<div class="pg-content">
<h2>sadfasdf</h2>
<h2>sadfasdf</h2>
<h2>sadfasdf</h2>
<h2>sadfasdf</h2>
<h2>sadfasdf</h2>
<h2>sadfasdf</h2>
</div>
</div>
四、设置各部分样式
a、header样式设置
aa、logo字体、样色设置
bb、右侧登录框向右侧浮动，设置距离顶部和右侧的距离。因为logo是div（块标签），login向右侧浮动后，会处于logo下面，所以margin-top为负数。如果设置logo的display为inline后，则login会和logo处于一行
cc、设置heder，整体高度和背景颜色。
body {
margin:0;
}
.logo{
font-size:30px;
color:white;
}
.login{
float:right;
margin-top:-28px;
margin-right:20px;
color:white;
}
.pg-header{
height:48px;
background-color:blue;
}
b、左侧菜单栏样式设置
aa、左侧菜单通过绝对定位
bb、设置距离左侧和宽度
cc、设置菜单ul的样式（去掉圆点）
.pg-body .pg-menu{
position:absolute;
background-color:#aaa;
left:0px;
width:180px;
}
.pg-body .pg-menu ul{
list-style:none;
}
c、右侧内容栏样式设置
aa、设置绝对定位，通过设定距离左边和上面的高度来进行定位
bb、设置高度和overflow(如果不设定overflow的话，内容多的话会撑到外面去。
.pg-body .pg-content{
position:absolute;
background-color:#ffa;
overflow:auto;
left:182px;
top:48px;
right:0;
bottom:0;
height:200px;
}
最后，全部代码如下，可以拷贝过去直接运行，就可以看到效果图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin:0;
}
.logo{
font-size:30px;
color:white;
display:inline;
}
.login{
float:right;
margin-top:-28px;
margin-right:20px;
color:white;
}
.pg-header{
height:48px;
background-color:blue;
}
.pg-body .pg-menu{
position:absolute;
background-color:#aaa;
left:0px;
width:180px;
}
.pg-body .pg-menu ul{
list-style:none;
}
.pg-body .pg-content{
position:absolute;
background-color:#ffa;
overflow:auto;
left:182px;
top:48px;
right:0;
bottom:0;
height:200px;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo">后台管理系统</div>
<div class="login"><a href="http://www.baidu.com">登录</a></div>
</div>
<div class="pg-body">
<div class="pg-menu">
<ul>
<li>1213</li>
<li>1213</li>
<li>1213</li>
<li>1213</li>
<li>1213</li>
</ul>
</div>
<div class="pg-content">
<h2>sadfasdf</h2>
<h2>sadfasdf</h2>
<h2>sadfasdf</h2>
<h2>sadfasdf</h2>
<h2>sadfasdf</h2>
<h2>sadfasdf</h2>
</div>
</div>
</body>
</html>
