Хлебные крошки html: Красивые хлебные крошки (breadcrumbs) для обычного сайта и для блогов WordPress на CSS3 – Хлебные крошки на CSS и HTML — Вебджем.рф

Содержание

Хлебные крошки на CSS и HTML

.cd-breadcrumb, .cd-multi-steps {

width: 90%;

max-width: 768px;

padding: 0.5em 1em;

margin: 1em auto;

background-color: #edeff0;

border-radius: .25em;

}

.cd-breadcrumb:after, .cd-multi-steps:after {

content: «»;

display: table;

clear: both;

}

.cd-breadcrumb li, .cd-multi-steps li {

display: inline-block;

float: left;

margin: 0.5em 0;

}

.cd-breadcrumb li::after, .cd-multi-steps li::after {

/* this is the separator between items */

display: inline-block;

content: ‘\\00bb’;

margin: 0 .6em;

color: #959fa5;

}

.cd-breadcrumb li:last-of-type::after, .cd-multi-steps li:last-of-type::after {

/* hide separator after the last item */

display: none;

}

.cd-breadcrumb li > *, .cd-multi-steps li > * {

/* single step */

display: inline-block;

font-size: 1.4rem;

color: #2c3f4c;

}

.cd-breadcrumb li.current > *, .cd-multi-steps li.current > * {

/* selected step */

color: #96c03d;

}

.no-touch .cd-breadcrumb a:hover, .no-touch .cd-multi-steps a:hover {

/* steps already visited */

color: #96c03d;

}

.cd-breadcrumb.custom-separator li::after, .cd-multi-steps.custom-separator li::after {

/* replace the default arrow separator with a custom icon */

content: »;

height: 16px;

width: 16px;

background: url(../img/cd-custom-separator.svg) no-repeat center center;

vertical-align: middle;

}

.cd-breadcrumb.custom-icons li > *::before, .cd-multi-steps.custom-icons li > *::before {

/* add a custom icon before each item */

content: »;

display: inline-block;

height: 20px;

width: 20px;

margin-right: .4em;

margin-top: -2px;

background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;

vertical-align: middle;

}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *::before {

/* change custom icon using image sprites */

background-position: -20px 0;

}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *::before {

background-position: -40px 0;

}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *::before {

background-position: -60px 0;

}

.cd-breadcrumb.custom-icons li.current:first-of-type > *::before, .cd-multi-steps.custom-icons li.current:first-of-type > *::before {

/* change custom icon for the current item */

background-position: 0 -20px;

}

.cd-breadcrumb.custom-icons li.current:nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(2) > *::before {

background-position: -20px -20px;

}

.cd-breadcrumb.custom-icons li.current:nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(3) > *::before {

background-position: -40px -20px;

}

.cd-breadcrumb.custom-icons li.current:nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(4) > *::before {

background-position: -60px -20px;

}

@media only screen and (min-width: 768px) {

.cd-breadcrumb, .cd-multi-steps {

padding: 0 1.2em;

}

Как сделать хлебные крошки на сайте с помощью CSS

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

В этой статье я расскажу как сделать хлебные крошки на сайте с помощь HTML и CSS в стиле flat. Так же можете посмотреть интересные flat шаблоны сайтов, может что-нибудь пригодиться. Я недавно делал подборку.

В конце мы получим вот такой результат:

Ранее, для того чтобы сделать прозрачную стрелки между двумя блоками использовалась прозрачная картинка на заднем фоне. Теперь данная проблема может быть решена используя только CSS.

<div> 
    <ul>
        <li><a href="#">Breadcrumb</a></li> 
    </ul>
</div>

Для начала создадим маркированный список — <ul>, в котором будут <li> элементы. Хлебная крошка будет добавляться с помощью добавления нового <li>.

Теперь напишем 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.

#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 для ссылок <a>, чтобы удержать absolute свойство внутри ссылки и манипулировать им как нам хочется.

Вид стрелки будет сделан с помощью использования border’ов. В примере специально использован красный цвет, но чтобы придать вид треугольника будет использоваться transparent. Далее border будет пододвинут на месте с использование position: absolute.

Меняем red в border на transparent, чтобы создать эффект прозрачности.

border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #3498db;

#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;

Добавляя новые <li> увеличивают глубину хлебной крошки.

<div>
    <ul>
        <li><a href="#1">Один</a></li>
        <li><a href="#2">Два</a></li>
        <li><a href="#3">Три</a></li>
        <li><a href="#4">Четыре</a></li>
        <li><a href="#5">Пять</a></li>
    </ul>
</div>

Чтобы создать эффект закругления для первого и последнего элемента в хлебной крошки мы будем использовать :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;
}

После чего нужно сделать выделения ссылки при наведении на нее. Цвет выделения можно выбрать по вашему вкусы — как пожелаете.

#crumbs ul li a:hover {
  background: #fa5ba5;
}

#crumbs ul li a:hover:after {
  border-left-color: #fa5ba5;
}

Так же не забудьте добавить border-radius при наведении на первый и последний элемент в хлебной крошке.

Вот что у нас получилось: https://jsfiddle.net/AlexanderT/bmuwLfqr/

На этом все. Если у вас есть какие-то вопросы — пишите комментарии и поделитесь статьей, если вам понравилось!

Как сделать хлебные крошки на сайте с помощью CSS от bologer

«Хлебные крошки» как у Google

.crumbs2 { 
    display: block; 
    margin-left: -13px; 
    padding: 0; 
}
 
.crumbs2 li { 
    display: inline; 
}
 
.crumbs2 li a, .crumbs2 li a:link, .crumbs2 li a:visited {
    color: #666; 
    display: block; 
    float: left; 
    font-size: 12px; 
    padding: 7px 16px 7px 19px; 
    position: relative; 
    text-decoration: none; 
    border: 1px solid #d9d9d9; 
    border-right-width: 0px; 
}
 
.crumbs2 li a  { 
	background-image: -webkit-gradient(linear,left bottom,left top,
                                           color-stop(0.45, rgb(241,241,241)),
                                           color-stop(0.73, rgb(245,245,245)));
 
	background-image: -moz-linear-gradient( center bottom, 
                                                rgb(241,241,241) 45%, 
                                                rgb(245,245,245) 73%);
	/* IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5);
	/* IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)";
}
 
.crumbs2 li.first a { 
    border-top-left-radius: 5px; 
    -moz-border-radius-topleft: 5px; -
    webkit-border-top-left-radius: 5px; 
}
 
.crumbs2 li.last a { 
    border-right-width: 1px; 
    border-bottom-right-radius: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
}
 
.crumbs2 li a:hover { 
	border-top-color: #c4c4c4;
	border-bottom-color: #c4c4c4;
 
	background-image: -webkit-gradient(linear,left bottom,left top,
                                           color-stop(0.45, rgb(241,241,241)),
                                           color-stop(0.73, rgb(248,248,248)));
	background-image: -moz-linear-gradient( center bottom, 
                                                rgb(241,241,241) 45%, 
                                                rgb(248,248,248) 73%);
	/* IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1);
	/* IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1)";
 
	color: #333;
 
	-moz-box-shadow: 0px 2px 2px #e8e8e8;
	-webkit-box-shadow: 0px 2px 2px #e8e8e8;
	box-shadow: 0px 2px 2px #e8e8e8;
}
 
.crumbs2 li a:active {
	border-top-color: #c4c4c4;
	border-bottom-color: #c4c4c4;
 
	background-image: -webkit-gradient(linear,left bottom,left top,
                                           color-stop(0.45, rgb(224,224,224)),
                                           color-stop(0.73, rgb(235,235,235)));
	background-image: -moz-linear-gradient( center bottom, 
                                                rgb(224,224,224) 45%, 
                                                rgb(235,235,235) 73%);
	/* IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebebeb, endColorstr=#e0e0e0);
	/* IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebebeb, endColorstr=#e0e0e0)";
 
	color: #333; 
 
	box-shadow: -1px 1px 1px 0px #dadada inset;
	-webkit-box-shadow: -1px 1px 1px 0px #dadada inset;
	-moz-box-shadow: -1px 1px 1px 0px #dadada inset;
}

Хлебные крошки на CSS и HTML

.cd-breadcrumb, .cd-multi-steps {

width: 90%;

max-width: 768px;

padding: 0.5em 1em;

margin: 1em auto;

background-color: #edeff0;

border-radius: .25em;

}

.cd-breadcrumb:after, .cd-multi-steps:after {

content: «»;

display: table;

clear: both;

}

.cd-breadcrumb li, .cd-multi-steps li {

display: inline-block;

float: left;

margin: 0.5em 0;

}

.cd-breadcrumb li::after, .cd-multi-steps li::after {

/* this is the separator between items */

display: inline-block;

content: ‘\\00bb’;

margin: 0 .6em;

color: #959fa5;

}

.cd-breadcrumb li:last-of-type::after, .cd-multi-steps li:last-of-type::after {

/* hide separator after the last item */

display: none;

}

.cd-breadcrumb li > *, .cd-multi-steps li > * {

/* single step */

display: inline-block;

font-size: 1.4rem;

color: #2c3f4c;

}

.cd-breadcrumb li.current > *, .cd-multi-steps li.current > * {

/* selected step */

color: #96c03d;

}

.no-touch .cd-breadcrumb a:hover, .no-touch .cd-multi-steps a:hover {

/* steps already visited */

color: #96c03d;

}

.cd-breadcrumb.custom-separator li::after, .cd-multi-steps.custom-separator li::after {

/* replace the default arrow separator with a custom icon */

content: »;

height: 16px;

width: 16px;

background: url(../img/cd-custom-separator.svg) no-repeat center center;

vertical-align: middle;

}

.cd-breadcrumb.custom-icons li > *::before, .cd-multi-steps.custom-icons li > *::before {

/* add a custom icon before each item */

content: »;

display: inline-block;

height: 20px;

width: 20px;

margin-right: .4em;

margin-top: -2px;

background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;

vertical-align: middle;

}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *::before {

/* change custom icon using image sprites */

background-position: -20px 0;

}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *::before {

background-position: -40px 0;

}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *::before {

background-position: -60px 0;

}

.cd-breadcrumb.custom-icons li.current:first-of-type > *::before, .cd-multi-steps.custom-icons li.current:first-of-type > *::before {

/* change custom icon for the current item */

background-position: 0 -20px;

}

.cd-breadcrumb.custom-icons li.current:nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(2) > *::before {

background-position: -20px -20px;

}

.cd-breadcrumb.custom-icons li.current:nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(3) > *::before {

background-position: -40px -20px;

}

.cd-breadcrumb.custom-icons li.current:nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(4) > *::before {

background-position: -60px -20px;

}

@media only screen and (min-width: 768px) {

.cd-breadcrumb, .cd-multi-steps {

padding: 0 1.2em;

}

HTML и CSS. Хлебные крошки (Breadcrumbs)

Хлебные крошки рекомендуется оформлять как список.


<ol>
    <li>
        <a href="http://know-online.com/">Главная</a>
    </li>
    <li>
        <a href="http://know-online.com/category">Раздел</a>
    </li>
    <li>
        <a href="http://know-online.com/category/page">Страница</a>
    </li>
</ol>

Дальше остаётся их оформить в CSS. Пример на JSFiddle.

Название «Хлебные крошки» является отсылкой к сказке «Гензель и Гретель» братьев Гримм, где дети оставляли хлебные крошки в лесу, чтобы по ним вернуться домой.

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

Код микроразметки для хлебных крошек выглядит следующим образом:


<ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="http://know-online.com/arts"><span itemprop="name">Arts</span></a>
        <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="http://know-online.com/arts/books"><span itemprop="name">Books</span></a>
        <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="http://know-online.com/arts/books/poetry"><span itemprop="name">Poetry</span></a>
        <meta itemprop="position" content="3" />
    </li>
</ol>

Please enable JavaScript to view the comments powered by Disqus.

Хлебные крошки css и пагинация css как сделать

Постраничная навигация или пагинация pagination.

Рассмотрим два вида хлебных крошек.

1 Создаем nav, ul класс pagination, внутри него создадим девять li в каждой будет ссылка.

Прописываем одной строкой в sublime text и нажимаем tab, плагин emmet все распакует.

section>.container>.row>.nav>ul.pagination>li*9>a

Первая ссылка будет содержать две стрелки влево иконок font awesome.
Вторая ссылка одну стрелочку влево fa fa-chevron-left.
У последних li сделаем по аналогии, только стрелки будут вправо fa fa-chevron-right.

Первой странице задаем активный пункт li class=active.

Для пагинации можно задать два размера с классом

pagination-lg.
pagination-sm.

Код в index.html.

<div>

<ul>

</ul>

</div>

</section>

2 Альтернативный способ хлебных крошек.

Навигация nav с классом у ul pager, внутри будет два элемента списка, у каждого ссылка.

Код для emmet.

Добавим ссылкам названия старые и новые записи.

Стрелочки будут из html велво &larr и точка с запятой.

Расшифровывается как left arrow.

Кнопки будут по центру, но если добавить классы class= previous и class=next, то кнопки будут по краям страницы.

<nav> <ul> <li><a href=»#»>← Старые записи</a></li> <li><a href=»#»>Новые записи →</a></li> </ul> </nav>

<nav>

<ul>

<li><a href=»#»>← Старые записи</a></li>

<li><a href=»#»>Новые записи →</a></li>

</ul>

</nav>

Хлебные крошки breadcrumb.

Положим хлебные крошки в контейнер с классом row.

Создаем нумерованный список с классом breadcrumb в нем четыре элемента списка с ссылками.

Строка в emmet.

section>.container>.row>ol.breadcrump>li*4>a

Начнем с главной страницы home и икнокой домика fa fa-home.

Следующая ссылка blog.

У блога есть категории Category и статьи.

Допустим мы уже в этой статье, тогда добавим класс class=active.

<section> <div> <div> <ol> <li><a href=»#»><i>Home</i></a></li> <li><a href=»#»><i>Blog</i></a></li> <li><a href=»#»><i>Category</i></a></li> <li><a href=»#»><i>the name of the article</i></a></li> </ol> </div> </div> </section>

<div>

<ol>

<li><a href=»#»><i>Category</i></a></li>

<li><a href=»#»><i>the name of the article</i></a></li>

</ol>

</div>

</section>

Стили в main.sass.

Разделительные полосы можно заменить иконками font awesome.

Breadcrumb берет дочерний li и следующему соседу li задает before.

В content пропишем код иконки \f105.

И шрифт будет font-family: fontawesome.

.breadcrumb > li + li:before content: «\f105″ font-family: ‘fontawesome’

.breadcrumb > li + li:before

content: «\f105»

font-family: ‘fontawesome’

Красивые хлебные крошки «breadcrumbs» на CSS3

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

Если у вас, как вы считаете много материала, то здесь рекомендовано подключить этот функционал. Стиль списка не будет, чтобы избежать черной точки списка или другого стиля, который по умолчанию. Так как он распределяет его по категориям и безусловно модулям, начиная с главной странице, и все это преподносится на стильном виде. В данном материале вы наблюдаете подборку, которая сделано по стилистике аналогично, это в плоском стиле.

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

Оформление хлебных крошек

1. В светло желтом оттенке:

2. Светлая палитра с зеленой гаммой:

3. В малиновом цвете

4. Выполнен в синей палитре:

Это будет простой прямой список с фоном и дополнением и некоторыми другими стилями. После этого я создам треугольную структуру в правой части каждого анкера списка, используя CSS, играя со свойствами broder.

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

Или мы можем представить его эффект, чтобы сделать его активным в качестве активных панировочных сухарей. Вы можете сказать эти панировочные сухари css только сухари, потому что я буду использовать только css и css3, чтобы сделать эти панировочные сухари.

Приступаем к установке:

HTML

Код

<div>
  <ul>
  <li><a href=»http://zornet.ru/load/svetlyj_shablon_livecoins_dlja_sajta_ucoz/142-1-0-8701″>№ 1</a></li>
  <li><a href=»http://zornet.ru/load/shablon_shopgames_dlja_sajta_ucoz/142-1-0-8684″>№ 1</a></li>
  <li><a href=»/»>№ 3</a></li>
  <li><a href=»/»>№ 4</a></li>
  <li><a href=»/»>№ 5</a></li>
  </ul>
</div>
<div>
  <ul>
  <li><a href=»/»>Раздел 1</a></li>
  <li><a href=»/»>Раздел 2</a></li>
  <li><a href=»/»>Раздел 3</a></li>
  <li><a href=»/»>Раздел 4</a></li>
  <li><a href=»/»>Раздел 5</a></li>
  </ul>
</div>
<div>
  <ul>
  <li><a href=»/»>ZOR 1</a></li>
  <li><a href=»/»>ZOR 2</a></li>
  <li><a href=»/»>ZOR 3</a></li>
  <li><a href=»/»>ZOR 4</a></li>
  <li><a href=»/»>ZOR 5</a></li>
  </ul>
</div>
<div>
  <ul>
  <li><a href=»/»>Клик 1</a></li>
  <li><a href=»/»>Клик 2</a></li>
  <li><a href=»/»>Клик 3</a></li>
  <li><a href=»/»>Клик 4</a></li>
  <li><a href=»/»>Клик 5</a></li>
  </ul>
</div>

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-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid #ffd928;
  position: absolute; right: -40px; top: 0;
  z-index: 1;

  }

  #breadcrumb-isanchogives1 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-isanchogives1 ul li:first-child a {
  border-top-left-radius: 10px; border-bottom-left-radius: 10px;
  }
  #breadcrumb-isanchogives1 ul li:first-child a:before {
  display: none;
  }

  #breadcrumb-isanchogives1 ul li:last-child a {
  padding-right: 80px;
  border-top-right-radius: 10px; border-bottom-right-radius: 10px;
  }
  #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 {
  border-top-left-radius: 0px; border-bottom-left-radius: 0px;
  }

  #breadcrumb-isanchogives2 ul li:last-child a {
  padding-right: 80px;
  border-top-right-radius: 0px; border-bottom-right-radius: 0px;
  }


  #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;
  border-radius:0px 40px 40px 0px;
  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 содержит идентификатор, каждый идентификатор будет содержать другой стиль в таблице стилей, чтобы представить отдельный дизайн. Где мы используем нумерацию, как один, два, три, четыре.

Эти идентификаторы имеют одинаковую внутреннюю структуру, разделенную разными стилями в соответствии с их идентификатором.

Демонстрация

Хлебные крошки html: Красивые хлебные крошки (breadcrumbs) для обычного сайта и для блогов WordPress на CSS3 – Хлебные крошки на CSS и HTML

Хлебные крошки на CSS и HTML

Как сделать хлебные крошки на сайте с помощью CSS

«Хлебные крошки» как у Google

Хлебные крошки на CSS и HTML

HTML и CSS. Хлебные крошки (Breadcrumbs)

Хлебные крошки css и пагинация css как сделать

2 Альтернативный способ хлебных крошек.

Хлебные крошки breadcrumb.

Стили в main.sass.

Красивые хлебные крошки «breadcrumbs» на CSS3

Оформление хлебных крошек

Добавить комментарий Отменить ответ

Рубрики