面包屑2

这几天一直在折腾jQuery，总体觉得jQuery在处理动态效果以及表单验证方面比较强大。而jQuery在页面导航方面，实际上还是对DOM元素应用CSS样式。所以页面导航我觉得用纯CSS实现就好了。因为在某些IE浏览器下(或者你禁掉了JavaScript)，jQuery编写的菜单是不能正正常显示的。废话少说，直入正题。下面内容来自：http://www.xlnv.net/Article/base/201002/1009.html

最终效果如下，只用到一张图片：crumbs.gif

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>

所有项目有联系，但您的页面上。虽然这方面的工作，我不知道是否名单是最适度结构的代码用于面包屑。我不认为有严格的规则，但我相信使用列表是一种有意义的方式，所以语义我认为这是适当的。

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;}

所有的面包必须出现在一水平线上，所以我们给每个li元素左浮动。该文本需要中心垂直排列，因此我们使用相同的行价值的高度 ，我们的名单，是2.3em高度一样。留下一些空间，以左，我们彼此之间胶粉填充添加一个左边的0.75em 。接下来，我们添加文本的颜色。

#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. 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;}

然后，最后但并非最不重要的添加文本样式当用户盘旋的面包屑。 如果你想强调有再次出现在悬停，只需添加文字装饰:下划线 。

很明显，这个面包屑菜单的原始作者应该来自国外某人。