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>

  

posted @ 2018-04-23 22:07  skyflask  阅读(829)  评论(0编辑  收藏  举报