Question

我想使用960网格系统为我的网站生成布局。我从他们的网站上下载了自定义生成器的24列流体版本。

现在我想知道我能用它做的每一件小事。我查看了css文件，发现了一些类名，如.suffix_x .prefix_x .push_x .pull_x .clear .clear_fix等

我在哪里可以找到解释所有这些的教程？如何制作左栏，主div等。

很奇怪它没有教你如何在他们的网页上实际使用网格系统。而且我找不到一个好的教程来解释google上的所有内容。

如果有人可以推荐这样的教程，那将会很棒。

如果你们中的一些人使用过960流体网格系统，那么链接到好的教程也会很棒。

Answer 1

在their site的最底部，他们有一些指向教程的链接。

我认为在使用960时你会发现this Nettuts+ one的价值。

Answer 2

看看：

http://www.myinkblog.com/2009/02/24/design-a-fresh-blog-theme-on-the-960-grid/

这给出了使用960网格系统并逐步应用它的概述。

Answer 3

我今天刚看了这个，这非常有帮助。这是视频形式：

http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-framework/

如果您想添加填充，他甚至会教授意外情况。

Answer 4

我认为我找到的最好的是： http://net.tutsplus.com/tutorials/html-css-techniques/mastering-the-960-grid-system/

它详细显示了960的每个功能。

Answer 5

净tut文章非常好，但我还有一些分享。学习Grid960对我来说非常痛苦。其中大部分都是重申网络文章。这为新手提供了直觉，因为它很头疼：

<强>概要

报纸和杂志使用网格系统，中间设有排水沟，当您使用设计技术时，它使页面看起来更加悦目。网格将完美引导您。在开始之前，您必须了解CSS / HTML嵌套。

<div class="a">
I include all the items A.
<div class="b">
    I include all the items of B with all of A.
</div>
<div class="c">
    I include all the items of C with all of A. B is not here, but it is on the same level.
    <div class="d">
        I include all the items of A with C and D
    </div>
</div>

查看示例文件，了解如何将设计划分为网格。

在Chrome + IE + Firefox中按F12使用检查员（感谢Larry！）。突出显示框以查看如何编辑css。我发现直接深入了解Grid960的css文件非常困难。您将看到每个网格的创建方式

将12大小的网格声明为父div。子女div必须加起来12，你可以任意方式分解页面。示例：3格+ 3格+ 6格= 12格。 3格+ 4格+ 4格+ 1格= 12格。如果您在Chrome中使用F12，则可以看到此内容。突出显示示例文件中的网格。当你完成一行并想要开始一个新行时，不要忘记添加div清除。

<div class="container_12">
<div class="grid_12"><a href="images/header.png" alt=""></a></div>
<div class="clear"></div>


<div class="grid_12" id="navbar">A</div>
<div class="clear"> </div>

<div class="grid_7">B</div>

<div class="grid_5">C</div>
<div class="clear"></div>

<div class="grid_12 spacer">D</div>
<div class="clear"></div>


<div class="grid_3">E</div>
<div class="grid_3">F</div>
<div class="grid_3">G</div>
<div class="grid_3">H</div>

<div class="clear"></div>

<div class="grid_12 spacer">I</div>
<div class="clear"></div>

<div class="grid_4">J</div>

<div class="grid_4">K</div>
<div class="grid_4">L</div>

</div>

后缀和前缀：

假设你希望你的网格从中间开始。仅仅声明网格3是不够的。你需要给它一个额外的信息，说明我希望它能够浮动。＆＃34;这是后缀和前缀的来源。前缀表示跳过x个div，后缀表示跳过后面的x个div。

来自净投注

Alpha和Omega：

如果我想应用一种风格并让它覆盖多个网格，包括排水沟空间。 Alpha是第一个，而omega是它应用的最后一个div。

来自网络

推拉

这是给拉里的！推拉是针对想要重新排列SEO页面的开发人员。

http://www.clubosc.com/960-grid-tutorial-understanding-push-and-pull-classes.html

注意粉红色和黄色类是如何反转的，但div是以相反的方式排列的？

960网格布局的好教程？

5 个答案: