Home > Article > Web Front-end > CSS flat blog learning summary (1) module analysis_html/css_WEB-ITnose
CSS flat blog learning summary (1) module analysis_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:501017browse
1. Module analysis
1. Before developing a project, you must first make a rough plan for the project, what functions it is going to have, and what specific requirements it has.
2. Therefore, it is necessary to carry out modular analysis, to concretize these things, to modularize a problem, and to have a macro understanding of the requirements.
3. After you have the concept of a module, subdivide the module into smaller modules, and then defeat them one by one.
The bad effects of not doing module analysis:
If you don’t do module analysis, you will do whatever you want as soon as you get started. It is easy to blind your eyes and fail to see the whole picture. You will find that you are doing it. It got out of control. Because there are contradictions in some places, you will find that the cost of modification is very high, so it is better to tear down and rewrite.
It is easy for newbies to focus on details, and they should not start with details first.
2. Overall analysis
First do a page analysis:
1. The body only contains page-wrapper and menu;
2.page-wrapper contains a header, a footer and five sections: banner, one, two, three, cta.
3. Component analysis
1. There is an h1 and nav under the header
2. It is best for a page to have only one h1, and the nav contains An ul contains li, and li contains a. Currently, there is only one a tag, but for future scalability, it still needs to be written in such a flexible way.
3. The banner contains inner, and the scroll-down button a; the inner contains p, ul, li, and a buttons;
4. There is an inner div under one to constrain the content width so that the content does not overflow. There is a header under the div, and three pictures of the same level under the ul
5. There are 3 sections under the two, and each section has an image and a content area
6. There is an inner div under three, and there is a header and 6 divs in the div
7.cta is no different from the above
8. There are 2 spans under footer