Continue to last… In the previous post we finally made it:
The flex layout is used on the left. One problem with this is that if the blue area is too long, the content will cover the orange area. So, add a height to the blue area, and overflow: Auto allows the contents to scroll. And then the orange part at the bottom should be fixed at the lower left corner.
After modification, it is:
The corresponding code is:
3. Granulation of modules and choice of labels
This process does two things:
(1) List the private elements of each module
(2) Extract some common components to write (such as menu items)
1. Granulate the left part of the tree first:
First of all, the tree is divided into three parts: top fixed content + middle flexible menu items + bottom fixed content
Do not add too much position: fixed property when writing code. Because locating too many elements can affect performance. Sometimes it even gets jumpy when you roll. This part of the knowledge can refer to:
About performance optimizations: Reflow and Repaint
Therefore, we can continue to optimize…… in this part
2. Usage scenarios of IFrame
As a cosmetics-seeking front-end, iframe can be used in many scenarios, even though it is known to have many performance and experience drawbacks.
(1) Front-end intelligent projects (design draft to code) : Iframe can be used to show the characteristics of embedded web pages intact. (2) the integration situation of the project: more like this on the left side of the menu bar, on the right side is the specific content (separately for each function or component separation) (3) the modular, reusable (4) load advertising: to improve the entire website slow loading condition (5) page refresh only local (6) the condition of the package of the rich text editor: This prevents the editor from contaminating external styles
So our case is the second, we now want to embed a subproject into the main project:
Like this, achieve a “convex” layout, with the green parts being the content of the subprojects.
This is a common operation in mid-background projects. But how do we reconcile the main project and subproject hierarchies?
First, subitems are embedded with iframe. Since it’s a “convex” shape, we want iframe all over the screen. Another benefit of having iframe all over the screen is that it can be centered horizontally and vertically when making a modal box; The mask can cover the entire screen. If we want iframe to take up the entire screen, we have to overturn the previous layout. Because iframe takes up the entire screen, it forms a hierarchical relationship with the menu on the left of the main item.
Go ahead and analyze: Iframe is definitely on the lower level, and the main item menu is on the upper level.
As for positioning, surely less positioning is better.
Since the main project is at the bottom level and the subprojects are at the top level (green area), the first thing we need to consider is the impact of hierarchy. The bottom layer can have corresponding placeholder elements, but the top layer should not have placeholder elements, because too many placeholder elements will affect the bottom click.
First of all, we can be sure that there must be space for the bottom part and no space for the top part. In addition, the accordion menu part of the menu items is the priority on the top, more elements will be squeezed down.
Therefore, it can be concluded that:
Analyzing this item, the top two menu items on the left side of the main item are unexpandable, the bottom three menu items are expandable, and then there is a fixed menu item at the bottom.
3. Content on the right side of granulation
We’ve just used Flex: 1 to make the right part of the layout adaptive, but a lot of people still use float for positioning. Keep in mind that float is out of the standard layer, so float layouts take more time to render than Flex, resulting in lower performance.
Right layout analysis:
To be continued…