css实现可收缩的上下左右布局

首先我们来看一下实现效果：

（推荐教程：CSS教程）

代码实现：

nbsp;html>


    <meta>
    <meta>
    <title>布局</title>
    <link>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        html, body {
            width: 100%;
            height: 100%;
        }
 
        .left {
            width: 220px;
            height: 100%;
        }
 
        .center {
            position: absolute;
            top: 0;
            left: 220px;
            right: 200px;
            bottom: 0;
            background-color: grey;
        }
 
        .right {
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 100%;
        }
 
        .top {
            width: 100%;
            height: 70px;
            line-height: 70px;
        }
 
        .middle {
            position: absolute;
            top: 70px;
            bottom: 40px;
            width: 100%;
            text-align: center;
        }
 
        .bottom {
            position: absolute;
            bottom: 0;
            width: 100%;
            line-height: 40px; /*行高与高度相等，内容垂直居中*/
            text-align: center;
        }
 
        .top .bl_move {
            height: 2px;
            width: 100%;
            bottom: 0;
            cursor: col-resize;
            position: relative;
            background-color: lightgray;
            z-index: 2;
            line-height: 0;
            font-size: 12px;
        }
 
        .top .bl_fold {
            width: 36px;
            height: 12px;
            position: absolute;
            cursor: pointer;
            z-index: 3;
            opacity: .8;
            filter: alpha(opacity=80);
            text-decoration: none;
            background: #e5e5e5;
            color: #666;
            text-align: center;
            margin-top: -0px;
            left: 50%;
            right: -12px;
            line-height: 36px;
            border-radius: 0 3.01px 3.01px 0;
        }
 
        .top .bl_fold i {
            position: relative;
            top: -15px;
        }
 
        .left .bl_move {
            width: 2px;
            height: 100%;
            cursor: col-resize;
            position: relative;
            background-color: lightgray;
            z-index: 2;
            font-size: 12px;
            float: left;
        }
 
        .left .bl_fold {
            width: 12px;
            height: 36px;
            position: absolute;
            cursor: pointer;
            float: left;
            z-index: 3;
            opacity: .8;
            filter: alpha(opacity=80);
            text-decoration: none;
            background: #e5e5e5;
            color: #666;
            text-align: center;
            vertical-align: middle;
            top: 50%;
            line-height: 36px;
            border-radius: 0 3.01px 3.01px 0;
        }
 
        .left .bl_fold i {
            position: relative;
        }
 
        .right .bl_move {
            width: 2px;
            height: 100%;
            cursor: col-resize;
            position: relative;
            background-color: lightgray;
            z-index: 2;
            font-size: 12px;
            float: right;
        }
 
        .right .bl_fold {
            width: 12px;
            height: 36px;
            position: absolute;
            cursor: pointer;
            float: left;
            z-index: 3;
            opacity: .8;
            filter: alpha(opacity=80);
            text-decoration: none;
            background: #e5e5e5;
            color: #666;
            text-align: center;
            vertical-align: middle;
            top: 50%;
            left: -12px;
            line-height: 36px;
            border-radius: 0 3.01px 3.01px 0;
        }
 
        .right .bl_fold i {
            position: relative;
        }
 
        .bottom .bl_move {
            height: 2px;
            width: 100%;
            bottom: 0;
            cursor: col-resize;
            position: relative;
            background-color: lightgray;
            z-index: 2;
            line-height: 0;
            font-size: 12px;
        }
 
        .bottom .bl_fold {
            width: 36px;
            height: 12px;
            position: absolute;
            cursor: pointer;
            z-index: 3;
            opacity: .8;
            filter: alpha(opacity=80);
            text-decoration: none;
            background: #e5e5e5;
            color: #666;
            text-align: center;
            margin-top: -0px;
            left: 50%;
            top: -12px;
            line-height: 36px;
            border-radius: 0 3.01px 3.01px 0;
        }
 
        .bottom .bl_fold i {
            position: relative;
            top: -15px;
        }
    </style>
    <script></script><div>
    <div>
        内容内容内容内容内容内容内容内容
        <i></i>
        <i></i>
    </div>
    <div>
        <a>
            <i></i>
        </a>
    </div>
</div>
<div>
    <div>
        <div>
            内容内容内容内容内容内容内容内容
            <i></i>
            <i></i>
        </div>
        <div>
            <a>
                <i></i>
            </a>
        </div>
    </div>
    <div>
    </div>
    <div>
        <div>
            内容内容内容内容内容内容内容内容
            <i></i>
            <i></i>
        </div>
        <div>
            <a>
                <i></i>
            </a>
        </div>
    </div>
</div>
<div>
    <div>
        <a>
            <i></i>
        </a>
    </div>
    <div>
        Copyright © 2018 XXX公司版权所有
    </div>
</div>
<script>
    $(function () {
        $(".top .bl_fold").on(&#39;click&#39;, function () {
            var visible = $(&#39;.top .panel-content&#39;).is(":visible");
            if (visible) {
                $(&#39;.top .panel-content&#39;).hide();
                $(".middle").css("top", &#39;0px&#39;);
            } else {
                $(&#39;.top .panel-content&#39;).show();
                $(".middle").css("top", &#39;70px&#39;);
            }
        });
 
        $(".left .bl_fold").on(&#39;click&#39;, function () {
            var visible = $(&#39;.left .panel-content&#39;).is(":visible");
            if (visible) {
                $(&#39;.left .panel-content&#39;).hide();
                $(".center").css("left", &#39;2px&#39;);
            } else {
                $(&#39;.left .panel-content&#39;).show();
                $(".center").css("left", &#39;220px&#39;);
            }
        });
 
        $(".right .bl_fold").on(&#39;click&#39;, function () {
            var visible = $(&#39;.right .panel-content&#39;).is(":visible");
            if (visible) {
                $(&#39;.right .panel-content&#39;).hide();
                $(".center").css("right", &#39;2px&#39;);
            } else {
                $(&#39;.right .panel-content&#39;).show();
                $(".center").css("right", &#39;200px&#39;);
            }
        });
 
        $(".bottom .bl_fold").on(&#39;click&#39;, function () {
            var visible = $(&#39;.bottom .panel-content&#39;).is(":visible");
            if (visible) {
                $(&#39;.bottom .panel-content&#39;).hide();
                $(".middle").css("bottom", &#39;2px&#39;);
            } else {
                $(&#39;.bottom .panel-content&#39;).show();
                $(".middle").css("bottom", &#39;40px&#39;);
            }
        });
    })
</script>

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！