美文网首页
element体验

element体验

作者: 简人CC | 来源:发表于2021-03-07 19:26 被阅读0次

    layout 采用flex。

      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside width='200px'>Aside</el-aside>
          <el-main>Main</el-main>
        </el-container>
        <el-footer>Footer</el-footer>
      </el-container>
    
    html, body {
      height: 100%;
      margin: 0;
    }
    .el-header,
    .el-footer {
      background-color: #b3c0d1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }
    
    .el-aside {
      background-color: #d3dce6;
      color: #333;
      text-align: center;
      line-height: 200px;
      height: 100%;
    }
    
    .el-main {
      background-color: #e9eef3;
      color: #333;
      text-align: center;
      line-height: 160px;
      height: 100%;
    }
    
    body > .el-container {
      height: 100%;
    }
    
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }
    
    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
    

    相关文章

      网友评论

          本文标题:element体验

          本文链接:https://www.haomeiwen.com/subject/izchbxtx.html