CSS 挑战 #1 | 面包屑导航

提交

这是什么

我正在开启一个新系列，旨在通过挑战你重新创建一个建议的功能或元素来帮助你提升 CSS 技能。我只会发布一些对你构建网站或应用有帮助的内容。所以，这里没有代码高尔夫或晦涩难懂的内容。

这是一个每周挑战，所以每周一都会有一个新的作品供你搭建。此外，每周一挑战期间，我都会提供上周挑战的推荐解决方案。

如果您解决了挑战，请在评论中发布您的解决方案链接（codepens、jsfiddles 等）。

面包屑

所以第一个挑战是制作面包屑。面包屑通常用于大型网站的二级导航。

要求

• 包含单个项目的父元素应该使用nav标签
• 每个项目都使用a标签作为链接
• 每个项目都以某种方式分开，要么用文本（>或/，传统），要么用视觉（现代）
• 最后一件应该有特殊的造型

阅读更多

• SMASHING 杂志 - 网页设计中的面包屑导航：示例和最佳实践