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实现圣杯布局
这里我们暂时不需要副侧边栏。
代码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 // 后端项目