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

Хлебные крошки, шаг 1

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

Кстати, «хлебными крошками» называется навигационный блок, который показывает в каком разделе сайта вы находитесь, а также путь к этому разделу от главной страницы сайта. Крошки чем-то похожи на пути в файловой системе.

Этот элемент обычно верстают очень просто — последовательность ссылок внутри блока с классом. А вот вариантов оформления существует много. И мы разберём один из достаточно сложных.

Исходная заготовка включает в себя контейнер .breadcrumbs с тремя ссылками. Контейнер сделан блочно-строчным, а ссылки выстроены в ряд с помощью float. Также заданы некоторые исходные размеры, отступы и другие свойства.

Всё дополнительное оформление ссылок мы будем делать с помощью псевдоэлементов. И начнём с создания «стрелок» на концах ссылок с помощью ::after. И для этого на первом шаге зададим псевдоэлементам базовые размеры, позиционирование и фон.

Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует 20 мая 2024. Всего от 5520 ₽в месяц.

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

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

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

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

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

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