- Теория
- Теория
Контакты, шаг 2
Заголовок и отступы сделали блок контактов более структурированным.
Отступы слева, как вы уже догадались, предназначены для размещения иконок.
Иконки будем размещать по одной из классических техник: «абсолютные элементы + спрайты».
В каждом из блоков .item
есть пустой див .icon
, в котором и будет отображаться иконка.
Специальные дивы в этом задании мы будем использовать для наглядности. Лучше иконки выносить в фон псевдоэлементов ::before
и ::after
, чтобы не «засорять» разметку.
Итак, давайте зададим этим дивам абсолютное позиционирование, фиксированные размеры и расположим в верхнем левом углу родителя (для этого мы задавали относительное позиционирование для .item
).
Осталось задать для .icon
картинку-спрайт в качестве фона. Вот она:
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.