下载掌阅APP，畅读海量书库
立即打开
在进行前端开发时，首先要考虑网页的整体布局。就像一位成熟的画家，首先要从大局入手，绘制出一个轮廓，再对各个局部进行修饰。
我们可以把一个网页想象成一个容器，为了能够把自己的物件更加井井有序地摆放在容器里，就必须对容器的空间进行划分。好的布局不仅能够使网页看起来更加美观，还能够提高开发效率。在WebGIS开发中，网页的布局与纯前端相比，没有那么复杂，但也不能忽略它的重要性。
在网页整体布局方面，Element常用的标签是el-container、el-header、el-aside、el-main和el-footer。其中，el-container是一个容器级别的标签，其他标签将作为“槽”对该容器进行划分。需要注意的是el-container的子元素只能是后四者，后四者的父元素也只能是el-container，并且当子元素包含el-header或el-footer时，全部子元素会垂直上下排列，否则子元素将水平左右排列。
本节将基于Element的布局样式和一张地图给出四种布局方式，对页面的整体布局进行详细的阐述。
1.布局方式一
最简单的布局方式就是容器顶部是一个el-header标签，底部是一个el-main标签，如图2-6所示。
图2-6 布局方式一
布局方式一的代码如下：
2.布局方式二
除了布局方式一，还可以在页面的底部再加上一个el-footer标签，如图2-7所示。
图2-7 布局方式二
布局方式二的代码如下：
3.布局方式三
只要el-container标签内不包含el-header和el-footer标签，就可以完成自左向右的布局，如图2-8所示。
Element将el-aside标签的宽度默认设置为 300px，读者可以在自己的CSS样式中通过“！important”来强制改变该标签的宽度，或者在行内样式中修改标签的宽度。只要自己设置的CSS优先级大于默认的CSS优先级即可。布局方式三的实现代码如下：
图2-8 布局方式三
4.布局方式四
布局方式四将混合使用由上而下的布局和由左到右的布局，从而得到一个更加完整、漂亮的页面。布局方式四在el-container标签中分别放入el-header、el-aside、el-main、el-footer标签，如图2-9所示。
图2-9 布局方式四
需要注意的是，在布局方式四中，整体布局是由上而下的布局，分为顶部、中部、底部，在中部又进行了由左到右的布局。即el-container标签（父el-container标签）包含了三部分，顶部为el-header标签，中部为el-container标签（el-container子标签），底部为el-footer标签，而中部的el-container子标签又包含了el-aside标签和el-main标签。布局方式四的实现代码如下：
到此，我们就可以使用el-container、el-header、el-aside、el-main、el-footer标签进行各种页面布局了。