查看演示 下载源码
HTML结构非常简单，一个有序列表ol，外面又
面包屑导航条的结构，我们给ol加上class样式为：.cd-breadcrumb，那么当前位置的层级li加上class样式为：.current。
多步骤指示的结构，我们给ol加上class样式为：.cd-multi-steps，已完成的步骤的li加上class样式：.visited，当前步骤li加上class样式：.current。
首先，我们使用::after伪元素来创建分隔符元素，就是层级之间的分割。
.cd-breadcrumb li::after, .cd-multi-steps li::after { display: inline-block; content: '\00bb'; margin: 0 .6em; color: #959fa5;}如果我们需要使用自定义的分隔符，可以自定义样式 .custom-separator，并将样式添加到
完了分隔符的样式.custom-separator这样写：
.cd-breadcrumb.custom-separator li::after, .cd-multi-steps.custom-separator li::after { /* replace the default separator with a custom icon */ content: ''; height: 16px; width: 16px; background: url(../img/cd-custom-separator.svg) no-repeat center center; vertical-align: middle;}如果你像给面包屑导航和分步骤指示加上小图标，可以这些写样式，本例中我们使用svg文件来作图标处理。
.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;}当然，我们也可以将三角形箭头设置成分隔符，代码如下：
.cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > *::after { /* li > *::after is the colored triangle after each item li::after is the white separator between two items */ content: ''; position: absolute; top: 0; left: 100%; content: ''; height: 0; width: 0; /* 48px is the height of the element */ border: 24px solid transparent; border-right-width: 0; border-left-width: 20px; } .cd-breadcrumb.triangle li::after { /* this is the white separator between two items */ z-index: 1; -webkit-transform: translateX(4px); -moz-transform: translateX(4px); -ms-transform: translateX(4px); -o-transform: translateX(4px); transform: translateX(4px); border-left-color: #ffffff; /* reset style */ margin: 0; } .cd-breadcrumb.triangle li > *::after { /* this is the colored triangle after each element */ z-index: 2; border-left-color: inherit; } .cd-breadcrumb.triangle li:last-of-type::after, .cd-breadcrumb.triangle li:last-of-type > *::after { /* hide the triangle after the last step */ display: none; }对于分步骤指示我们还可以添加class如：.text-center, .text-top和 .text-bottom来让文字的位置对齐，还可以添加class如count用来标记步骤数，如以下代码：
各种添加的样式具体可以看演示demo，我们的demo中给出9种不同的示例，查看页面源代码你就会有收获。
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
