Опубликовано: 12.05.2011 Последняя правка: 16.12.2015

Примеры HTML и CSS

Примеры HTML и CSSВ этом разделе сайта вы найдете реальные примеры HTML и CSS, которые используют многие профессиональные (и не только) верстальщики при создании сайтов. Раздел очень молодой, поэтому примеров пока немного, но их постоянное добавление гарантировано, поэтому периодически сюда заглядывайте.

Если вы действительно начинающий верстальщик и только недавно освоили HTML и CSS, то возможно вы спросите: «А зачем нужны эти примеры, если я уже и так знаю необходимые для верстки языки, в конце концов, есть справочники»? Сейчас объясню. Понимаете, верстка страниц сайта — это почти всегда своеобразный ребус или головоломка, если хотите, которую приходится решать, добиваясь нужного отображения HTML-страниц.

Для сравнения можно привести ту же математику. Допустим, вы неплохо знаете различные уравнения, функции, константы и т.д., которые используются в этой науке, но когда вам дают какую-то задачку — вы должны «собрать в кучу» все свои знания, чтобы ее решить. Но и этого бывает мало, часто приходится подключать свою логику, эрудицию и, даже, интуицию. Так вот в верстке происходит то же самое, только здесь роль функций играют HTML-теги и все, что находится в справочнике по CSS. И тут даже неважно, являетесь ли вы новичком или уже «прожженным профессионалом», тут вопрос в другом — если вы уже когда-то сталкивались с возникшей проблемой, то легко сможете ее решить, если нет — будете искать выход сами или обратитесь за помощью.

Те примеры верстки с использованием HTML и CSS, которые вы здесь найдете — это уже просто готовые решения, которые вы сможете применить в создании своего сайта. Также на основе этих примеров можно придумать что-то свое, позаимствовав основную идею.

Подразделы

Общая верстка
Универсальные примеры верстки, которые можно применить к абсолютно разным HTML-элементам страницы для получения необходимого результата. Если вы новичек, то советую вам начать именно с этого подраздела, так как описанные в нем примеры будут в той или иной степени использоваться в остальных подразделах.
CSS хаки для браузеров
Что такое CSS хаки для браузеров и условные комментарии для IE, как они указываются, для чего применяются в верстке, примеры их использования.
Макеты сайтов
Примеры резиновых и фиксированных макетов сайтов с разным количеством колонок и разными подходами к реализации верстки. А также способы, позволяющие прижать футер к низу страницы и сделать колонки одинаковой высоты.
Навигация
Примеры создания навигации на сайте, а также изменения внешнего вида ссылок (блочные, с закругленными углами, с различным фоном и т.д.).