element-ui_圣杯布局

element-ui_圣杯布局

---

目录

---

---

内容

---

1、圣杯布局

圣杯布局（Holy Graid Layout)指的是一种最常见的网站布局。页面从下而下，分成三个部分：头部（header)，躯干（body），尾部（footer）。其中躯干又分成三栏，从左到右为：导航、主栏、副栏。

效果图1-1：

2、element-ui布局组件

这里我们直接使用element-ui提供的布局容器实现圣杯布局。

• <el-container>: 父容器，当子标签有<el-header>或者<el-footer>时，组件垂直排列；没有则水平排列。.

• <el-header>:

  • 头部容器
  • 高度固定

• <el-aside>:

  • 侧边栏容器（左右），一般用于放置导航菜单
  • 宽度固定

• <el-main>:

  • 主栏容器，一般用于放置导航菜单对应的内容
  • 宽度自适应

• <el-footer>:

  • 页脚容器，一般放置版权信息、地址信息、友链等等
  • 高度固定

2.1、常用属性

• Container

属性名	类型	可接受值	默认	描述
direction	string	horizontal/vertical	子标签有<el-header>或者<el-footer>,默认vertical;其他默认horizontal	排列方向

• Header

属性名	类型	可接受值	默认	描述
height	string	-	60px	header容器高度

• Aside

属性名	类型	可接受值	默认	描述
width	string	-	300px	侧边栏宽度

• Footer

属性名	类型	可接受值	默认	描述
height	string	-	60px	footer容器高度

3、element-ui实现圣杯布局

这里我们暂时不需要副侧边栏。

扫描二维码关注公众号，回复： 12407680 查看本文章

代码3-1如下：

<el-container class="home-contianer">
	<el-header></header>
	<el-container>
		<el-aside></el-aside>
		<el-main></el-main>
	</el-container>
</el-container>

// 其他样式根据需要调整，一般会设置各个容器的背景色
.home-container {
	height: 100%
}

添加内容后效果图3-1：

详细代码在下一篇乐优后台管理系统首页。

后记 ：

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/ly-bms    // 前端后台管理系统
后端JAVA源代码地址:https://gitee.com/gaogzhen/ly-backend        // 后端项目