简单可扩展的CSS的面包屑
十二月 7, 2009 by zeze · Leave a Comment
原文： 简单可扩展的CSS的面包屑
译自： Simple scalable CSS based breadcrumbs
版权所有，转载请注明出处，多谢！
数天前，我正在实施面包屑在我工作的网站上。这并不是因为我真诚地相信每一个网站需要这一点，但在某些情况下，以及一些用户面包屑是可行的。无论如何，它使我的想法写一篇文章有关，因为它已经有一段时间我去年写的什么CSS相关。一个我将与大家分享是一个非常简单的问题。 它只使用一个简单的图形。 其余的是基本的CSS样式与为HTML代码无序列表。
一个我在我的项目实施工作看起来有点类似，但更为复杂的代码。更多CSS类和一个span元素，需要使它的工作。我想我坚持一个非常简单的一个，像一个苹果位使用。
HTML代码
下面是我们的HTML代码。 这是一个简单的无序列表：
<ul id="crumbs" ><li><a href="#">Home</a></li><li><a href="#">Main section</a></li><li><a href="#">Sub section</a></li><li><a href="#">Sub sub section</a></li><li>The page you are on right now</li></ul>
所有项目有联系，但您的页面上。虽然这方面的工作，我不知道是否名单是最适度结构的代码用于面包屑。我不认为有严格的规则，但我相信使用列表是一种有意义的方式，所以语义我认为这是适当的。
The CSS
下面是CSS样式：
ul, li {list-style-type:none;padding:0;margin:0;}
首先，我们重置基本清单样式的行为：隐藏典型的圆点出现在默认情况下，消除通过设置margin和padding零缩进。
#crumbs {border:1px solid #dedede;height:2.3em;}
我已经给列表中的编号称为＃屑 。我周围添加一个面包屑边界设置一个特定的高度。
#crumbs li {float:left;line-height:2.3em;padding-left:.75em;color:#777;}
所有的面包必须出现在一水平线上，所以我们给每个丽元素浮动：左 。该文本需要中心垂直排列，因此我们使用相同的行价值的高度 ，我们的名单，是2.3em高度一样。留下一些空间，以左，我们彼此之间胶粉填充添加一个左边的0.75埃姆斯 。接下来，我们添加文本的颜色。
#crumbs li a {display:block;padding:0 15px 0 0;background:url(images/crumbs.gif) no-repeat right center;}
We want to have the entire arrow area clickble.我们要在整个地区clickble箭头。 To do this we give the a element display:block .要做到这一点，我们给一个元素显示：块 。 We add the background image to the a element.我们添加背景图像的一个元素。 The image looks like this:该图像看起来像这样：
这是一个相当大的形象，但那是因为我们希望它是可伸缩的。背景图像定位的权利和垂直居中。 因此，当用户在浏览器中扩大的箭头角落文本将始终保持很好的垂直中心对齐。
#crumbs li a:link , #crumbs li a:visited {text-decoration:none;color:#777;}
添加的文字链接样式。 我用文字装饰：无隐藏强调，我已经使用了柔和的色彩只是为了提请并不过分注意这些。
#crumbs li a:hover , #crumbs li a:focus {color:#dd2c0d;}
然后，最后但并非最不重要的添加文本样式当用户盘旋的面包屑。 如果你想强调有再次出现在悬停，只需添加文字装饰：下划线 。
最终结果
相关文章
