HTML-шаблоны макетов

Вот подборка HTML-шаблонов, предлагающих базовые макеты веб-сайтов.

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

• шапка

• подвал

• навигационное меню

• основная область содержимого

• дополнительные элементы

• Две колонки, левое меню (шаблон 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)

Почти все макеты создаются с помощью свойства CSS float и отрицательных отступов. При работе с отрицательными отступами у плавающих элементов помните: применение отрицательного отступа со стороны float сдвигает элемент дальше в этом направлении, а применение его с противоположной стороны создаёт зазор, из-за которого соседний контент может накладываться. Например, <div style="float: left; margin-right: -100%;"> прижимает следующий плавающий элемент вплотную рядом с ним. Этот эффект наложения часто используется для создания жидких макетов.

В современной веб-разработке макеты на основе float в значительной степени заменены CSS Flexbox и CSS Grid, которые обеспечивают более надёжное и адаптивное управление макетом. Сейчас float в основном используется для обтекания текста вокруг изображений.

Настройка шаблонов

Здесь вы найдёте несколько способов настроить ваш HTML-шаблон:

• Добавить графику или изображения в структуру шаблона.
• Изменить HTML-структуру или заменить содержимое-заполнитель.
• Изучить HTML с нашим учебником по HTML.
• Узнать, как менять стили шаблона, с нашим учебником по CSS.
• Узнать, как сделать шаблоны интерактивными, с нашим учебником по JavaScript.

Practice

What are the key elements in an HTML layout template?

HeaderNavigation BarContent SectionSidebarFooterBackground Image