浮木云学习日志（10）---页面框架布局

随着对浮木云软件设计开发平台的深入了解，发现浮木云真的是一个很人性化的工具。前两次对浮木云的布局容器、弹性容器和栅格容器进行了简单的了解，同时也知道这些容器是页面是设计框架的基础，本次我会根据自己对容器的了解进行的一个简单的页面框架构建。

感兴趣的小伙伴可以直接去他们的官网https://www.fumucloud.com/了解试用。

1、示例页面框架布局

页面设计的好与坏完全取决于页面的框架布局是否设置的有层次。只有把页面框架搭建好，才能更好的填充页面内容，保证页面简洁美观。接下来，我们就浮木云模板中心的“通用数据管理系统”的‘工作台’页面来看一下如何确定页面框架布局。工作台示例图如下：

​

从图中我们可以看出框架呈上下分布，上层容器的框架左右分布，下层容器分为三部分。

​

2、确定页面框架布局

如何形成上述最基本的页面框架布局呢？首先你自己心里要有一个草图，你要清楚你的页面设计大概是什么样子？怎么分布？然后再确定该怎么设置容器的参数让几个容器的位置排列如上图所示的样子。

2.1上下布局

为了方便页面框架布局的管理，首先放置一个弹性容器，用来嵌套上下分布的两个弹性容器，同时要将该弹性容器的自动换行设置为“是”。放置两个弹性容器，对其进行参数设置，参数设置包括其宽度、高度和内外间距。两个容器的宽度自然是跟外层嵌套的弹性容器的宽度是一样的，高度是根据自己的内容定义特定的高度，上下布局之间一定是要有一定的间距分隔开，保证布局排列整齐简洁，将上层容器下外间距设置一定的数值，这里设置的“20”。这样，初步的上下布局框架已经定义好了：

​

2.2上层容器布局

我们观察示例图的上层分布是左右分布，即放置两个容器，每个容器的宽度在上层容器具有一定的占比，从页面内容分布来看，两个容器的占比是3:1，因此我们将左边容器的宽度设置为75%，右边容器的宽度设置为25%，同样的，为了保证页面布局左右分布层次分明，设置两个容器之间的外间距，具体数值可以根据自己的需求定义两个容器的间距，这里是将右边容器的左外间距定义为“20”，示例图如下：

​

2.3、​​​​​​​下层容器布局

下层容器布局的示例图分为三部分，即放置三个弹性容器，三个弹性容器的宽度占比比例和是1，这里是将前两个的容器宽度设置为37%，最后一个容器宽度设置为26%，同时设置三个容器之间的间距，这里分别设置第二个容器和第三个容器的左外间距是20，保证三个容器之间的间距是相等。当然，在这里容器的高度我个人认为是暂时无法确定的，你可以先设置的初始的值，但千万要记住，在填充页面内容之前，一定不要将容器的高度值设置为自适应，否则在高度自适应的情况下容器为成为一条线，你拖拽组件都无处安放（前车之鉴~切记切记~）。下层的容器布局示例图如下：

​

好了，页面框架设计就介绍到这里，这样看来，容器的框架设计是不是很简单？从上述的图例我们也能明显看出，好的框架布局设计明显让你的页面设计事半功倍！