Container布局容器

最新推荐文章于 2024-03-18 15:33:14 发布

MiBaTLs

最新推荐文章于 2024-03-18 15:33:14 发布

阅读量537

点赞数

分类专栏： C语言程序设计文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/SSS_Sophia/article/details/129372222

版权

C语言程序设计专栏收录该内容

40 篇文章 1 订阅

订阅专栏

文章介绍了ElementUI框架中的Container布局组件，包括<el-container>、<el-header>、<el-aside>、<el-main>和<el-footer>等，这些组件常用于构建常见的页面布局，如头部、主体和侧边栏等不同部分的组合。示例代码展示了不同结构的布局实现。

摘要由CSDN通过智能技术生成

常见结构

用于布局的容器组件，方便快速搭建页面的基本结构：

< el-container >：外层容器。当子元素中包含 < el-header > 或 < el-footer > 时，全部子元素会垂直上下排列，否则会水平左右排列。

< el-header >：顶栏容器。

< el-aside >：侧边栏容器。

< el-main >：主要区域容器。

< el-footer >：底栏容器。

常见页面布局

在这里插入图片描述

<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>

在这里插入图片描述

<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

在这里插入图片描述

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>

在这里插入图片描述

<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

在这里插入图片描述

<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

在这里插入图片描述

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

在这里插入图片描述

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>