Примеры блочной верстки - коллекция из 40 CSS макетов

Данная коллекция представляет собой набор из 40 CSS макетов сверстанных с применением отрицательных отступов блоков с резиновой и фиксированной шириной.

Основной особенностью данных примеров блочной верстки является то, что все они сверстаны с применением одних и тех же стилей и разметки. Данные заготовки могут пригодится при создании шаблонов для различных CMS. Когда мне необходимо сверстать новую тему или шаблон для той или иной CMS я беру за основу один из представленных шаблонов и на основании его продолжаю верстать необходимые мне элементы.

Каждый макет состоит из пяти блоков: заголовок, содержимое, навигация, блок для какой либо информации и нижнего колонтитула и обоадают полной кросс-браузерностью. Общая разметка для всех макетов выглядит так:

<div id="container">
<div id="header">Header</div>
<div id="wrapper">
<div id="content">Content</div>
</div>
<div id="navigation">Navigation</div>
<div id="extra">Extra stuff</div>
<div id="footer">Footer</div>
</div> 

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

Три колонки резиновой процентной ширины (N.01) Демо Скачать	Три колонки резиновой процентной ширины (N.02) Демо Скачать	Три колонки резиновой процентной ширины (N.03) Демо Скачать	Три колонки резиновой процентной ширины (N.04) Демо Скачать
Три колонки резиновой процентной ширины (N.05) Демо Скачать	Три колонки резиновой процентной ширины (N.06) Демо Скачать	Три колонки фиксированной ширины (N.07) Демо Скачать	Три колонки фиксированной ширины (N.08) Демо Скачать
Три колонки фиксированной ширины (N.09) Демо Скачать	Три колонки фиксированной ширины (N.10) Демо Скачать	Три колонки фиксированной ширины (N.11) Демо Скачать	Три колонки фиксированной ширины (N.12) Демо Скачать
Резиновый, две колонки фиксированной ширины (N.13) Демо Скачать	Резиновый, две колонки фиксированной ширины (N.14) Демо Скачать	Резиновый, две колонки фиксированной ширины (N.15) Демо Скачать	Резиновый, две колонки фиксированной ширины (N.16) Демо Скачать
Резиновый, две колонки фиксированной ширины (N.17) Демо Скачать	Резиновый, две колонки фиксированной ширины (N.18) Демо Скачать	Резиновый, одна колонка фиксированной ширины (N.19) Демо Скачать	Резиновый, одна колонка фиксированной ширины (N.20) Демо Скачать
Резиновый, одна колонка фиксированной ширины (N.21) Демо Скачать	Резиновый, одна колонка фиксированной ширины (N.22) Демо Скачать	Резиновый, две колонки фиксированной ширины (N.23) Демо Скачать	Резиновый, две колонки фиксированной ширины (N.24) Демо Скачать
Резиновый, две колонки процентной ширины (N.25) Демо Скачать	Резиновый, две колонки процентной ширины (N.26) Демо Скачать	Резиновый, одна колонка на всю ширину и две процентные (N.27) Демо Скачать	Резиновый, одна колонка на всю ширину и две процентные (N.28) Демо Скачать
Резиновый, одна колонка на всю ширину и две процентные (N.29) Демо Скачать	Резиновый, одна колонка на всю ширину и две процентные (N.30) Демо Скачать	Две колонки резиновые, одна на всю ширину и одна фиксированная (N.31) Демо Скачать	Две колонки резиновые, одна на всю ширину и одна фиксированная (N.32) Демо Скачать
Три колонки фиксированной ширины (N.33) Демо Скачать	Три колонки фиксированной ширины (N.34) Демо Скачать	Три колонки фиксированной ширины (N.35) Демо Скачать	Три колонки фиксированной ширины (N.36) Демо Скачать
Три колонки фиксированной ширины (N.37) Демо Скачать	Три колонки фиксированной ширины (N.38) Демо Скачать	Фиксированный одна колонка на всю ширину и две на половину (N.39) Демо Скачать	Фиксированный одна колонка на всю ширину и две на половину (N.40) Демо Скачать

• 24 CSS заготовки навигации по страницам сайта
• Горизонтальное CSS меню – подборка из 4 заготовок
• 30 горизонтальных меню для сайта