乐者为王

Do one thing, and do it well.

使用CSS创建可伸缩的面包屑

面包屑是一个用来描述层次性链接的术语,告诉用户当前处于网站的什么位置。简单的来说,就是显示从主页到当前页面路径的导航模式。其最简单的形式通常是这样的:

css-breadcrumbs

有许多种不同的方法来实现面包屑。在这里,我们仅使用无序列表和基本的CSS样式。

以下是HTML代码:

1
2
3
4
5
6
7
<ul id="breadcrumbs">
  <li><a href="#">Home</a> > </li>
  <li><a href="#">Main</a> > </li>
  <li><a href="#">Sub</a> > </li>
  <li><a href="#">Sub sub</a> > </li>
  <li>Current page</li>
</ul>

在上述的例子中,除了用户当前所在的页面——即最后一个条目外,其它所有的条目都是链接,指向路径中的某个页面。

如果你试着在浏览器中查看上面的这个例子,你会发现它只是一个简单的无序列表。必须给它添加一些CSS样式才能符合我们的预期。

下面是CSS代码:

1
2
3
4
5
ul, li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

首先我们要重置基本列表样式的行为:把默认的圆形条目符号隐藏掉,并移除缩进。

1
2
3
4
5
6
7
8
9
10
#breadcrumbs {
  height: 2.3em;
}

#breadcrumbs li {
  float: left;
  line-height: 2.3em;
  padding-left: .25em;
  color: #777;
}

然后,给面包屑设置一个具体的高度。因为所有的碎屑需要保持在同一水平线,所以我们把每个li元素设置成float: left。为保证条目的垂直居中对齐,需要把条目的行高设置成和列表相等。碎屑之间需要留些空间,不然的话就会太拥挤,因此我们给每个碎屑左边加上0.25em的填充。

1
2
3
4
5
6
7
8
#breadcrumbs li a:link, #breadcrumbs li a:visited {
  text-decoration: none;
  color: #777;
}

#breadcrumbs li a:hover, #breadcrumbs li a:focus {
  color: #dd2c0d;
}

最后,给文本链接添加样式,使用text-decoration: none隐藏掉下划线。

Comments