Красивые хлебные крошки. Breadcrumbs в web-дизайне: применение и примеры
На этом уроке познакомитесь с процессом создания в Bootstrap 3 и 4 навигационных цепочек («хлебных крошек»).
Разметка навигационных цепочек
Навигационные цепочки («хлебные крошки», breadcrumbs) - это схема навигации, которая показывает текущее положение пользователя на сайте. Они применяются для отображения иерархически-организованной информации. Например, в интернет-магазине "хлебные крошки" обычно представляют собой цепочки разделов. С их помощью пользователь может определить, в каком разделе он находится сейчас, а также они позволяют перейти на разделы более высоких уровней, т.е. предоставляют ещё одну возможность навигации по структуре сайта.
"Хлебные крошки" в Bootstrap – это обычный упорядоченный список с классом breadcrumbs . Разделитель элементов списка автоматически добавляется с помощью CSS (bootstrap.min.css) через следующий класс:
Breadcrumbs > li + li:before { color: #cccccc; content: "/"; padding: 0 5px; }
Пример создания "хлебных крошек" с помощью Bootstrap.
Оформление навигационных цепочек в Bootstrap
Ещё один пример:
Хлебные крошки для навигации по архивной информации
Не стандартный вариант оформления хлебных крошек
Рассмотрим пример создания следующего варианта оформления хлебных крошек:
Пример оформления хлебных крошек на сайте
Процесс создания хлебных крошек складывается из разработки HTML структуры и стилей (CSS).
CSS хлебных крошек:
/* хлебные крошки */ #breadcrumb { list-style: none; display: inline-block; padding-left: 0px; } #breadcrumb .icon { font-size: 14px; } #breadcrumb li { float: left; } #breadcrumb li a { color: #fff; display: block; background: #cc2eaa; text-decoration: none; position: relative; height: 34px; line-height: 34px; padding: 0 10px 0 5px; text-align: center; margin-right: 23px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #breadcrumb li:first-child a { padding-left: 15px; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px; border-radius: 4px 0 0 4px; } #breadcrumb li:first-child a:before { border: none; } #breadcrumb li:last-child a { padding-right: 15px; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0; border-radius: 0 4px 4px 0; } #breadcrumb li:last-child a:after { border: none; } #breadcrumb li a:before, #breadcrumb li a:after { content: ""; position: absolute; top: 0; border: 0 solid #cc2eaa; border-width: 17px 10px; width: 0; height: 0; } #breadcrumb li a:before { left: -20px; border-left-color: transparent; } #breadcrumb li a:after { left: 100%; border-color: transparent; border-left-color: #cc2eaa; } #breadcrumb li a:hover { background-color: #a22587; } #breadcrumb li a:hover:before { border-color: #a22587; border-left-color: transparent; } #breadcrumb li a:hover:after { border-left-color: #a22587; } #breadcrumb li a:active { background-color: #a22587; } #breadcrumb li a:active:before { border-color: #a22587; border-left-color: transparent; } #breadcrumb li a:active:after { border-left-color: #a22587; } #breadcrumb li.current a { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; }
Изменения цвета производится посредством редактирования значений соответствующих CSS свойств.
HTML разметка:
Веделение текущего элемента (если он будет использоваться в цепочке) осуществляется с помощью добавления к элементу li класса current .
На сайтах с множеством страниц навигационная цепочка (breadcrumb navigation) может значительно помочь посетителям ориентироваться в иерархической структуре документов и указать текущее местоположение пользователей на сайте. С точки зрения юзабилити, «хлебные крошки» могут сократить число действий посетителя, чтобы найти путь на верхний уровень страницы.
Что такое breadcrumb?
Навигационная цепочка (Навигационное меню , «Хлебные крошки» , англ. Breadcrumbs ) - элемент навигации по веб-сайту, представляющий собой путь по сайту от его «корня» до текущей страницы, на которой находится пользователь.
Название «Хлебные крошки» является иронической отсылкой к немецкой сказке «Гензель и Гретель», в которой дети, когда их завели в лес во второй раз, не смогли найти обратную дорогу, так как на этот раз вместо маленьких камешков они оставляли за собой хлебные крошки, впоследствии склёванные лесными птицами.
Обычно вы можете просмотреть «хлебные крошки» на сайтах с большим количеством контента, который размещен в иерархическом порядке. Самая простая форма, когда навигационная цепочка представлена в виде горизонтально расположенных текстовых ссылок и разделенных символов (> -"больше"), который указывает на уровень этой страницы относительно остальных страниц.
Когда нужно использовать Breadcrumbs?
Используйте навигационную цепочку для крупных веб-сайтов и веб-сайтов с иерархической организацией страниц.
Не следует использовать «хлебные крошки» для одноуровневых сайтов, которые не имеют никакой логической иерархии или группировки.
Отличный способ определить, является ли выиграет ли сайт от использования навигационной цепочки — построить карту сайта или схему, представляющуя архитектуру навигации сайта, а затем проанализировать, позволяют ли «хлебные крошки» упростить пользователю навигацию внутри категорий и между ними.
Иерархическую навигацию нужно рассматривать как дополнительную функцию, и она не должны заменять эффективное первичное меню навигации. Это вторичная схема навигации, что позволяет пользователям установить, где они находятся, и является альтернативным способом навигации по сайту.
Виды Breadcrumbs
Существуют три основных вида «хлебных крошек» .
На основе местоположения
На основе местоположения навигационные цепочки показываюю пользователю, где он находится в иерархии сайта. Они обычно используются для навигационных структур, которые имеют несколько уровней (как правило, более чем в два уровня). В приведенном ниже примере (от SitePoint ), каждая текстовая ссылка страницы, что размещена левее, находится на один уровень выше.
На основе свойств
«Хлебные крошки» на основе свойств отражают атрибуты конкретной страницы.
На основе пути
Они показывают путь, которым пользователь прошел на текущую страницу. Этот путь является динамическим, Одна и та же страница может иметь разные адреса.
Преимущества использования Breadcrumbs
Они могут помочь пользователю
«Хлебные крошки» используются в первую очередь, чтобы обеспечить пользователям дополнительные средства навигации по сайту. На больших многоуровневых веб-сайтах предлагая визуализацию пройденного пути, вы можете обеспечить пользователю достаточно легкий переход к категориям высшего уровня.
Снижает количество кликов или действий для возвращения на страницы более высокого уровня
Вместо использования кнопки «Назад» браузера или первичной навигации веб-сайта, пользователи может возвращаться к высшим категориям с помощью «хлебных крошек», делая при этом меньшее количество кликов.
Как правило, не засоряют экран
Они, как правило, имеют горизонтальную ориентацию и поэтому не занимают на странице много места.
Снижают показатель отказов
Навигационные цепочки могут побудить новых посетителей просмотреть остальные страницы веб-сайта. Например, пользователь переходит на страницу через поиск Google , видит категории, которые размещены выше и может заинтересоваться. Это, в свою очередь, снижает показатель отказов сайта .
Ошибки при использовании Breadcrumbs
Использовать «хлебные крошки» достаточно просто. Но прежде, чем реализовывать их на сайте, нужно рассмотреть некоторые ошибки, которых следует избегать.
Использование навигационных цепочек, когда в этом нету необходимости
Распространенной ошибкой является использование «хлебных крошек», когда в этом нету никакой выгоды.
В примере выше мы можем наблюдать слишком много вариантов навигации, которые размещены достаточно близко друг к другу: первичная навигацию, «хлебные крошки» и вторичная навигация.
Использование «хлебных крошек» в качестве основной навигации
Как уже было отмечено раньше, «хлебные крошки» нужно использовать в качестве дополнительной помощи к навигации.
Использование «хлебных крошек», когда страницы имеют несколько категорий
Навигационные цепочкм имеют линейную структуру, поэтому их будет трудно использовать, если ваши страницы не могут быть разделены на четкие категории. Решение о том, использовать ли «хлебные крошки» во многом зависит от того, как вы создали свой сайт иерархии. При низком уровне страницы использование "хлебных крошек" является неэффективным, неточным и запутанным для пользователя.
Дизайн «хлебных крошек»
При разработке цепочек навигации, могут возникнуть некоторые вопросы. Например:
Какой символ нужно использовать для отделения ссылок?
Общепринятым и наиболее узнаваемым символ для разделения гиперссылок в «хлебных крошках» является символ «больше, чем» - (>).
Также можно использовать кавычки, указывающие на правый угол (») и косую черту (/).
Выбор зависит от самого сайта и вида цепочки, который вы используете. Например, если ссылки в «хлебных крошках» не имеют иерархическое отношения друг к другу, использование символа «больше, чем >» может не точно передать их суть.
Какими они должны быть?
Вы ведь не хотите, чтобы ваши «хлебные крошки» доминировали на странице. Их следует использовать в качестве дополнительной помощи для пользователей (для удобства), поэтому их размер тоже должен соответствовать этому и правильно донести до пользователей эту функцию — они должны быть меньше или менее заметными, чем первичная навигация по меню.
Хорошим правилом при определении размера пройденного пути является то, что она не должны быть первым элементом, который привлекает внимание пользователя на странице.
Где должны быть расположены «хлебные крошки»?
«Хлебные крошки», как правило, отображаются в верхней части страницы, под основным меню навигации., если используется горизонтальное меню.
Статистика
Ниже представлены собранные в мае 2002 года статистические данные о 75 сайтах-лидерах, занимающихся электронной коммерцией.
Ориентация цепочек
95% — горизонтальная
5% Вертикальная
Разделитель между элементами (для горизонтальных цепочек)
Примеры использования breadcrumbs в web-дизайне
Теперь, когда мы рассмотрели, кто, как, когда и зачем применяет "хлебные крошки", можно взглянуть на некоторые примеры использования их на веб-сайтах.
Классическое использование «хлебных крошек»
Использование других символов
За последнее время CSS и CSS3 сильно продвинулись вперед и поэтому старые стили, которые используют картинки на заднем фоне для получения нужной фигуры — больше не требуются.
В этой статье я расскажу как сделать хлебные крошки на сайте с помощь HTML и CSS в стиле flat. Так же можете посмотреть интересные сайтов, может что-нибудь пригодиться. Я недавно делал подборку.
В конце мы получим вот такой результат:
Ранее, для того чтобы сделать прозрачную стрелки между двумя блоками использовалась прозрачная картинка на заднем фоне. Теперь данная проблема может быть решена используя только CSS.
1. Каркас крошек
- Breadcrumb
Для начала создадим маркированный список —
- , в котором будут
- элементы. Хлебная крошка будет добавляться с помощью добавления нового
- .
2. Добавляем CSS
Теперь напишем CSS, чтобы выглядело как тут:
#crumbs ul li a { display: block; float: left; height: 50px; background: #3498db; text-align: center; padding: 30px 40px 0 40px; position: relative; margin: 0 10px 0 0; font-size: 20px; text-decoration: none; color: #fff; }
Данные стили добавляют:
- вид для ссылки в виде блока и синий цвет
- центрируют текст и делаем его белым
- ровный padding , чтобы блок отображался корректно по вертикали
- сбрасывает иные стили для ссылок с text-decoration: none
Внимание: position: relative добавлен для того, чтобы позже сдерживать все внутренние блоки с position: absolute.
3. Создаем эффект стрелки
#crumbs ul li a:after { content: ""; border-top: 40px solid red; border-bottom: 40px solid red; border-left: 40px solid blue; position: absolute; right: -40px; top: 0; }
Для создания стрелок мы будем использовать свойство :after , которое позволяет создавать дополнительный элемент после родителя. Добавляем ему position: absolute — для этого мы и делали positive: relative для ссылок , чтобы удержать absolute свойство внутри ссылки и манипулировать им как нам хочется.
Вид стрелки будет сделан с помощью использования border’ов. В примере специально использован красный цвет, но чтобы придать вид треугольника будет использоваться transparent . Далее border будет пододвинут на месте с использование position: absolute .
4. Добавляем прозрачность с border
Меняем red в border на transparent , чтобы создать эффект прозрачности.
Border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #3498db;
5. Добавляем стрелку сзади
#crumbs ul li a:before { content: ""; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #d4f2ff; position: absolute; left: 0; top: 0; }
Используя тот же принцип как и в третьем этапе — можно создать прозрачный треугольник позади блока. Цвет border должен быть поставлен как и задний цвет сайта, чтобы создавался эффект прозрачности.
Padding: 30px 40px 0 80px;
5. Добавляем новые элементы
Добавляя новые
- увеличивают глубину хлебной крошки.
- Один
- Два
- Три
- Четыре
- Пять
6. Первый и последний
-
Чтобы создать эффект закругления для первого и последнего элемента в хлебной крошки мы будем использовать :first-child и :last-child.
#crumbs ul li:first-child a { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } #crumbs ul li:first-child a:before { display: none; } #crumbs ul li:last-child a { padding-right: 80px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } #crumbs ul li:last-child a:after { display: none; }
7. Добавляем hover эффект
#crumbs ul li a:hover { background: #fa5ba5; } #crumbs ul li a:hover:after { border-left-color: #fa5ba5; }
Так же не забудьте добавить border-radius при наведении на первый и последний элемент в хлебной крошке.
На этом все. Если у вас есть какие-то вопросы — пишите комментарии и поделитесь статьей, если вам понравилось!
Как сделать хлебные крошки на сайте с помощью CSS от bologer
В предыдущей статье “Навигация breadcrumbs с помощью треугольников на CSS” описывался способ создания меню с помощью чистого CSS, без использования графики.
Метод всем хорош, за исключением одного - поддержка такого меню в старых браузерах сомнительна. Но при переводе этой статьи упоминалась ссылка на способ создания навигации с помощью графики.
Статья написана достаточно давно, но метод абсолютно рабочий. Автор статьи Veerle Pieters, а сам пост называется “Simple scalable CSS based breadcrumbs”. Ниже привожу даже не вольный его перевод, а вольный пересказ.
Несколько дней назад у меня стояла задача создать навигационное меню в стиле “хлебные крошки” (breadcrumbs) для сайта, над которым я работал. Я не думаю, что такое меню необходимо для каждого сайта, но в некоторых случаях оно очень полезно и практично.
Однако этот пример является как бы основой, которую можно расширять и применять на практике. Меню будет создаваться при помощи обычного маркированного списка
.1 ul Но сначала посмотрим на образец, с которым будем работать:
Меню достаточно простое, как и код, с помощью которого мы будем его создавать.
HTML код - маркированный список ul
- Home
- Main section
- Sub section
- Sub sub section
- The page you are on right now
Все пункты меню имеют ссылки, кроме последнего - “The page you are on right now” (Страница, на которой вы сейчас находитесь). При работе над меню я задавался вопросом - является ли список наиболее подходящей структурой для создания меню? Я полагаю, что применение списка в этом случае не является строгим правилом, но мне кажется - это наиболее семантичный и правильный вариант.
CSS код - создаем стили для меню
Задаем общие стили для меню - убираем маркеры и обнуляем отступы в браузерах Firefox, IE:
делаем плавающими через свойство равное высоте всего меню - . И задаем цвет текста . Далее помещаем для ссылки фоновое изображение, вырезанное из макета. Для этого нужно вырезать только саму “стрелку”:… которую “задвигаем” вправо (100%) и размещаем точно по вертикали (50%). Также делаем у ссылки отступ справа
, в котором будет как раз и находиться фоновое изображение (вырезанная стрелка): .crumbs li a { display : block ; padding : 0 15px 0 0 ; background : url(img/crumbs.gif) 100% 50% no-repeat ; }1 padding-left: 15px Уже практически все сделано. Осталось задать стили для текста ссылок. Уберем стандартное подчеркивание и изменим ее цвет:
.crumbs li a :link , .crumbs li a :visited { text-decoration : none ; color : #777 ; }
и1 :hover
. При наведении курсора мыши или получения фокуса с клавиатуры цвет текста ссылки будет меняться: .crumbs li a :hover , .crumbs li a :focus { color : #dd2c0d ; }1 :focus Результат нашей работы представлен здесь:
Примечание переводчика:
Автор статьи максимально упростил пример и сам код соответственно, насколько я понимаю. Дело в том, что на примере хорошо виден линейный горизонтальный градиент для каждого из пунктов меню. Однако в коде это никак отображено не было. Ну, не беда - разве это проблема создать линейный градиент на CSS3? Сама задача ведь выполнена!
Если у вас, как вы считаете много материала, то здесь рекомендовано подключить этот функционал. Стиль списка не будет, чтобы избежать черной точки списка или другого стиля, который по умолчанию. Так как он распределяет его по категориям и безусловно модулям, начиная с главной странице, и все это преподносится на стильном виде. В данном материале вы наблюдаете подборку, которая сделано по стилистике аналогично, это в плоском стиле.
Вот по форме они совершенно разные, что кому-то даже не нужно будет редактировать под свой дизайн, так как он отлично впишется в него. Теперь мы будем использовать код css, чтобы сделать привязку первого списка и установить привязку последнего ребенка, чтобы сделать его по умолчанию, чтобы tringle не появлялся в привязке первого ребенка для якоря слева и последнего ребенка для правой стороны.
Оформление хлебных крошек
1. В светло желтом оттенке:
2. Светлая палитра с зеленой гаммой:
3. В малиновом цвете
4. Выполнен в синей палитре:
Это будет простой прямой список с фоном и дополнением и некоторыми другими стилями. После этого я создам треугольную структуру в правой части каждого анкера списка, используя CSS, играя со свойствами broder.
Как можете видеть в demo версии, когда наводим на панировочные сундуки любой анкер списка, он дает эффект, что будет означать, посещен или находитесь в этом разделе.
Или мы можем представить его эффект, чтобы сделать его активным в качестве активных панировочных сухарей. Вы можете сказать эти панировочные сухари css только сухари, потому что я буду использовать только css и css3, чтобы сделать эти панировочные сухари.
Приступаем к установке:
CSSСтиль списка не будет, чтобы избежать черной точки списка или другого стиля, который по умолчанию. Каждый список inline div будет list-inline, чтобы сделать его горизонтальным списком, используя css display: list-inline.
#breadcrumb-isanchogives1 {
text-align: center;
margin-top:30px;
}#breadcrumb-isanchogives1 ul {
list-style: none;
display: inline-table;
}
#breadcrumb-isanchogives1 ul li {
display: inline;
}#breadcrumb-isanchogives1 ul li a {
display: block;
float: left;
height: 50px;
background: #ffd928;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;Font-size: 20px;
text-decoration: none;
color: #fff;}
#breadcrumb-isanchogives1 ul li a:after {
content: "";
border-left: 40px solid #ffd928;
z-index: 1;#breadcrumb-isanchogives1 ul li a:before {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
}#breadcrumb-isanchogives1 ul li:first-child a {
}
#breadcrumb-isanchogives1 ul li:first-child a:before {
display: none;
}#breadcrumb-isanchogives1 ul li:last-child a {
padding-right: 80px;
}
#breadcrumb-isanchogives1 ul li:last-child a:after {
display: none;
}#breadcrumb-isanchogives1 ul li a:hover {
background: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum{
background: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a:hover:after {
border-left-color: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum:after {
border-left-color: #ff9a2d;
}#breadcrumb-isanchogives2 {
text-align: center;
margin-top:30px;
}#breadcrumb-isanchogives2 ul {
list-style: none;
display: inline-table;
}
#breadcrumb-isanchogives2 ul li {
display: inline;
}#breadcrumb-isanchogives2 ul li a {
display: block;
float: left;
height: 50px;
background: #56e9ae;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;Font-size: 20px;
text-decoration: none;
color: #fff;}
#breadcrumb-isanchogives2 ul li a:after {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #56e9ae;
position: absolute; right: -40px; top: 0;
z-index: 1;#breadcrumb-isanchogives2 ul li a:before {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #f2f2f2;
position: absolute; left: 0; top: 0;
}#breadcrumb-isanchogives2 ul li:first-child a {
}#breadcrumb-isanchogives2 ul li:last-child a {
padding-right: 80px;
}#breadcrumb-isanchogives2 ul li a:hover {
background: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum {
background: #49c593;
}
#breadcrumb-isanchogives2 ul li a:hover:after {
border-left-color: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum:after {
border-left-color: #49c593;
}#breadcrumb-isanchogives3 {
text-align: center;
margin-top:30px;
}#breadcrumb-isanchogives3 ul {
list-style: none;
display: inline-table;
}
#breadcrumb-isanchogives3 ul li {
display: inline;
}#breadcrumb-isanchogives3 ul li a {
display: block;
float: left;
height: 50px;
background: #ff818b;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;Font-size: 20px;
text-decoration: none;
color: #fff;}
#breadcrumb-isanchogives3 ul li a:after {
content: "";
height:80px;
width:40px;
background: #ff818b;
position: absolute; right: -40px; top: 0;
z-index: 1;#breadcrumb-isanchogives3 ul li a:before {
content: "";
height:80px;
width:40px;
border-radius:0px 40px 40px 0px;
background:#f2f2f2;
position: absolute; left: 0; top: 0;
}#breadcrumb-isanchogives3 ul li:first-child a {
border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#breadcrumb-isanchogives3 ul li:first-child a:before {
display: none;
}#breadcrumb-isanchogives3 ul li:last-child a {
padding-right: 80px;
border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#breadcrumb-isanchogives3 ul li:last-child a:after {
display: none;
}#breadcrumb-isanchogives3 ul li a:hover {
background: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum {
background: #ea606b;
}
#breadcrumb-isanchogives3 ul li a:hover:after {
background: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum:after {
background: #ea606b;
}#breadcrumb-isanchogives4 {
text-align: center;
margin-top:30px;
}#breadcrumb-isanchogives4 ul {
list-style: none;
display: inline-table;
}
#breadcrumb-isanchogives4 ul li {
display: inline;
}#breadcrumb-isanchogives4 ul li a {
display: block;
float: left;
height: 50px;
background: #2b97cc;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;Font-size: 20px;
text-decoration: none;
color: #fff;}
#breadcrumb-isanchogives4 ul li a:after {
content: "";
height:80px;
width:40px;
border-radius:0px 40px 40px 0px;
background:#2b97cc;
position: absolute; right: -40px; top: 0;
z-index: 1;#breadcrumb-isanchogives4 ul li a:before {
content: "";
height:80px;
width:40px;
background:#f2f2f2;
border-radius:0px 40px 40px 0px;
position: absolute; left: 0; top: 0;
}#breadcrumb-isanchogives4 ul li:first-child a {
border-top-left-radius: 0px; border-bottom-left-radius: 0px;
}#breadcrumb-isanchogives4 ul li:last-child a {
padding-right: 80px;
border-top-right-radius: 0px; border-bottom-right-radius: 0px;
}#breadcrumb-isanchogives4 ul li a:hover {
background: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum {
background: #207ca8;
}
#breadcrumb-isanchogives4 ul li a:hover:after {
background: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum:after {
background: #207ca8;
}
Прежде всего создайте структуру html на основе тегов div и ul li. Div содержит идентификатор, каждый идентификатор будет содержать другой стиль в таблице стилей, чтобы представить отдельный дизайн. Где мы используем нумерацию, как один, два, три, четыре.Эти идентификаторы имеют одинаковую внутреннюю структуру, разделенную разными стилями в соответствии с их идентификатором.