Advanced Tutorial: portal website construction CSS framework rules

For large portals, massive information platforms, multi-module and multi-regional websites, more CSS, XHTML standardization, HTML framework conforming to semantics, and highly reusable CSS code are required, only in this way can your website be guaranteed and have a good "Foundation ".

Part 1: the purpose of building a CSS framework:

1. Achieve Standardization and frontend implementation that is adaptive to mainstream platforms;
2. Quick Development. After the site style is determined, the front-end should not be the bottleneck of the entire project;
3. refactoring needs to make the class and block style reusable as much as possible;
4. Separation of structures and performance requirements, and compliance with the semantic structure conventions;
5. The architecture is a CSS framework that fully complies with the characteristics of the financial network.
6. Perform necessary search engine optimization on the code.

Part 2: Conventions on CSS naming:

1. Class names and id names in upper case are not used;
2. Try to use a combination of descriptive English words as the class name and id name;
3. Separate multiple English words of the id and class names with a hyphen;
4. Describe by region. Example: main01_div01_ul01 (it can be understood as the first UL under the first DIV in the first region of the subject)

Next, we will analyze the entire website and design draft to develop a CSS framework that conforms to the characteristics of the portal structure.

We have released Sina as an example:

Perform site structure analysis:

The entire page is divided into: Home Page, more pages, content page, Topic Page, data center, News Center, channel page, advertisement ......

We organized these pages to find out their public parts, where they were discovered: CSS styles, areas, module fragments, what we need to do is to put forward these public parts.

After observation, we can divide CSS into the following categories:

Body style sheet: sjweb.css
Font (Set of font styles, font sizes, and colors)
Layout (framework structure set)
Global (global default style set)
Component)
In this section, the system is importto the sjweb.css main style table. The main style table is used as a loader to load new external styles,
For example, an advertisement style sheet.
In this way, you only need to write a little bit of CSS style code that meets your special requirements.

It is best to unify many details when building this CSS framework, such as row spacing and inter-module distance.

The following figure shows the Home Page Structure of a portal network:

 

Rules:
1. the spacing between all areas and modules is 8 Pixel;
2. News list color #333;
3. News list line spacing: 20 pixel;
...... And so on.

Adjust the environment: IE7, ff, IE6, IE5.x, and Opera.

PS: in fact, it is more about the details of your build. Haha