后台管理系统基本布局

2020-02-23  本文已影响0人  六寸光阴丶

写在前面

如果本文对您有所帮助,就请点个关注吧!

背景

最近经常会写一写后台管理系统的界面,样式总是会调整半天,今天特地总结一下,以后可以直接使用。
总体采用了flex布局

主要要求

实现效果截图

后台管理系统基本布局.png

实现代码

<!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>

注意事项

  1. html和body的height属性设置为100%;
  2. main的overflow-y属性设置为hidden;aside和content的overflow-y属性设置为scroll;
上一篇下一篇

猜你喜欢

热点阅读