Element-ui container常见布局

news2024/11/24 9:28:14

1、header\main布局

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>
<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  </style>

2、header\main\footer布局

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  </style>

3、Aside/main布局

4、header/aside/main 布局

<template>
  <div>
    <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>
<style>
.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;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .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;
  }
</style>

5、header/aside/main/footer布局

<template>
  <div>
    <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>
<style>
.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;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .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;
  }
</style>

6、aside/header/main/footer布局

<template>
  <div>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<style>
.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;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .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;
  }
</style>
 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/995208.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

日常开发小汇总（3）js类型判断

日常开发小汇总（3）js类型判断

1.typeof 能判断出字符串、数字、方法和undefined&#xff0c;array、null、object判断不出 let num 1;let str "x";let fn function user(){}let arr [1,2]let obj {name:"zhangs"}let und;let nul null;console.log(typeof num) //numberconsole.l…
阅读更多...
深度、广度优先遍历（邻接表）

深度、广度优先遍历（邻接表）

#include<stdio.h> #include<stdlib.h> #include<iostream> #include<queue> #define MAXVEX 20 typedef char VertexType; using namespace std;//边表结点 typedef struct EdgeNode{int adjvex;struct EdgeNode *next; }EdgeNode;//顶点结点 typedef…
阅读更多...
Spring Cloud：构建微服务的最佳实践

Spring Cloud：构建微服务的最佳实践

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
手机木马远程控制复现

手机木马远程控制复现

目录 目录 前言 系列文章列表 渗透测试基础之永恒之蓝漏洞复现http://t.csdn.cn/EsMu2 思维导图 1&#xff0c;实验涉及复现环境 2,Android模拟器环境配置 2.1,首先从官网上下载雷电模拟器 2.2,安装雷电模拟器 2.3, 对模拟器网络进行配置 2.3.1,为什么要进行配置…
阅读更多...
vagrant 虚拟机扩容磁盘

vagrant 虚拟机扩容磁盘

vagrant 虚拟机扩容磁盘 修改配置安装插件存储扩容 修改配置 参考博客:https://blog.csdn.net/marina_1/article/details/122238721 vagrant 版本 PS D:\vagrant\workplace\node2> vagrant --version Vagrant 2.3.7修改vagrant虚拟机配置文件Vagrantfile&#xff0c;添加磁…
阅读更多...
互斥锁，自旋锁，读写锁

互斥锁，自旋锁，读写锁

目录 互斥体 互斥锁 属性 使用流程&#xff08;相关API函数&#xff09; 互斥锁初始化和销毁的函数原型&#xff1a; 互斥锁的上锁和解锁的函数原型为&#xff1a; pthread_mutex_init() 定义 函数原型 返回值 初始化 pthread_mutex_destroy() 定义 函数原型 pt…
阅读更多...
EasyAVFilter代码示例之将视频点播文件转码成HLS（m3u8+ts）视频点播格式

EasyAVFilter代码示例之将视频点播文件转码成HLS（m3u8+ts）视频点播格式

以下是一套完整的视频点播功能开发源码&#xff0c;就简简单单几行代码&#xff0c;就可以完成原来ffmpeg很复杂的视频点播转码调用流程&#xff0c;而且还可以集成在自己的应用程序中调用&#xff0c;例如java、php、cgo、c、nodejs&#xff0c;不需要再单独一个ffmpeg的进程来…
阅读更多...
mongodb7.0安装全过程详解

mongodb7.0安装全过程详解

mongodb安装全过程详解 安装mongodb环境安装mongodb shell 安装mongodb环境 进入mongodb官网下载社区版服务器 点击跳转下载地址 选择适应自己系统的版本&#xff0c;然后下载 下图为下载后的文件&#xff0c;双击进行安装 需要注意的两个点 ①选择完整安装 ②不下载mongo…
阅读更多...
C语言深入理解指针（非常详细）（五）

C语言深入理解指针（非常详细）（五）

目录 回调函数qsort使用举例qsort函数的模拟实现sizeof和strlen的对比sizeofstrlensizeof和strlen的对比一道关于sizeof的题 回调函数 回调函数就是一个通过函数指针调用的函数 如果你把函数的指针&#xff08;地址&#xff09;作为参数传递给另一个函数&#xff0c;当这个指…
阅读更多...
状态管理Pinia

状态管理Pinia

Vue3 状态管理 - Pinia 1. 什么是Pinia Pinia 是 Vue 的专属的最新状态管理库 &#xff0c;是 Vuex 状态管理工具的替代品 2. 手动添加Pinia到Vue项目 后面在实际开发项目的时候&#xff0c;Pinia可以在项目创建时自动添加&#xff0c;现在我们初次学习&#xff0c;从零开始…
阅读更多...
DockerFile打包项目实战解析，一文读懂dockerfile打包

DockerFile打包项目实战解析，一文读懂dockerfile打包

文章目录 一、简介二、DockerFile基础1. DockerFile的作用和特点2. DockerFile语法介绍3. 基本指令&#xff1a;FROM、RUN、COPY、ADD等 三、编写具体项目使用DockerFile四、构建镜像1.项目构建默认命令dockerfile文件非默认命令dockerfile文件小知识 2. 使用ENTRYPOINT和CMD指…
阅读更多...
C++11 新特性 ⑥ | 智能指针 unique_ptr、shared_ptr 和 weak_ptr

C++11 新特性 ⑥ | 智能指针 unique_ptr、shared_ptr 和 weak_ptr

目录 1、引言 2、unique_ptr 3、shared_ptr 4、weak_ptr 5、shared_ptr循环引用问题&#xff08;面试题&#xff09; VC常用功能开发汇总&#xff08;专栏文章列表&#xff0c;欢迎订阅&#xff0c;持续更新...&#xff09;https://blog.csdn.net/chenlycly/article/detai…
阅读更多...
Java之List集合的解析及泛型的概述

Java之List集合的解析及泛型的概述

4.List集合的实现类 4.1List集合子类的特点【记忆】 ArrayList集合 底层是数组结构实现&#xff0c;查询快、增删慢 LinkedList集合 底层是链表结构实现&#xff0c;查询慢、增删快 4.2LinkedList集合的特有功能【应用】 特有方法 方法名说明public void addFirst(E e)在该…
阅读更多...
小白备战大厂算法笔试(五)——树

小白备战大厂算法笔试(五)——树

文章目录 二叉树常用术语初始化插入与删除常见类型满二叉树完全二叉树完满二叉树平衡二叉树 二叉树退化二叉树遍历层序遍历前序、中序、后序遍历 数组表示二叉树表示完美二叉树表示任意二叉树 二叉搜索树查找节点插入节点删除节点遍历有序搜索效率常见应用 二叉树 二叉树是一种…
阅读更多...
Dynamic CRM开发 - 实体窗体（一）

Dynamic CRM开发 - 实体窗体（一）

CRM创建一个实体以及实体字段后，在实体窗体里拖动字段和简单配置，就可以实现一个新增和编辑实体数据的表单，这种无代码的操作形式对非程序员非常的友好。 实体有四种类型的窗体：主窗体、快速视图窗体、快速创建窗体、卡窗体。 窗体区别如下： 窗体操作说明： 1、启用安全…
阅读更多...
Windows定时任务实现开机自启动

Windows定时任务实现开机自启动

Windows定时任务实现S11开机自启动 Windows键加 r 键打开运行窗口&#xff0c;然后输入control打开控制面板。
阅读更多...
Linux内核分析与应用2-内存寻址

Linux内核分析与应用2-内存寻址

本系列是对 陈莉君 老师 Linux 内核分析与应用[1] 的学习与记录。讲的非常之好&#xff0c;推荐观看 留此记录&#xff0c;蜻蜓点水,可作抛砖引玉 2.1 内存寻址 数据连续存储和选择读取思想,是目前我们使用的几乎所有机器运行背后的灵魂 计算机体系结构中的核心问题之一,就是如…
阅读更多...
python28种极坐标绘图函数总结

python28种极坐标绘图函数总结

文章目录 基础图误差线等高线polar场图polar统计图非结构坐标图 &#x1f4ca;python35种绘图函数总结&#xff0c;3D、统计、流场&#xff0c;实用性拉满 matplotlib中的画图函数&#xff0c;大部分情况下只要声明坐标映射是polar&#xff0c;就都可以画出对应的极坐标图。但…
阅读更多...
深入浅出AXI协议（6）——传输属性

深入浅出AXI协议（6）——传输属性

一、前言 在之前的文章中&#xff0c;我们介绍的主要内容是AXI协议的数据读写结构和读写响应结构&#xff0c;主要讲述了当遇到各种特殊情况时,AXI如何完成数据的读写操作&#xff0c;最后介绍了读写响应的4种类型。 在本文中&#xff0c;我们将介绍AXI协议的传输属性。 二、传…
阅读更多...
centos7的yum修改为阿里源

centos7的yum修改为阿里源

yum修改为阿里源 1.安装wget yum install -y wget2.备份与下载源 cd /etc/yum.repos.d mv -f CentOS-Base.repo CentOS-Base.repo.backup wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo mv epel.repo epel.repo.backup # 有些系…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023