深度解析面包屑导航实现与详解

作者:jcmp      发布时间:2021-04-27      浏览量:0
什么是面包屑导航?我们来看看饿了吗和蚂蚁

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

饿了吗

蚂蚁

看了如上两个案例,大家对于面包屑导航应该就有概念了。那么在不使用任何前端框架的情况下,自己实现这个面包屑导航难吗?其实不难,今天我就教大家怎么在不使用任何前端框架的情况下,实现面包屑导航效果。

一、正文

在实现面包屑效果之前,你需要掌握 HTML + CSS 的基础知识,如果你还不知道什么是 HTML?什么是 CSS ?那么先去了解完这些基础知识。

二、总体代码

话不多说直接看代码:

三、代码解释

四、设置行

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

这里的 CSS 样式就把无序列表以行内元素呈现了,在页面上看到的效果就是所有的项都呈现在了一行。

五、设置ul 样式

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

六、设置分隔符

如上代码,是在 li 之间这是分隔符, li 的内边距设置成 8 个像素, 颜色设置成黑色,内容为 / 。这里的 \00a0 为 / 在 Unicode 中的编码,如果不加这个 Unicode 编码它就以字符呈现了。

七、设置超链接样式

这部分代码表示,找到 ul 下的 li 下的 a ( 超链接 ) 标签,并给它设置样式,样式设置为字体为绿色。

八、总结

所有的标签和样式都设置好后我们来看看效果

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