【原】ELEMENT简单布局

算法与编程之美 2021-12-04

展开全文

1 问题描述

本文章通过div盒子和el-container两种方式进行网页的简单布局及嵌套功能，以此表明两者之间的不同。

2 算法描述

（一）使用div盒子装。一般装el-row和el-col。

代码清单 1

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;
}

具体效果：