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

发布日期:2020年9月17日 19:40 星期四

  • 正文内容
  • 相关推荐

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

 

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

e86be7ba596d78902e3f8ca79e981d9.png

代码实现:

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <meta http-equiv="X-UA-Compatible" content="edge"/>

    <title>布局</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="external nofollow"  rel="stylesheet">

    <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 src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>

<body>

<div class="top">

    <div class="panel-content">

        内容内容内容内容内容内容内容内容

        <i class="fa fa-sort-desc" aria-hidden="true"></i>

        <i class="fa fa-sort-desc" aria-hidden="true"></i>

    </div>

    <div class="bl_move">

        <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  title="点击展开" class="bl_fold">

            <i class="fa fa-caret-top" aria-hidden="true"></i>

        </a>

    </div>

</div>

<div class="middle">

    <div class="left">

        <div class="panel-content" style="float: left;width: calc(100% - 2px)">

            内容内容内容内容内容内容内容内容

            <i class="fa fa-sort-desc" aria-hidden="true"></i>

            <i class="fa fa-sort-desc" aria-hidden="true"></i>

        </div>

        <div class="bl_move">

            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  title="点击展开" class="bl_fold">

                <i class="fa fa-caret-up" aria-hidden="true"></i>

            </a>

        </div>

    </div>

    <div class="center">

    </div>

    <div class="right">

        <div class="panel-content" style="float: right;width: calc(100% - 2px)">

            内容内容内容内容内容内容内容内容

            <i class="fa fa-sort-desc" aria-hidden="true"></i>

            <i class="fa fa-sort-desc" aria-hidden="true"></i>

        </div>

        <div class="bl_move">

            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  title="点击展开" class="bl_fold">

                <i class="fa fa-caret-right" aria-hidden="true"></i>

            </a>

        </div>

    </div>

</div>

<div class="bottom">

    <div class="bl_move">

        <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  title="点击展开" class="bl_fold">

            <i class="fa fa-caret-down" aria-hidden="true"></i>

        </a>

    </div>

    <div class="panel-content" style="height: calc(100% - 2px)">

        Copyright © 2018 XXX公司版权所有

    </div>

</div>

<script>

    $(function () {

        $(".top .bl_fold").on('click', function () {

            var visible = $('.top .panel-content').is(":visible");

            if (visible) {

                $('.top .panel-content').hide();

                $(".middle").css("top", '0px');

            } else {

                $('.top .panel-content').show();

                $(".middle").css("top", '70px');

            }

        });

  

        $(".left .bl_fold").on('click', function () {

            var visible = $('.left .panel-content').is(":visible");

            if (visible) {

                $('.left .panel-content').hide();

                $(".center").css("left", '2px');

            } else {

                $('.left .panel-content').show();

                $(".center").css("left", '220px');

            }

        });

  

        $(".right .bl_fold").on('click', function () {

            var visible = $('.right .panel-content').is(":visible");

            if (visible) {

                $('.right .panel-content').hide();

                $(".center").css("right", '2px');

            } else {

                $('.right .panel-content').show();

                $(".center").css("right", '200px');

            }

        });

  

        $(".bottom .bl_fold").on('click', function () {

            var visible = $('.bottom .panel-content').is(":visible");

            if (visible) {

                $('.bottom .panel-content').hide();

                $(".middle").css("bottom", '2px');

            } else {

                $('.bottom .panel-content').show();

                $(".middle").css("bottom", '40px');

            }

        });

    })

</script>

</body>

</html>
趣乐分享-趣乐资源网
如有密码均为:www.itql.cn
学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站资源软件和源码 文章大部分为网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:209993299  

作者资料
描述: 90后草根站长!不忘初心,方得始终!

本文标签:

文章标题:css实现可收缩的上下左右布局

文章链接:https://www.itql.cn/post-3836.html

版权声明:若无特殊注明,本文皆为《钱哆哆》原创,转载请保留文章出处。