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>