Типовые макеты веб-страниц

Здесь представлены типовые макеты веб-страниц. Каждый макет включает основные разделы веб-сайта: верхний колонтитул (header), нижний колонтитул (footer), навигационное меню (navigation menu), основная часть (main content area) и дополнительная информация (additional stuff).

Практически все макеты сверстаны с использованием CSS свойств property и margin с отрицательными значениями. Использование отрицательных отступов открывает широкие возможности и позволяет сделать верстку более универсальной.

В современных веб-сайтах плавающие макеты заменяются гибкими макетами, которые создаются с помощью модуля CSS Flexible Box Layout Module.

Чтобы посмотреть как сверстан макет, щелкните по желаемому варианту.

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