首页 > 其他分享 >Element之container容器布局

Element之container容器布局

时间:2023-04-25 22:47:17浏览次数:31  
标签:容器 container footer 标签 aside Element header main

作用:用来快速搭建页面基本结构

<el-container>:最外层容器标签

<el-header>:头部容器标签

<el-aside>:侧面容器标签

<el-main>:主要内容容器标签

<el-footer>:底部容器标签

注:以上标签采用的是flex弹性盒布局,本人还是比较喜欢用的(不会的可以去搜索相关教程,还是比较实用的)

常见的页面布局:

1.header+main

 

 

<el-container>

<el-header></el-header>

<el-main></el-main>

</container>

2.heaer+main+footer

 

<el-container>

<el-header></el-header>

<el-main></el-main>

<el-footer></el-footer>

</container>

3.aside+main

 

 

<el-container>

<el-aside></el-aside>

<el-main></el-main>

</container>

 

4.header+aside+main

 

 

<el-container>

<el-header></el-header>

<el-container>

<el-aside></el-aside>

<el-main></el-main>

</el-container>

</container>

5.header+aside+main+footer

 

 

<el-container>

<el-header></el-header>

<el-container>

<el-aside></el-aside>

<el-main></el-main>

<el-footer></el-footer>

</el-container>

</container>

6. aside+header+main

 

 

<el-container>

<el-aside></el-aside>

<el-container>

<el-header></el-header>

<el-main></el-main>

</el-container>

</container>

 

7.aside+header+main+footer

 

 

<el-container>

<el-aside></el-aside>

<el-container>

<el-header></el-header>

<el-main></el-main>

<el-footer></el-footer>

</el-container>

</container>

————————————————
版权声明:本文为CSDN博主「qq_51481048」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_51481048/article/details/122874921

 

标签:容器,container,footer,标签,aside,Element,header,main
From: https://www.cnblogs.com/fan-wang/p/17354173.html

相关文章

  • 容器的初始化
    个人认为容器最规范的初始化有三种:1.花括号初始化:1vector<string>v1{"a","an"};适用于已知容器中元素的个数以及元素的值的情况2.圆括号1vector<string>v1(10);//不推荐2//或3vector<string>v1(10,"");适用于已知元素的个数但不知元素的值的情况,注意圆括号不能用......
  • vue 使用Element 的form表单如何校验对象中的对象属性?
    1、校验对象中的对象属性,需要特殊处理下:<templatev-if="form.dataType===0"><el-form-itemlabel="芯片类型"prop="configExtend.schemeVersion"><el-selectv-model="form.configExtend.schemeVersion&quo......
  • D. Remove One Element(前缀最大+简单状态机)
    题目D.RemoveOneElement题意输入n(2≤n≤2e5)和长为n的数组a(1≤a[i]≤1e9)。从a中去掉一个数(也可以不去掉)。输出a的最长严格递增连续子数组的长度。思路一种方法是前缀最长和后缀最长,加起来。这种方法比较简单。用状态机来写,定义f[i][0/1]分别表示前缀......
  • java中的容器
    java中的容器(1)List接口:java.util.List<>实现:java.util.ArrayList<>:变长数组java.util.LinkedList<>:双链表函数:add():在末尾添加一个元素clear():清空size():返回长度isEmpty():是否为空get(i):获取第i个元素set(i,val):将第i个元素设置为val代码:List<Integer>li......
  • 批量删除docker过期停止的容器(全)
     过期的容器也是占用一部分的内存空间dockerps-a查看很多冗余过期的容器 这时候如果对应一个个删除容器id,有些麻烦,有没有方法对应将其批量删除呢答案:有的,本身命令行都是基于bash命令,可通过查询其容器,筛选其容器id,并将这部分容器进行删除即可关于docker的详细知识点可看我......
  • vue-element-admin报错Error: error:0308010C:digital envelope routines::unsupporte
    安装vue-element-admin报错 nodejs  Node.jsv18.15.0  opensslErrorStack:['error:03000086:digitalenveloperoutines::initializationerror'],library:'digitalenveloperoutines',reason:'unsupported',code:'ERR_OSSL......
  • Element UI 中 el-input 按下回车键会刷新页面的原因及解决方法
    【问题描述】在需求开发的过程中遇到了一个奇怪的问题:点击弹窗开启表单,分明没有添加任何键盘事件,但在按下回车键时会让页面自动刷新,因此影响到了其他功能。 【产生原因】查阅资料后得知,当el-form表单里只有一个 el-input时,按下回车建会自动触发页面提交功能,因此导致了页......
  • vite + vue3 + vue-router4 + ts + element plus + pinia + axios构建项目
    最后是完整的vite.config.ts、main.ts配置1、先用vite创建一个项目npmcreatevite@latest2、安装elementplusyarnaddelement-plus@element-plus/icons-vuevite.config.ts配置组件按需导入,图标自动导入npminstall-Dunplugin-vue-componentsunplugin-auto-impor......
  • vue3中如何引入element-icon并使用
    简单来说,步骤就是:安装——注册——按需引入——使用安装#NPM$npminstall@element-plus/icons-vue#Yarn$yarnadd@element-plus/icons-vue#pnpm$pnpminstall@element-plus/icons-vue注册您需要从@element-plus/icons-vue中导入所有图标并进行全局注册。......
  • docker跨主机容器访问docker+weave
    这玩意是真的折磨,不难,但是网上的教程太杂了,坑太多了。需求现在有两台服务器,里面部署了两台docker,此时我想要用Adocker里面的容器去访问Bdocker里面的容器。1.A主机192.168.159.140#安装weave#先下载wget-O/usr/local/bin/weavehttps://raw.githubusercontent.com/zettio......