Flex Login Interface Development experience Sharing (IV.)

Four, flex in the CSS cascading style sheet application method

In the "Flex landing Interface development experience sharing three" in Jackson has introduced a simple flex landing interface layout of the simple process, Jackson has been the flex landing layout of the sketch design, Flex login interface code such as Figure 1 (Flex Landing Interface sketch code) to demonstrate such as Example 1 (Flex landing box sketch illustration). I believe we should start from the moment the sketch came out, the brain began to have ideas, ^-^ because this flex landing box is not much experience and aesthetic rendering, we need to further design optimization of it.

Figure 1 Flex Login Interface Sketch Code

Example 1 Flex Landing Box Sketch example Demo

Jackson's first thought was to make the landing box fit according to the expansion of the browsing window, because the visual focus on the system's landing page should be in the center of the page. We can add several layout attributes directly to the application tag pair, layout= "vertical" and verticalalign= "middle". The previous property function is a vertical layout that allows the panel of the landing box to be centered vertically by default; the latter property is horizontal layout, allowing the panel of the landing box to be centered horizontally. Now it appears that the landing box Panel has been able to adapt to the center. Press (ALT+SHIFT+X,F) to test the code, now no matter how you change the size of the IE window, the panel of the landing box is always relative to the IE window Center. In addition, even if you now add a coordinate (x or Y) value to the panel, it will not work, and the panel of the landing box will be centered by itself. The code is shown in Figure 2 (the Flex login interface automatically centers the code).

Figure 2 Flex Login Interface Auto Center code