Примеры поточной вёрстки

Поточная вёрстка — это способ компоновки элементов, когда на веб-странице элементы располагаются в том же порядке, что и в коде HTML. Этот метод вёрстки в силу своей простоты применяется к ограниченному типу макетов, где элементы идут друг за другом сверху вниз и слева направо.

На рис. 1 показан пример карточки с вертикальным расположением текста.

Рис. 1. Карточка

Прежде чем приступить к самой вёрстке, эту картинку следует сперва проанализировать и понять, из каких блоков она состоит. Затем произвести деление на эти блоки. Здесь нет чётких правил, поэтому можно придерживаться разных подходов. Вот некоторые из них.

1. Применяются крупные блоки, содержащие в себе блоки поменьше. На рис. 2 такие блоки схематично обозначены красной рамкой.

Рис. 2. Деление карточки на крупные блоки

Всего у нас здесь три блока, для каждого из них в HTML используем блочный элемент <div> с каким-нибудь классом.

<div class="card">
  <div class="card-price">…</div>
  <div class="card-plan">…</div>
  <div class="card-offer">…</div>
</div>

2. Каждая строка считается самостоятельным блоком (рис. 3), при этом она не содержит вложений.

Рис. 3. Деление карточки на мелкие блоки

Здесь можно использовать блочные элементы <div> и <p>. Если какому-то элементу требуется задать стили, то к нему удобнее добавить стилевой класс и обращаться по имени класса.

<div class="card">
  <div class="card-price">560 ₽</div>
  <div class="card-month">В месяц</div>
  <div class="card-plan">Бизнес</div>
  <p>15 Проектов</p>
  <p>40 ГБ Диск</p>
  <p>Неограниченный трафик</p>
  <p>AI Конструктор</p>
  <p>Антивирус</p>
  <p class="card-button"><button>Попробовать</button></p>
</div>

Как видите, в вёрстке практикуются разные подходы по созданию структуры HTML, и все они в целом являются корректными. Какой из них выбрать зависит в первую очередь от личных предпочтений.

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

Начинается, естественно, с родительского элемента нашей карточки.

<div class="card">…</div>

Карточка будет содержать три блока — цена, название и список с кнопкой.

<div class="card">
  <div class="card-price">…</div>
  <div class="card-plan">…</div>
  <div class="card-offer">…</div>
</div>

Первый блок с ценой мы разбиваем на два подблока — цена и текст.

<div class="card-price">
  <div class="card-price-value">560 ₽</div>
  <div class="card-price-month">В месяц</div>
</div>

Второй блок содержит только название карточки.

<div class="card-plan">Бизнес</div>

В третьем блоке будет список <ul> и кнопка <button>. Список удобен для всяческих перечислений, но следует помнить, что у него есть свой собственный стиль, который предварительно следует сбросить.

<div class="card-offer">
 <ul class="card-offer-list">
  <li>15 Проектов</li>
  <li>40 ГБ Диск</li>
  <li>Неограниченный трафик</li>
  <li>AI Конструктор</li>
  <li>Антивирус</li>
 </ul>
 <div><button class="card-offer-button">Попробовать</button></div>
</div>

Все блоки, которые мы используем для этой карточки, самостоятельно располагаются нужным нам образом. Поэтому в стилях остаётся только красиво оформить элементы — задать им шрифт, цвет текста и фона, добавить скругление кнопке и установить вертикальные промежутки (пример 1).

Пример 1. Вёрстка карточки

Результат данного примера показан на рис. 4.

Рис. 4. Карточка

Если требуется разместить несколько таких карточек по горизонтали, то превращаем карточки в строчно-блочные элементы через свойство display.

.card {
  display: inline-block; /* Строчно-блочный элемент */
}

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

В примере 2 показано создание двух карточек, расположенных по горизонтали. Оформление карточек для разнообразия слегка изменено.

Пример 2. Вёрстка карточек

Результат данного примера показан на рис. 5.

Рис. 5. Две карточки

Схожим образом компонуются и строчные элементы. В качестве примера рассмотрим блок со списком меток (рис. 6).

Рис. 6. Блок с метками

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

<div class="tags">
  <h2 class="tags__title">Метки</h2>
  <ul class="tags__content">…</ul>
  <div class="tags__buttons">…</div>
</div>

Для создания меток можно использовать разные элементы:

• <span>;
• <div>, задав им inline-block;
• <li>, задав им inline-block и сделав сброс стилей.

Списки часто применяются для всяческих перечислений, даже если на привычный список это не очень похоже. Так что и для меток воспользуемся элементом <ul>, убрав через свойство list-style исходные маркеры, и разместив пункты списка горизонтально (пример 3).

Пример 3. Вёрстка меток

Строчно-блочные элементы как и строчные идут по горизонтали друг за другом и при необходимости переносятся на другую строку.

Итоги

• При поточной вёрстке макет сперва разбивается на блоки, идущие сверху вниз. При необходимости один блок может содержать в себе подблоки.
• В качестве универсального блочного элемента обычно используется <div>.
• Если элементы располагаются по горизонтали, то для их компоновки используется универсальный строчный элемент <span> или другой элемент, к которому добавляется display со значением inline-block.
• Строчно-блочные элементы отличаются от строчных тем, что для них работает свойство margin.