基本后台管理布局

页面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;
}

 

posted @ 2018-01-28 22:22  宙冰  阅读(172)  评论(0)  编辑  收藏  举报