面包屑导航实现与详解（bootstrap面包屑导航）

前言什么是面包屑导航？我们来看看饿了吗和蚂蚁的面包屑组件饿了吗

蚂蚁

看了如上两个案例，大家对于面包屑导航应该就有概念了那么在不使用任何前端框架的情况下，自己实现这个面包屑导航难吗？其实不难，今天我就教大家怎么在不使用任何前端框架的情况下，实现面包屑导航效果正文在实现面包屑效果之前，你需要掌握 HTML + CSS 的基础知识，如果你还不知道什么是 HTML？什么是 CSS ？那么先去了解完这些基础知识。

总体代码话不多说直接看代码：面包屑导航栏

>* k. Q1 m1 T7 k& r( L2 A ul.breadcrumb {7 i' j$ |, H: }& r, P1 r& O padding: 8px 16px;. X9 m& o7 I. O1 I list-style: none; 6 R [9 \6 ?9 Y background-color: #eee;) r% Z& V3 I' f* B% R5 [5 S9 | } 4 S' I: ^5 y9 j$ M. X v ul.breadcrumb li { . H; e, ~( X) N, V# N' a6 i w display: inline; 3 k$ u* x. R0 u. | o7 e }& M0 r6 w! z7 {/ y2 j ul.breadcrumb li+li:before {- |( O. [8 _8 `8 S padding: 8px; , s! o0 c1 O+ O- [4 V color: black;/ X% M1 D8 \/ N, [ content: "/\00a0";/ B0 L8 W' v7 `! b- P2 K/ L2 h }' ?- ]/ r/ B0 V) v) x% M9 Z( B, e3 D ul.breadcrumb li a { % [4 r _' H8 c* d! W( r color: green;2 J9 U# v7 A$ Q% K, ]7 e8 M }/ W O$ A4 o6 X2 } - D0 j3 O( ?& g 8 ?+ Q6 o4 q5 f4 N# o! U 2 ^' n: \8 V: \- h

代码解释设置行ul 在 HTML 中呈现的是无序列表，从上到下顺序的显示整个列表这里我们要实现的是一个面包屑导航栏，那么就确定他是在一行呈现的，ul 目前的效果是从上下呈现的，不能满足我们的要求，那么怎么做才能让它呈现成一行呢？如下这段代码。

ul.breadcrumbli{display:inline;}这里的 CSS 样式就把无序列表以行内元素呈现了，在页面上看到的效果就是所有的项都呈现在了一行设置ul 样式ul.breadcrumb{padding

:8px16px;list-style:none;background-color:#eee;}这里我们给 ul 标签设置了内边距，上下是 8 个像素，左右是 16 个像素，无序列表的列表样式设置成无( 这里 list-style 默认的是黑色的小圆圈 )，背景设置成灰色。

注意：ul.breadcrumb 之间没有空格，有空格就表示后代选择器，无空格就表示多类选择器；这里表示的是ul 本身的样式设置，如果有空格，就表示ul 下的类选择器了设置分隔符ul.breadcrumb。

li+li:before{padding:8px;color:black;content:"/\00a0";}如上代码，是在 li 之间这是分隔符，li的内边距设置成 8 个像素， 颜色设置成黑色，内容为 / 。

这里的 \00a0 为 / 在 Unicode 中的编码，如果不加这个 Unicode 编码它就以字符呈现了 :before 表示在之前插入内容，这里是在 li 之前插入内容 li+li 先不看后面的 +li，意思就是选择 ul 中所有的后代 li 元素，因为后面使用了 li+li，所以这里表示选择 ul 中第一个 li 之后所有的 li 标签。

设置超链接样式ul.breadcrumblia{color:green;}这部分代码表示，找到 ul 下的 li 下的 a ( 超链接 ) 标签，并给它设置样式，样式设置为字体为绿色总结所有的标签和样式都设置好后我们来看看效果。

如上，面包屑导航栏就实现了。