element-ui布局容器的使用

已于 2023-01-13 16:56:28 修改
阅读量599 收藏 1
点赞数 1
文章标签： ui vue.js elementui
于 2023-01-13 16:43:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47902184/article/details/128676001
版权

element-ui 布局容器的使用

效果图：
在这里插入图片描述
代码段：

<template>
	<div>
		<el-container style="height: 100%;">
			<!-- 头部区域 -->
			<el-header class="myHeader">
				<p class="topFont">
					我的笔记
				</p>
			</el-header>
			<el-container class="contant">
				<!-- 菜单栏区域 -->
				<el-aside id="caiDanLan" width="200px" style="background-color: #828282">
					<el-menu :default-active
最低0.47元/天 解锁文章
майр
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
*IT UI：足迹第五十五步：如何甄别前端使用的UI
原玉辉的博客
02-25 804
项目经历1)项目框架：myBatis是种jdbc技术，Hibernate是种jpa技术；1.1)springMvc+spring+myBatis+拷贝jar包 1)项目框架：myBatis是种jdbc技术，Hibernate是种jpa技术； 1.1)springMvc+spring+myBatis+拷贝jar包 1.1.1.WebRoot下有jsp页面，就说明前端页面用了springMvc模式； ...
Element-UI使用手册1
08-03
- **Container布局容器**：提供Row和Col组件，帮助开发者实现响应式的栅格布局系统。 - **Color色彩**：定义了一套标准的颜色方案，便于统一应用中的色彩风格。 - **Typography字体**：包含文字相关的样式，如...
Flex 3 布局容器学习笔记 整理
10-29
国庆期间，做了不少基于 flex 的开发工作，对 flex 的布局容器有了进一步深入的理解，也找到不少非常棒的文章，分享到这里方便一下大家。
ElementUI使用指南(一文即可上手创建简单页面)
最新发布
weixin_43819028的博客
05-08 2398
Element，是由国内的饿了么团队开发并开源的一套面向开发者、设计师和产品经理准备的基于 Vue 的UI组件库。
【编程鹿】害 学element-ui 看这篇就够了
Java杂记
11-23 293
环境搭建 npm 安装 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 npm i element-ui -S CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> &.
Element-UI 布局容器
wgchen
10-12 1771
Element-UI 布局容器
vue - element-ui - Container 布局容器
qq_34670974的博客
09-03 3629
用于布局的容器组件，方便快速搭建页面的基本结构： <el-container>：外层容器。当子元素中包含<el-header>或<el-footer>时，全部子元素会垂直上下排列，否则会水平左右排列。 <el-header>：顶栏容器。 <el-aside>：侧边栏容器。 <el-main>：主要区域容器。 ...
ElementUI笔记 -- 1
weixin_68540347的博客
02-23 1857
ElementUI笔记 -- 1
3、element-Plus搭建布局页
weixin_51915021的博客
05-05 1306
Vue3 + .net core6 WebAPI前后端分离
element-ui.rar
05-07
布局组件则有布局容器（Layout）、栅格系统（Grid）等，帮助开发者构建出清晰、规范的页面结构。 例如，要使用 Button 组件，只需在模板中添加相应代码： ```html <el-button type="primary">主要按钮</el-button>...
VueLayout基于UI组件的Vue可视化布局生成vue代码的工具
08-12
Vue-Layout 基于UI组件的Vue可视化布局、生成.vue代码的工具
使用element-ui开发的前端报表页面
02-08
在本文中，我们将深入探讨如何使用Element-UI框架来开发前端报表页面，这对于那些在前端布局上遇到困难或者对在Element-UI中嵌入V-Charts不太熟悉的同学来说，将是一份宝贵的指南。 Element-UI是一款基于Vue.js的...
Element-UI 使用手册文档 V2.4.6 （Vue版本）.pdf
11-18
Element-UI 使用手册文档 V2.4.6 （Vue版本） 致谢 开发指南 安装 快速上手 国际化 自定义主题 内置过渡动画 Basic 基本组件 Layout 布局 Container 布局容器 Color 色彩 Typography 字体 Icon 图标 ...
element-ui-2.14.1离线包
01-10
Element UI 的组件覆盖了表单组件（如输入框、选择器、开关等）、布局工具（栅格系统、布局容器等）、数据展示（表格、卡片、步骤条等）、导航（菜单、按钮、面包屑等）以及弹出层（对话框、提示、通知等）等多个...
第四章 element-ui组件 Container 布局容器
weixin_44224089的博客
08-09 890
一、Container 布局容器 <el-container>：外层容器。当子元素中包含<el-header>或<el-footer>时，全部子元素会垂直上下排列，否则会水平左右排列。 <el-header>：顶栏容器。 <el-aside>：侧边栏容器。 <el-main>：主要区域容器。 <el-footer>：底栏容器。 以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<...
elementUI解决栅格布局一行放五个盒子放不下的问题
oneya1的博客
12-03 1980
1.问题图 2.解决办法(修改:lg=“{span: ‘24-5’}”，这样在css中可以看到是 el-col-lg-24-5) 样式 最终效果:
divcss布局模板代码_Element-UI 技术揭秘—Container 布局容器组件的设计与实现
weixin_39771969的博客
11-19 586
前言上一篇文章我们分析了 Layout 布局组件的设计和实现，它的应用场景通常是局部布局。对于整个页面的布局，element-ui 提供了 Container 布局容器组件，专门用于 PC 管理后台页面的整体布局。需求分析我们先通过几幅图看一下页面的常见布局。这两张图的布局在后台系统中很常见，通过简单的 CSS 就可以实现。不过我们更喜欢用组件化的开发方式，把这些 CSS 的细节封装到组件里，如下...
Element之container容器布局
qq_51481048的博客
02-11 3539
作用:用来快速搭建页面基本结构 <el-container>:最外层容器标签 <el-header>:头部容器标签 <el-aside>:侧面容器标签 <el-main>:主要内容容器标签 <el-footer>:底部容器标签 注：以上标签采用的是flex弹性盒布局，本人还是比较喜欢用的(不会的可以去搜索相关教程，还是比较实用的) 常见的页面布局： 1.header+main <el-container> ..
element ui 学习-01 (Layout 布局)(Container 布局容器)
qq_35900705的博客
10-14 4781
Layout 布局 用法: <el-row> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple-light">...
element-ui 布局
09-15
你可以使用<el-container>作为外层容器，在其中嵌套其他element-ui布局组件，如<el-header>、<el-aside>、<el-main>和<el-footer>等，来创建不同的布局结构。 例如，在你的代码中可以像这样使用element-ui布局组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值