Хорошие учебные пособия для компоновки сетки 960?

Я хочу использовать сетку 960 для создания макета для моего сайта. Я загрузил версию с 24 колонками из пользовательского генератора со своего сайта.

Теперь я хочу знать каждую маленькую вещь, которую я могу с ней сделать. Я просмотрел файл css и нашел некоторые имена классов, такие как .suffix_x.prefix_x.push_x.pull_x.clear.clear_fix etc

Где я могу найти учебник, объясняющий все это? Как сделать левый, главный div и т.д.

Странно, что он не учит вас, как реально использовать сетчатую систему на своей веб-странице. И я не мог найти ХОРОШЕГО учебника, объясняющего все на google.

Было бы здорово, если бы кто-то мог рекомендовать такие обучающие программы.

Если некоторые из вас использовали сетку с жидкостной сеткой 960, это было бы здорово со ссылками на хорошие учебные пособия.

Ответы

Ответ 1

В самом низу их сайт у них есть несколько ссылок на учебные пособия.

Я думаю, вы найдете этот Nettuts + один в игре с 960.

Ответ 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>

Посмотрите пример файла, чтобы увидеть, как вы можете разбить свой дизайн на сетку.

Используйте инспектор, нажав F12 в Chrome + IE + Firefox (спасибо Ларри!). Выделите поля, чтобы увидеть, как отредактирован css. Мне очень трудно погрузиться прямо в файлы css Grid960. Вы увидите, как создается каждая сетка.

Объявите сетку размером 12 в качестве родительского div. В дочерних divs должно быть до 12, и вы можете разбить страницу так, как хотите. Пример: 3 сетки + 3 сетки + 6 сетки = 12 сетки. 3 сетки + 4 сетки + 4 сетки + 1 сетка = 12 сетки. Это можно увидеть, если вы используете F12 в Chrome. Выделите сетку в файле примера. Не забудьте добавить div clear, когда закончите с строкой, и хотите начать новый.

<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 самостоятельно. Вам нужно предоставить дополнительную информацию о том, что я хочу, чтобы она "плавала". В этом случае присутствуют суффикс и префикс. Префикс означает пропустить x количество делений и суффиксных средств, чтобы пропустить x количество div после него.

От сетевых отключений

Альфа и Омега:

Если я хочу применить стиль и охватить его несколькими сетками, включая пространство желоба. Альфа - первая, а омега - последний div, к которой она применяется.

От сетевых отключений

Push и Pull

Это для Ларри! Push и pull для разработчиков, желающих перестроить там страницы для SEO.

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

Обратите внимание, что розовые и желтые классы меняются на противоположные, однако divs расположены противоположным образом?