CSS 实现面包屑导航

面包屑导航（Bread Crumbs Navigation）是一种辅助和补充的导航方式，非常适合展示站点的层级关系，能帮助用户明确当前所处的位置，并方便地提供返回的路径。

面包屑的概念来自童话故事“汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，为了不在森林里迷路，他们就在沿途走过的地方都撒下面包屑，让这些面包屑帮助他们找到回家的路。

由此可知，面包屑导航可以让用户清楚了解当前所处位置，以及当前页面在整个网站中的位置，并帮助用户快速学习和了解网站内容和组织方式，从而形成很好的位置感，还能提供返回各个层级的快速入口，方便用户操作，提高用户体验，从而降低网站的跳出率。

更重要的是，面包屑导航对网站的SEO非常有利，因为它增强了网站的内链建设，搜索引擎蜘蛛只需沿着这个链实施抓取就可以了，非常方便。

最常见的面包屑导航是横向的文字链接，并用大于号“>”分开，这个符号也暗示了链接之间的层级关系。当然，也可以使用其他符号，如 “»”、“/”、“→”等，选择什么符号主要取决于网站的美学设计。

面包屑导航的制作方法非常简单，只需创建一个容器，并在容器中创建面包屑导航的链接即可。为了方便应用样式，可以把大于号放在 span 元素中。

1. class="breadcrumbs">
2.     href="#">买房无忧>
3.     href="#">上海二手房>
4.     href="#">发布出售房源

由于导航中的所有链接都在一行内水平显示，为了美观，将容器的高度和行高设置为相同的值，以便容器中的内容能够垂直居中。

1. .breadcrumbs {
2.      height: 36px;
3.      line-height: 36px;
4. }

由于面包屑是一种辅助导航，在页面中，它不应该起支配作用。因此，链接文本不应该太突出，也相对较小。可以将整个导航中文本的颜色设置为浅黑色，字体大小设置为 12px，字体设置为宋体。

1. .breadcrumbs {
2.     color: #666;
3.     font-size: 12px;
4.     font-family: simsun;
5. }

并将链接的颜色也设置为浅黑色，并去掉链接的默认下划线。当用户鼠标悬停在链接上时，通过改变链接的颜色，来提醒用户。

1. .breadcrumbs a {
2.     color: #666;
3.     text-decoration: none;
4. }
5. .breadcrumbs a:hover {
6.     color: #f60;
7. }

此时预览，发现链接文本和大于号挤在一起，影响美观。可以通过 span 元素的外边距，让链接文本和大于号之间保持适当的距离。

1. .breadcrumbs span {
2.     margin: 0 10px;
3. }

至此，面包屑导航基本制作完成。运行结果如图 6‑7 所示：

图6-7 面包屑导航

从上图可以看出，整个导航中只包含文本，略显单调。可以在整个导航的开头添加一幅表示主页的图像，来丰富链接的内容，使它不至于那么单调。可以通过一个 img 元素来直接插入图像，也可以通过容器的背景图像来间接插入图像。

两种方法的效果完全相同，只是方法不同而已，这里使用背景图像。要为容器添加背景图像，还要为容器设置左内边距，来为背景图像腾出空间，以防背景图像和文本发生重叠。

1. .breadcrumbs {
2.     …
3.     padding-left: 20px;
4.     background: url(img/home.jpg) left 10px no-repeat;
5. }

插入图像后，整个导航就不那么单调了。运行结果如图 6‑8 所示：

图6-8 面包屑导航

事实上，在实际应用中，网站的风格千变万化，面包屑导航的外观也是千变万化，但万变不离其宗，制作方法都是大同小异。比如，苹果商店的面包屑导航如图 6‑9 所示：

图6-9 苹果商店的面包屑导航

要制作这样的面包屑导航也很简单，它只是将 span 元素中的大括号用类似大括号的图像进行替换而已。这个导航实现思路也很简单：

首先，创建导航中的链接。如果一个元素中没有任何内容，其宽度就会收缩为 0，背景图像就无法显示出来。因此，要将 span 元素中的大括号用空格代替。

1. class="breadcrumbs">
2.       href="#">Shop iPod
3.       href="#">iPod Accessories
4.       href="#">Power

其次，为容器添加边框，并设置合适的圆角。

1. .breadcrumbs {
2.     …
3.     border-radius: 6px;
4.     border: 1px solid #e5e5e5;
5. }

最后，将 span 元素的 display属性设置为 inline-block，并设置宽度，再应用模拟大括号的背景图像。

1. .breadcrumbs span {
2.     margin: 0 6px;
3.     width: 20px;
4.     display: inline-block;
5.     background: url(img/crumbs_bg.png) left top no-repeat;
6. }

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。