ELEMENT简单布局
1 问题描述
本文章通过div盒子和el-container两种方式进行网页的简单布局及嵌套功能，以此表明两者之间的不同。
2 算法描述
（一）使用div盒子装。一般装el-row和el-col。
代码清单 1
<template><div id=""><!-- 头部 --><div class="content"><el-row style="margin-bottom: 0;"><el-col :span="24"><div class="top bg-purple-dark"></div></el-col></el-row></div><!-- 中间 --><div class="card"><el-row><el-col :span="12"><div class="double bg-purple"></div></el-col><el-col :span="12"><div class="double bg-purple-light"></div></el-col></el-row><el-row><el-col :span="8"><div class="card3 bg-purple" style="margin-right: 36px;"> </div></el-col><el-col :span="8"><div class="card3 bg-purple-light" style="margin-right: 36px;"></div></el-col><el-col :span="8"><div class="card3 bg-purple"></div></el-col></el-row></div><!-- 尾部 --><div class="end"><el-row style="margin-bottom: 0;"><el-col :span="24"><div class="end bg-purple-dark"></div></el-col></el-row></div></div></template> |
|---|
CSS样式
代码清单 2
* {margin: 0;padding: 0;}.el-row {margin-bottom: 20px;&:last-child {margin-bottom: 0;}}.el-col {border-radius: 4px;}.card{margin-top: 20px;margin-left: 70px;margin-right: 70px;}.double {border-radius: 4px;min-height: 50px;}.card3 {border-radius: 4px;min-height: 490px;}.top, .end {border-radius: 4px;min-height: 50px;}.bg-purple-dark {background: #99a9bf;}.bg-purple {background: #d3dce6;}.bg-purple-light {background: #e5e9f2;}.row-bg {padding: 10px 0;background-color: #f9fafc;} |
|---|
具体效果：
（一）使用el-container装。el-container 的子元素一般包括el-header、el-aside、el-main、el-footer。同样这些标签里无法使用class类，若要改变样式，要直接使用style要用.el-header这样的样式。
代码清单 1
<template><el-container><!-- 头部 --><el-header>Header</el-header><!-- 中间 --><el-main><el-row><el-col :span="24"><div class="grid-c bg-purple-dark"></div></el-col></el-row><!-- 嵌套 --><el-container> <el-header>头</el-header> <el-main> <el-row> <el-col :span="8"><div class="grid-desCard bg-purple"></div></el-col> <el-col :span="8"><div class="grid-desCard bg-purple-light"></div></el-col> <el-col :span="8"><div class="grid-desCard bg-purple"></div></el-col> </el-row> </el-main></el-container></el-main><!-- 尾部 --><el-footer >Footer</el-footer></el-container></template> |
|---|
STYLE样式
代码清单 2
.el-header,.el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-main { background-color: #E9EEF3; color: #333; text-align: center; line-height: 160px; }.grid-c{border-radius: 4px;min-height: 70px;}.grid-desCard{border-radius: 4px;min-height: 416.117px;}.bg-purple-dark {background: #99a9bf;}.bg-purple-light {background: #e5e9f2;}.bg-purple {background: #d3dce6;} |
|---|
具体效果：
3 结语
本篇文章主要讲的是通过div盒子和el-container两种方式进行网页的简单布局及嵌套功能。同样可以将两种方式的中间部分进行改变，在官网中有许多Layout 布局的样式，可以根据自己想要的效果进行变换。
实习编辑：李欣容
稿件来源：深度学习与文旅应用实验室（DLETA）