浮木云学习日志（3）---搭建静态页面-CSDN博客

本文链接：https://blog.csdn.net/shouqian2021/article/details/135720314

浮木云学习日志（3）--静态页面搭建

上次跟大家分享了浮木云的基础知识学习，本次我将按照自己学习的基础知识搭建一个简单的静态页面，给大家看一下用浮木云搭建出来的页面效果。

如果你是初级产品小白，如果你也正在为你的产品设计所发愁，那就可以通过这个链接：浮木云-产品设计开发智能助手开启的产品飞起之路，让你在产品设计中少走弯路；如果你是第一次才看到我的学习文章，可以翻看我之前的学习文章，让你对这个小众平台有个初步了解，并且可以通过我的学习分享能够快速入门产品设计。

接下来我就根据我上次的学习的基础知识搭建一个简单的页面，共同见证这个平台给我们带来的惊艳之处。

创建应用

第一步，创建应用，我先根据模版中心的订单管理系统搭建一个简单的Web静态页面，是关于订单管理的页面。因为不涉及其他页面，所以子应用可以直接略过。

导航配置

接下来给自己所创建的应用配置一个导航菜单，导航菜单我就配置一个侧边导航。选择侧边导航，同时对导航的顶部高度、侧边宽度和导航主题进行配置。

在子应用配置中将原有的logo图片去掉，上传“采购”的logo，并填写子应用名称：订单采购管理系统。

接着配置导航样式，导航样式主题分为四种：默认、清新绿、暗黑黄和自定义，我这里选择的是自定义，保存菜单导航配置之后，这样就可以对自己的菜单导航样式进行自定义配置，仿照模版选择合适的颜色：

样式配置过后，配置菜单导航数据，新增菜单主题，这里我根据订单采购系统的侧边导航配置一样的导航。

创建页面

菜单导航配置过后，整个页面的框架已经搭建好，接下来创建新的页面，可以看到菜单导航配置之后的页面效果。

搭建框架布局

根据浮木云的快速入门，放置弹性容器，先将整个页面的框架布局定义好，这样就可以在对应的框架布局中填充对应的内容。

页面内容填充
1. 第一个框架布局内容填充

根据采购系统的布局填充统计块的内容，该框架包括两块内容，一块是统计块内容，一块是通知内容，因此要内置两个弹性容器，分别放置订单管理的统计块内容和通知内容。为了让整个统计块内容表达清晰，排列整齐，在第一个弹性容器自动换行调整为“否”，然后分别放置5个小的弹性容器，用来填充图片，“未发货”，“已出货”，“已完成”和“已延期”，可以发现这5个小的弹性容器都在一排。接着，将放置图片的弹性容器高度和宽度分别设为100px，横向对齐和纵向对齐分别设置为居中对齐，并在内外边距的外边距设置50，盒子边盒的四角分别设置为10，这样放置图片的弹性容器布局就已经定义好了。填充“未发货”，“已发货”，“已完成”和“已延期”的弹性容器中的外边距设置为50，高度可直接设置为100%，宽度设置为15%，且横向对齐和纵向对齐分别调整为“居中对齐”。第一个弹性容器的5个小弹性容器就布置好了。

最后就是在对应的容器中填充图片和文字。选中填充图片的弹性容器，在“背景样式”设置背景颜色，并上传背景图片，图片是在别的网站随便下载的logo，从本地上传上来。在填充文字的弹性容器的自动换行改为“是”，这样子在小弹性容器填充文字和数字时，都会分别占据一行。放置两个文字组件，在“属性配置”中分别填写文字和数字。在“样式配置中”可以根据需求在文字样式中对所填写的文字和数字对“字体大小”，“字体粗细”，“字体样式”和“字体颜色”对文字进行样式配置，这样子第一个统计块的内容就填充好啦!

接下来就要对第二个弹性容器进行内容填充了，跟上述操作步骤是一样的，这里几不做过多介绍了，具体展示效果如下图所示：

1. 第二个框架布局内容填充

对第二个弹性容器进行内容填充，包括两部分内容：“查询”和“表格”，因此要在第二个弹性容器再放置两个小的弹性容器用来填充“条件查询”和“表格”，将弹性容器的自动换行改为“是”。在第一个弹性容器中放置“查询容器”，并在“查询容器”中分别放置两个“输入框”和一个“下拉框”，分别在“属性配置”中对“输入框”和“下拉框”填写对应的“标签”，这样一个好看的查询布局就配置好啦。