Shulou(Shulou.com)06/03 Report--

This article mainly introduces the basic principles of 960 Grid System, the article is very detailed, has a certain reference value, interested friends must read it!

Basic principles of 960 Grid System

Do not edit 960.css

Do not edit the 960.css file. If you modify it, you will not be able to update the framework in the future.

Read the grid

Before we can use the CSS code from an external file, we first need to call them in our HTML file. Call like this:

When we have called them, we will call our own CSS file. For example, you might name your CSS file style.css or site.css or something. Call it like this:

Containers (container)

In the 960 framework, you can choose two types of containers named .container _ 12 and .container _ 16. Both containers are the width of 960px (that's why they're called 960 grid), but they differ in that they contain a different number of columns. As the name implies, containers for .container _ 12 are divided into 12 columns, while .container _ 16 is divided into 16 columns. Both 960px-wide containers are centered horizontally.

Grids (grid) / Columns (column)

You can choose many different combinations of column widths, but there are differences between the two containers. You can learn about these widths by opening 960.css, but this is not necessary for designing a website. Here is a useful technique to make it easier for you to use the framework.

For example, if you want to use only two columns (main content area / sidebar) in your container, you can do this:

Sidebar

Main content

Advertisement

As you can see, the system works very well. If you try to use your browser to read his words, you will find something wrong. But it doesn't matter, that's what we're going to talk about next.

Margins

By default, there is some margin between each column. Each grid_ (where numerical values are inserted) class has 10px's left margin and right margin. That is, the margin value between the two columns is 20px.

20px's margin keeps the layout as blank as it should be and looks smoother, which is one of the reasons I like the 960 grid System.

In the above example, we had some problems reading it using the browser, and now let's fix it.

The problem is that each column contains the left margin and the right margin, but the leftmost column should not have the left margin and the rightmost column should not have the right margin. Here is the solution:

Main content

Sidebar

Photo's

Advertisement

Because CSS uses the form of priority to determine how to interpret the style, id has a higher priority than class. This allows us to create personalized styles with id selectors in our stand-alone CSS file. If you happen to have the same style attributes as 960 but different values, the browser will give priority to the styles in your CSS file.

These are all the contents of this article entitled "what are the basic principles of 960 Grid System?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.