面包屑导航
- 前言
- 饿了吗
- 蚂蚁
- 正文
- 总体代码
- 代码解释
- 设置行
- 设置ul 样式
- 设置分隔符
- 设置超链接样式
- 总结
前言
什么是面包屑导航？我们来看看饿了吗和蚂蚁的面包屑组件
饿了吗
蚂蚁
看了如上两个案例，大家对于面包屑导航应该就有概念了。那么在不使用任何前端框架的情况下，自己实现这个面包屑导航难吗？其实不难，今天我就教大家怎么在不使用任何前端框架的情况下，实现面包屑导航效果。
正文
在实现面包屑效果之前，你需要掌握 HTML + CSS 的基础知识，如果你还不知道什么是 HTML？什么是 CSS ？那么先去了解完这些基础知识。
总体代码
话不多说直接看代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>面包屑导航栏</title><style type="text/css">ul.breadcrumb {padding: 8px 16px;list-style: none;background-color: #eee;}ul.breadcrumb li {display: inline;}ul.breadcrumb li+li:before {padding: 8px;color: black;content: "/\00a0";}ul.breadcrumb li a {color: green;}</style>
</head>
<body><div><ul class="breadcrumb"><li><a href="#">首页</a></li><li><a href="#">应用中心</a></li><li><a href="#">应用列表</a></li><li>详情</li></ul></div>
</body>
<script type="text/javascript"></script>
</html>
代码解释
设置行
ul 在 HTML 中呈现的是无序列表，从上到下顺序的显示整个列表。这里我们要实现的是一个面包屑导航栏，那么就确定他是在一行呈现的，ul 目前的效果是从上下呈现的，不能满足我们的要求，那么怎么做才能让它呈现成一行呢？如下这段代码
ul.breadcrumb li {display: inline;
}
这里的 CSS 样式就把无序列表以行内元素呈现了，在页面上看到的效果就是所有的项都呈现在了一行。
设置ul 样式
ul.breadcrumb {padding: 8px 16px;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.breadcrumb li a {color: green;
}
这部分代码表示，找到 ul 下的 li 下的 a ( 超链接 ) 标签，并给它设置样式，样式设置为字体为绿色。
总结
所有的标签和样式都设置好后我们来看看效果
如上，面包屑导航栏就实现了。
![[Linux系列]Chrony时间同步服务器](https://img-blog.csdnimg.cn/159a46d9dcf34cd8a47298fa142230f9.png)
