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;
}具体效果：
<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 布局的样式，可以根据自己想要的效果进行变换
