基本后台管理布局

Posted 宙冰

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基本后台管理布局相关的知识，希望对你有一定的参考价值。

页面html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>首页</title>
    <link href="/Content/site.css" rel="stylesheet"/>
    <link href="/Content/themes/base/layout.css" rel="stylesheet"/>
</head>
<body>
    
<div class="ui-layout-header ui-bb">

</div>
<div class="ui-layout-wrapper">
    <div class="ui-layout-slide">

    </div>
    <div class="ui-layout-content">

    </div>
</div>
<div class="ui-layout-footer">

</div>
</body>
</html>

CSS

* {
    height: 100%;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
}

.ui-layout-header {
    height: 50px;
    margin-bottom: -50px;
    position: relative;
}

.ui-layout-wrapper {
    padding-top: 50px;
    min-height: 100%;
    height: 100% !important;
    height: 100%;
    background-color: ActiveBorder;
    padding-bottom: -30px;
}

    .ui-layout-wrapper .ui-layout-slide {
        width: 220px;
        min-height: 100%;
        float: left;
        margin-right: 100%;
        background-color: aqua;
    }

    .ui-layout-wrapper .ui-layout-content {
        width: 100%;
    }

        .ui-layout-wrapper .ui-layout-content .ui-layout-incontent {
            margin-left: 220px;
            background-color: red;
        }

.ui-layout-footer {
    margin-top: -30px;
    height: 30px;
    background-color: red;
    position: relative;
    z-index: 100;
}

 

以上是关于基本后台管理布局的主要内容，如果未能解决你的问题，请参考以下文章

后台管理页面基本布局

phpcms基本思路

导航组件替换/更改后台堆栈

vue电商后台管理系统保姆级教程——主页布局和功能实现

vue后台管理系统的布局

网站管理5_讲解网站后台SEO优化和如何修改关键字以及关键词布局