Ответ 1
В самом низу их сайт у них есть несколько ссылок на учебные пособия.
Я думаю, вы найдете этот Nettuts + один в игре с 960.
Я хочу использовать сетку 960 для создания макета для моего сайта. Я загрузил версию с 24 колонками из пользовательского генератора со своего сайта.
Теперь я хочу знать каждую маленькую вещь, которую я могу с ней сделать. Я просмотрел файл css и нашел некоторые имена классов, такие как .suffix_x.prefix_x.push_x.pull_x.clear.clear_fix etc
Где я могу найти учебник, объясняющий все это? Как сделать левый, главный div и т.д.
Странно, что он не учит вас, как реально использовать сетчатую систему на своей веб-странице. И я не мог найти ХОРОШЕГО учебника, объясняющего все на google.
Было бы здорово, если бы кто-то мог рекомендовать такие обучающие программы.
Если некоторые из вас использовали сетку с жидкостной сеткой 960, это было бы здорово со ссылками на хорошие учебные пособия.
В самом низу их сайт у них есть несколько ссылок на учебные пособия.
Я думаю, вы найдете этот Nettuts + один в игре с 960.
Взгляните на:
http://www.myinkblog.com/2009/02/24/design-a-fresh-blog-theme-on-the-960-grid/
Это дает хороший обзор использования сетки 960 и применения ее шаг за шагом.
Я просто смотрел этот сегодня, и это было очень полезно. Это в виде видео:
http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-framework/
Он даже учит непредвиденным обстоятельствам, если вы хотите добавить дополнение.
Я думаю, что лучший, который я нашел, это:
http://net.tutsplus.com/tutorials/html-css-techniques/mastering-the-960-grid-system/
Он подробно показывает вам каждую из функций 960.
Чистая статья 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 расположены противоположным образом?