• Теория
  • Теория

Контакты, шаг 2

Заголовок и отступы сделали блок контактов более структурированным.

Отступы слева, как вы уже догадались, предназначены для размещения иконок.

Иконки будем размещать по одной из классических техник: «абсолютные элементы + спрайты».

В каждом из блоков .item есть пустой див .icon, в котором и будет отображаться иконка.

Специальные дивы в этом задании мы будем использовать для наглядности. Лучше иконки выносить в фон псевдоэлементов ::before и ::after, чтобы не «засорять» разметку.

Итак, давайте зададим этим дивам абсолютное позиционирование, фиксированные размеры и расположим в верхнем левом углу родителя (для этого мы задавали относительное позиционирование для .item).

Осталось задать для .icon картинку-спрайт в качестве фона. Вот она:

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Мастерская: декоративные элементы» тренажёра «Ретромастерские» можно после регистрации и оформления подписки.