Что такое хороший онлайн-ресурс для css 'шаблоны проектирования'? [закрыто]

Question

Кто-нибудь может порекомендовать хороший онлайн-ресурс для CSS «шаблонов дизайна»?

Я знаю, что шаблоны проектирования в контексте программного обеспечения обычно относятся к шаблонам проектирования на основе ОО, но я имею в виду шаблоны проектирования в более широком смысле этого термина: то есть общие, чистые решения общих проблем / задач.

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

Другими примерами распространенных проблем, которые могут иметь хорошие решения для множества, могут быть такие, как закругленные углы на элементах div, удобные макеты форм и т. д.

Answer 1

Я постоянно обращаюсь к статьям List Apart , посвященным подобным вещам. Они проводят множество исследований методом проб и ошибок, чтобы придумать действительно креативные способы решения этих распространенных проблем CSS самым чистым и переносимым способом.

Answer 2

Некоторые веб-сайты, использующие шаблоны веб-дизайна, перечислены ниже . Они специально не предоставляют HTML и / или CSS для достижения желаемых результатов, но они предоставляют примеры живых сайтов, на которых вы можете просматривать исходные тексты (или, что еще лучше, использовать Firebug ).

Шаблоны пользовательского интерфейса

Это, наверное, лучший из всех. Он разбивает вещи на категории, которые охватывают широкий круг задач веб-дизайна. Вы найдете такие категории, как облака тегов, предварительный просмотр в реальном времени и регистрация пользователей среди многих других. Это действительно всеобъемлющий ресурс, который хорошо организован. Он объясняет каждый шаблон и предоставляет множество примеров.

Коснитесь шаблона

Аналогичен шаблонам пользовательского интерфейса, хотя в настоящее время он не такой всеобъемлющий Он использует более социальный подход к сопоставлению шаблонов проектирования, позволяя пользователям создавать свои собственные категории (" пользовательские наборы ") и заполнять их собственным выбором сайтов.

Библиотека шаблонов дизайна Yahoo

В отличие от двух других, этот пример не дает много примеров реальных сайтов. Он хорошо организован и довольно всеобъемлющий.

Элементы дизайна

Это блог, демонстрирующий различные элементы веб-дизайна. Здесь не обсуждаются шаблоны, но это хороший источник вдохновения или способ начать собственный анализ.

Answer 3

Floatutorial - отличная отправная точка для изучения важного атрибута CSS " float " ; и как использовать его для разметки контента с использованием некоторых общих шаблонов, включая двухколонные и трехколонные жидкостные макеты.

  

Floatutorial проведет вас через   основы плавающих элементов, таких как   изображения, буквицы, вперед и назад   кнопки, галереи изображений, встроенные списки   и многоколоночные макеты.

Answer 4

Уже упоминавшийся Список отдельно действительно хорош. Еще один сайт, который я использовал с тех пор, как начал заниматься веб-разработкой, - SitePoint.com. Вот их Справочник по CSS . Если вы хотите хорошую книгу по CSS, это одна из моих любимых.

Answer 5

Ближайшая вещь к «шаблону дизайна» в CSS распространены макеты. Лучшим инструментом для использования преимуществ общих макетов, ширины столбцов и т. Д. Является система координат 960 , по адресу 960.gs

Посмотрите эту заставку для краткого вступления. Это экономит массу времени и помогает применять все распространенные шаблоны макета с минимальным кодом:

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

Все, что вам нужно сделать, - это применить правильные классы и сделать небольшую арифметику, чтобы убедиться, что все ширины столбцов складываются.

Одна книга, которую я рекомендую больше всего для CSS - это Мастерство CSS Энди Бадда ( cssmastery.com ). Это немного мало, но это помогло мне больше, чем любая другая книга по CSS.