CSS Flattening Blog Learning Summary (a) module analysis

One, module analysis

1. Before you develop a project, start with a rough plan of the project, what it does, and what its specific needs are.

2. So the need for a modular analysis, these things to image, the problem of a modular, a macro understanding of the needs.

3. With a module concept, the module is subdivided into smaller modules and then broken down.

No adverse effects of module analysis:

Do not do module analysis, a start to think where to do where, it is easy to blinders, can not see the whole picture, you will find that doing is out of control. Because there are contradictions in some places, you will find that the cost to modify is very high, rather than to overturn the rewrite.

Beginners are easy to focus on the details and should not start with the details first.

Second, the overall analysis

First do a page analysis:

Only Page-wrapper and menu are included under 1.body;

2.page-wrapper contains a header, a footer and five Section:banner, one, two, three, Cta.

Three, component analysis

Under 1.header, there is a H1, Nav

2. A page preferably only a h1,nav under a ul,ul containing a li,li, there is only one a tag, but in order to later extensibility, or so flexible to write.

3.banner with inner, and scroll down button a;inner including P,ul, Li, a button;

4.one has a inner div, in order to constrain the width of the content, so that the content does not overflow. Div below has a header, a UL under three sibling images Li

There are 3 sections under 5.two, one image and one content area under each section

6.three has a inner div,div with a header, 6 div

7.cta is no different from the above

2 spans under 8.footer

CSS Flattening Blog Learning Summary (a) module analysis