网页制作实用教程，用CSS创建扁平化面包屑导航，随着近些年CSS与CSS3的发展，有些东西我们可以纯用CSS去实现，取代那些需要使用背景图片的老技术。在这篇教程中，我们将创建扁平化的面包屑导航链接，不再需要使用之前流行的“推拉门式的背景图片”。

我们将面包屑链接设计成类似雪佛龙的样式，表达向下获取内容的意思。过去我们用背景图片实现这一效果，现在我们将在边框border属性的帮助下，纯用CSS实现相同的效果。

第一步

1 2 3 4 5 <p id="crumbs"> <ul> <li><ahref="#">Breadcrumb</a></li> </ul> </p>

我们首先快速地利用无序列表建立一个面包屑导航链接。每一个面包屑链接都是一个 <li> 标签，嵌套一个锚元素。

第二步

1 2 3 4 5 6 7 8 9 10 11 12 13 14 #crumbs ul li a { display:block; float:left; height:50px; background:#3498db; text-align:center; padding:30px40px040px; position:relative; margin:010px00;   font-size:20px; text-decoration:none; color:#fff; }