960gridcssweb框架

因为&＃xff1a;

960px&＃61;12(60pz&＃43;20px)&＃61;16x(40px&＃43;20px)&＃61;24(30px&＃43;10px)

所以&＃xff1a;

960个像素作12栏 16栏 24栏分割

12栏和16栏分割的每个grid左右margin各10px&＃xff0c;24栏分割每个grid左右margin各5px。

几个重要的关键字和概念

1.container容器&＃xff1a;960px的宽度&＃xff0c;左右margin auto 居中。

2.grid_x x方格&＃xff1a;最小方格宽度*x px宽度&＃43;左margin 10px&＃43;右margin 10px&＃xff08;24栏布局分别为5px&＃xff09;

3.prefix_x前间距&＃xff1a;使用padding属性。让grid和前面保持&＃xff08;最小方格宽度&＃43;间距&＃xff09;*x的距离.(例如 12栏的 prefix_3 的前间距为 &＃xff08;60px&＃43;20px&＃xff09;*3 即向前隔开三个方格的距离 )。

4.suffix_x 后间距&＃xff1a;同理prefix_x,向后隔开x个方格。

5.pull_x 向左推&＃xff1a;在正常的布局下向左推x个方格。

6.push_x 向右推&＃xff1a;在正常的布局下向右推x个方格。

7.alpha 清除前间距&＃xff1a;清除使用该class方格的前间距&＃xff0c;方格会自动全部向前。

8.omega 清楚后间距&＃xff1a;清除使用该class方格的后间距。

7.clear 换行&＃xff08;或者这样说有不妥&＃xff09;&＃xff1a;重新换行继续方格布局。

心得&＃xff1a;container 容器一定要外包在所有的grid布局的外面。它就像一页纸一样&＃xff0c;我们可以在内部写方格。grid_x控制方格的宽度&＃xff0c;prefix_x suffix_x控制方格间距&＃xff0c;pull_x push_x控制方格左右浮动&＃xff0c;alpha omega 清除左右的margin。clear 换行。

所以呢&＃xff0c;可以理解为就是类似于在container内用方格写字就好啦&＃xff01;