Flex登陆界面开发经验分享（四）

Flex登陆界面开发经验分享（四）2011-04-10jackson四、Flex中CSS层叠样式表的应用方法

在“Flex登陆界面开发经验分享三”中Jackson已经介绍了简单的Flex登陆界面布局的简单流程,Jackson已经将Flex登陆布局的草图设计出来了，Flex登陆界面代码如图1（Flex登陆界面草图代码）演示如例1（Flex登陆框草图列子演示）。相信大家应该从草图出来的那一刻开始，脑子就开始有想法了，^-^ 因为这个Flex登陆框实在是没有太多的操作体验和美感呈现，我们需要进一步地设计优化它。

图1 Flex登陆界面草图代码

例1 Flex登陆框草图例子演示

Jackson首先想到的是要让登陆框能根据浏览窗口的伸缩自适应居中，因为对于系统的登陆页面的视觉重点应该是在页面中心。我们可以直接在Application标签对中增加几个布局属性，layout="vertical"和verticalAlign="middle"。前一个属性作用是垂直布局，可以让登陆框的Panel在垂直方向上默认居中；后一个属性作用是水平布局，可以让登陆框的Panel在水平方向上居中。现在看来登陆框的Panel已经可以自适应居中了。按（Alt+Shift+x,f）测试一下代码吧，现在无论你怎样改变IE窗口的大小，登陆框的Panel总是相对IE窗口居中。另外，即使你现在在Panel中加坐标（x或y）值，也不会起作用，登陆框的Panel还是会自使用居中。代码如图2（Flex登陆界面自动居中代码）。

图2 Flex登陆界面自动居中代码