css实现可收缩的上下左右布局
发布时间：2025-11-11 点击：15
首先我们来看一下实现效果：
（推荐教程：css教程）
代码实现：
<!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="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; }
CDN加速是什么？福建电商行业企业要如何使用CDN
发了人家收不到-企业邮局
今天尝试连接服务器可是一直连不上
c 如何获取系统时间？
关于ecs云服务器的使用
站长经验：网站改版让损失降到最低需要注意的七个事项
做SEO可以从哪几个方面来分析竞争对手
哪里云服务器便宜实惠
（推荐教程：css教程）
代码实现：
<!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="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; }
CDN加速是什么？福建电商行业企业要如何使用CDN
发了人家收不到-企业邮局
今天尝试连接服务器可是一直连不上
c 如何获取系统时间？
关于ecs云服务器的使用
站长经验：网站改版让损失降到最低需要注意的七个事项
做SEO可以从哪几个方面来分析竞争对手
哪里云服务器便宜实惠
下一篇：迁移上云该如何选择云服务器配置