css - 后台管理系统基本布局源代码，提供可运行示例（CSS实现后台管理系统主界面布局）

最新推荐文章于 2024-09-22 14:16:10 发布

街尾杂货店&

最新推荐文章于 2024-09-22 14:16:10 发布

阅读量2.7k

点赞数 3

分类专栏： html5 css3 文章标签：前端后台管理系统布局 css后台管理界面布局 css后台系统布局源码下载 css实现布局 css html

本文链接：https://blog.csdn.net/weixin_50545213/article/details/129006600

版权

html5 同时被 2 个专栏收录

9 篇文章 2 订阅

订阅专栏

css3

7 篇文章 0 订阅

订阅专栏

效果图

你可以直接复制下方示例代码，获得以下布局源代码：

在这里插入图片描述

全部源码

可新建一个.html网页，然后复制运行起来。

<!DOCTYPE html>
<html>

<head>
  <title>flex</title>
  <meta charset="utf-8">
  <style type="text/css">
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html,
  body {
    height: 100%;
  }

  .window {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .header {
    height: 80px;
    background-color: #efefef;
  }

  .footer {
    height: 50px;
    background-color: #efefef;
  }

  .main {
    flex: 1;
    display: flex;
    overflow-y: hidden;
  }

  .aside {
    height: 100%;
    width: 250px;
    overflow-y: auto;
  }

  .content-box {
    flex: 1;
    height: 100%;
    padding-left: 10px;
    background-color: #e6e6e6;
    display: flex;
    flex-direction: column;
  }

  .content {
    flex: 1;
    background-color: #fff;
    overflow-y: auto;
  }
  </style>
</head>

<body>
  <div class="window">
    <div class="header">
      header
    </div>
    <div class="main">
      <div class="aside">
        <p>测试内容</p>
      </div>
      <div class="content-box">
        <div>
          当前位置：面包屑>面包屑
        </div>
        <div class="content">
          <p>测试内容1</p>
          <p>测试内容100</p>
        </div>
      </div>
    </div>
    <div class="footer">
      footer
    </div>
  </div>
</body>

</html>

注意事项

html和body的height属性设置为100%；
main的overflow-y属性设置为hidden;aside和content的overflow-y属性设置为scroll；

前端后台管理的漂亮界面，css html后台管理系统基本布局，CSS布局–全屏-常见后台管理系统布局，后台管理系统长css源码，后台管理页面布局的css，后台管理系统长css源码，后台管理页面基础布局HTML+CSS，CSS 页面布局、后台管理示例，CSS 后台管理系统布局示例(上左中)，后台管理css 相关实例(示例源码，css实现后台管理系统自适应布局，后台管理页面基础布局HTML+CSS，后台系统主要布局,css实现，后台管理系统前端模板(html + CSS，后台系统主要布局,css实现，CSS布局–全屏-常见后台管理系统布局，css - 后台管理系统基本布局源代码，提供可运行示例（CSS实现后台管理系统主界面布局）