CSS framework 960Grid from getting started to mastering skyrocketing rise

Gossip less, nonsense not to say, straight into the topic:

1. What is CSS framework? A CSS framework is a collection of CSS definitions that you can use conceptually in your Web projects, that are already written by others, and that are well-established. CSS framework is generally a collection of CSS files, including basic style of font layout, form style, table layout and so on, such as: * grid.css Table layout * layout.css layout * FORM.CSS form * General.css CSS General Set up 2. CSS Framework types:CSS frame A lot, can say too much, in recent years like the tide gush. Only the domestic use of CSS framework is not much, but the PHP framework and the spring framework with more.            The more famous CSS frameworks are as follows, the tasks performed by different frameworks are not necessarily identical, each frame has its own features: YUI Grids CSS Blueprint YAML CSS Framework Clevercss and so on ... 3, 960GridBecause of the computer display screen, widescreen, widescreen is divided into 16:9 and 16:10. Resolution is a variety of, so many different modes of how users can see the appearance of a neat, consistent site? People find a wonderful thing: the width of the 960px is very good!        No matter what screen, that resolution is all-in-one.        Now someone has developed a set of Web site architecture CSS rules, as long as you follow these simple rules (in fact, the Class), you can quickly design a 960px width of the page structure.        This is the 960Grid. Official website: http://960.gs/ 4. Legal Issues960 grid system files are free, MIT/GPL open Source license agreement. We can use it with confidence. 5. How to use 960Grid frame? (1) Introduce the relevant external CSS file in the HTML file:

1. <link rel= "stylesheet" href= "Css/reset.css"/>
2. <link rel= "stylesheet" href= "Css/text.css"/>
3. <link rel= "stylesheet" href= "Css/960.css"/>

In this it must be explained that the 960.CSS is the main typesetting style, missing it certainly not. There are also two CSS files: reset.css and Text.css, whose main purpose is to eliminate the differences between browsers, which eliminates the difference between HTML tags and the browser, while the latter is primarily for fonts. (2) Define a div large container and drop the entire page:

1. <div class= "Container_12" >
2. </div>

This div block must be set to 12 or 16 columns, in fact, whether 12 column or 16 column width is 960px, just see you need not more subdivision of the column. (3) In this div large container to start the layout of the page, first add a logo bar, this column across the entire 960 width:

1. <div class= "Container_12" >
2. <div class= "Grid_12" ></div>
3. </div>

At this point, notice that in the 12 column of container, a grid of 12 columns is used,Number is the number of columns that the DIV occupies after underlining。 Of course, for the sake of layout convenience, we will definitely add more class or ID, and finally the following:

1. <div class= "Container_12" >
2. <div class= "Grid_12 logo" ></div>
3. </div>

Set the. Logo CSS high and background images, you can see the interface as shown: (4) Set the navigation bar just now the logo block is actually finished, but in order to clear its effect on the CSS settings behind it,It is recommended that after each horizontal div chunk is finished, add class= "clear" to finish the finishing。 So the code just now changes as follows:

1. <div class= "Container_12" >
2. <div class= "Grid_12" ></div>
3. <div class= "Clear" ></div>
4. </div>

Then add the navigation bar div block, and the same logo, is also a horizontal chunk, set the following code:

1. <div class= "Container_12" >
2. <div class= "Grid_12 logo" ></div>
3. <div class= "Clear" ></div>
4. <div class= "Grid_12 nav" >
5. <ul>...</ul>
6. </div>
7. <div class= "Clear" ></div>
8. </div>

    Add a style, the page becomes this:  (5) Add photoslide location     General website in order to be beautiful and eye-catching, will be added in the Nav photoslide, some JS, some flash, But no matter what kind of website can be set up. Of course, the example is not really put photoslide. Now to divide the rampage into two parts: left and Right,left write the text, right put a picture to lift the spirits.     As the original case, left will occupy the width of 7 columns, right will occupy the width of 5 columns, 7+5=12 column! So one class with Grid_7, the other with Gird_5. Then add the clear class directly behind the block. Since these two blocks are highly consistent and have a consistent border, they are joined by a Topslider class to set their common characteristics.     Now write the code well:

1. <div class= "Container_12" >
2. <div class= "Grid_12 logo" ></div>
3. <div class= "Clear" ></div>
4. <div class= "Grid_12 nav" >
5. <ul>...</ul>
6. </div>
7. <div class= "Clear" ></div>
9. <div class= "Grid_7 topslider" ></div>
10. <div class= "Grid_5 topslider" ></div>
11. <div class= "Clear" ></div>
12. </div>

Fill in other HTML tags and various footage, as shown in the following: (6) Complete the next codeTwo sections of Grid_12, named class= "Spacer", are used to clamp four articles and four articles are completed using four grid_3 respectively. Why is it four grid_3? Transverse 12 columns, 4 articles of equal width, each article 12/4=3! If you have this question by now, you don't really understand the principle of 960grid.    It is recommended to return to the top of the page and see. After adding a lot of code:

2. <div class= "Container_12" >
4. <div class= "Grid_12 logo" ></div>
6. <div class= "Clear" ></div>
8. <div class= "Grid_12 nav" >
10. <ul>...</ul>
12. </div>
14. <div class= "Clear" ></div>
18. <div class= "Grid_7 topslider" ></div>
20. <div class= "Grid_5 topslider" ></div>
22. <div class= "Clear" ></div>
24. <div class= "Grid_12 spacer" ></div>
26. <div class= "Clear" ></div>
30. <div class= "Grid_3" ></div>
32. <div class= "Grid_3" ></div>
34. <div class= "Grid_3" ></div>
36. <div class= "Grid_3" ></div>
40. <div class= "Clear" ></div>
44. <div class= "Grid_12 spacer" ></div>
46. <div class= "Clear" ></div>
50. <div class= "Grid_4 footer" ></div>
52. <div class= "Grid_4 footer" ></div>
54. <div class= "Grid_4 footer" ></div>
56. </div>

Then add the content, set up CSS, this is the page: So far, can understand the 960Grid principle to achieve the purpose. The next step is the Advanced Content section of this framework. Advanced section: (1) Alpha and Omega parametersBy default, the left and right margin are 10px, the column spacing is 20px, but the leftmost container does not need the left margin, the rightmost container does not need the right margin, so to change to this, with Alpha out left Margin,omega to remove the right margin:

1. <div class= "container_12″>
2. <div class= "Grid_2 Alpha" > left navigation bar </div>
3. <div class= "grid_8″> main section </div>
4. <div class= "Grid_2 Omega" > Right banner </div>
5. </div>

(2) prefix and suffix parametersAs with the two margin shortcuts above, it is not necessary to individually name the ID for a DIV or class,960grid has provided prefix and suffix to handle padding. The left padding (padding-left) is prefix_i, and the right side is suffix_i. The value of I is the number of columns that the filler occupies, such as if you want to add 2 columns to the left, you can use:

1. <div class= "Grid_5 prefix_2" ></div>

How simple. (3) Push and Pull parametersThe most absolute is the two parameters, the average person does not use much. Because everyone is satisfied with their web page width is 960px, if you really want to put one of the pictures or ads in the div to do 1024px wide, how to do?    In fact, a good solution, a div do reletive, its sub-div for the absolue and left for negative values, but this CSS a bit troublesome. The 960Grid provides the push and pull parameters, push is push, pulling is pulled. The key is where to push and pull, that is, where is the beginning of the action? We look at the page almost from left to right, so the action also starts with the left, and now imagine you're on the far left.    Push_i is to put a block to the right of the I column width, pull_i is to put this block to Zola I column width. Push and pull actions have no effect on other sibling blocks. Can be directly launched 960px go it is on the right side of the page alone display, you can pull out, on the left alone display. It's a bit like the Sohu side AD. The last picture, intuitively feel it, but Sohu is not made with push and pull, I mean the same effect as Sohu.   (4) Clear parameterClass= "Clear", when to use it. Use it when you want to change the line, even if a row is only Grid_5 and grid_4, which means that there are no more than 12 columns, you can add a later one so that everything behind it starts at the beginning of the next line:

1. <div class= "Clear" ></div>

If you encounter this situation:

1. <div class= "Grid_4" ></div>
2. <div class= "Grid_5" ></div>
4. <div class= "Clear" ></div>
6. <div class= "Grid_3" ></div>

The 4+5+3, which originally had a horizontal total of 12 columns, was clipped in the middle. What's going to happen? Grid_3 this block will appear on the leftmost side of the next rampage. So clear is a carriage return, equivalent to a block of <br/>. well summed up below: A, the margin parameter is Alpha and Omega; B, padding parameters are prefix and suffix; C, the moving parameters of the out-of-document flow are push and pull; D, Clear is the block carriage return line. Just write it down here. Five mountains the top of the original, reproduced please indicate the source.

CSS framework 960Grid from getting started to mastering skyrocketing rise