首先讲一下面包屑导航为什么叫做面包屑导航，它来自于一个童话故事，这个童话故事的名字也非常有特色，叫做“汉塞尔和格莱特”，有一天他们去森林里游玩，但是走着走着发现迷路了，大家都知道，森林里都都是数，不管往哪边走，还是茫茫的一片树，于是他们在沿途走过的地方都撒下面包屑，他们利用这些面包屑帮助他们走出了森林，因此，面包屑导航的意思就是说我们去过哪些地方，以及我们如何回到我们之前的位置。
有时候我们特别需要面包屑导航，比如我们在某论坛或者某网上商城闲逛的时候，很容易被茫茫的帖子和众多的商品搞的头昏绕张，想要回去的时候，就需要借助于面包屑了，因此，面包屑在我们掌握一个网站的结构和用户更好的使用我们的网站，比如我们可以通过面包屑从帖子回到版块，然后通过版块回到首页，这就是面包屑的经典使用，比如我们可以在某网上商城中从商品界面回到商品列表界面，然后回到商品分类界面，然后重新查看其它的分类。
下面让我们看看我刚才做出来的这个面包屑导航把：
当然，面包屑导航有很多种样式，这里我们只介绍这一种，而且它比较简单，我做它总共用了不到五分钟，不过，在做它之前，先给不懂得如何做三角形的童鞋补习一下基础知识，让您能够快速的做出自己的三角形，虽然我在自己的用css手写气泡的博客中已经指出了，但是还是重写一下这个过程，我们新建一个html文件，书写内容如下：
<html>
<head>
<style type="text/css">
#demo{
width: 0px;height: 0px;
border-color: #0FF #00F #F00 #933;
border-style: solid;
border-width: 50px;
}
</style>
</head>
<div id = "demo"></div>
</html>
但是实际上我们不要那么多，我们只要其中的一个三角形就可以了，于是，我们把这个边界的颜色修改一下，于是代码如下：
<html>
<head>
<style type="text/css">
#demo{
width: 0px;height: 0px;
border-color: transparent transparent transparent #933;
border-style: solid;
border-width: 50px;
}
</style>
</head>
<div id = "demo"></div>
</html>于是我们看到的界面如下：
上面既然我们学会了制作三角形，那么下面我们就开始做我们的面包屑把，其实这个时候读者完全可以自己考虑试一下制作了，因为最重要的知识已经讲完了，当然直接看我的教程也不错奥。
第一步，就是先新建一个html文件，把主要内容写进去，这个文件我们直到最后都不用去修改它，读者如果没有把握，不要自行修改奥，我们在里面填写如下内容：
<html> <head> <title>辛星手写CSS面包屑</title> <link rel="stylesheet" type="text/css" href="my.css"> </head> <div class = "nav"> <ul> <li><a href="#">网站首页</a><em></em><i></i></li> <li><a href="">手机专柜</a><em></em><i></i></li> <li><a href="">三星专栏</a></li> </ul> </div> </html>第二步，我们新建一个my.css文件，然后我们需要干什么呢，我们先把列表前面的小圆点去掉，然后设置一下margin和padding，代码如下：
*{margin: 0px;padding: 0px;}
.nav ul{list-style-type: none;}
第三步，但是现在我们发现我们的列表是竖向排列的，下面我们让他们向左浮动就可以横向排列了，于是我们添加之后代码如下：
*{margin: 0px;padding: 0px;}
.nav ul{list-style-type: none;}
.nav ul li{float: left;}
第四步，我们发现一个问题就是所有的列表都挤到一起了，什么原因呢，因为我们没有设置这些列表的大小，下面我们设置其宽度，并且我们设置一下字体布局，让他们居中：
*{margin: 0px;padding: 0px;}
.nav ul{list-style-type: none;}
.nav ul li{float: left;
width: 200px;text-align: center;
}第五步，我们就开始设置这个nav的背景了，因为我们要一个棕色的背景色，并且我们设置好它的宽度和高度以及字体大小，我们添加一些代码，它变成如下样式：
*{margin: 0px;padding: 0px;}
.nav{background-color: #933;
width: 600px;height: 32px;
line-height: 32px;
}
.nav ul{list-style-type: none;}
.nav ul li{float: left;
width: 200px;text-align: center;
}
*{margin: 0px;padding: 0px;}
.nav{background-color: #933;
width: 600px;height: 32px;
line-height: 32px;
}
.nav ul{list-style-type: none;}
.nav ul li{float: left;
width: 200px;text-align: center;
}
.nav ul li a{
color:black;
text-decoration:none;
}第七步，我们就开始做我们的箭头了，直到这里，我们并没有用到我们的新知识，下面，我们先构造一个空白的三角形出来，它需要用到绝对定位，我们知道，如果一个子元素用到了绝对定位，那么父元素一定要使用定位才行，于是，我们在所有的li里面加入一条：position：relative，它不为别的，就是为了能够让子元素显示出来，代码如下：
*{margin: 0px;padding: 0px;}
.nav{background-color: #933;
width: 600px;height: 32px;
line-height: 32px;
}
.nav ul{list-style-type: none;}
.nav ul li{float: left;
position: relative;
width: 200px;text-align: center;
}
.nav ul li a{
color:black;
text-decoration:none;
}第八步，我们先加入一个空白的三角形，我们上面已经知道了怎么去做三角形了，于是这里我们就是做一个白色的三角形就可以了，但是，需要注意的是，它的定位上，我们需要让它向右偏移24个像素才行，为什么呢，因为我们要设置这个三角形的边框是24个像素，于是我们添加代码如下：
*{margin: 0px;padding: 0px;}
.nav{background-color: #933;
width: 600px;height: 32px;
line-height: 32px;
}
.nav ul{list-style-type: none;}
.nav ul li{float: left;
position: relative;
width: 200px;text-align: center;
}
.nav ul li a{
color:black;
text-decoration:none;
}
.nav ul li em{
width: 0px;height: 0px;
border-color: transparent transparent transparent #FFF;
border-style: solid;
border-width: 24px;
position: absolute;
right: -24px;top: -8px;
}第九步，上一步我们添加了一个白色的三角形，现在的效果图如下：
第十步，我们就开始添加一个棕色的三角形，值得注意的是它需要向左移动8个像素，我们这里设置其大小为16px，于是，代码如下；
*{margin: 0px;padding: 0px;}
.nav{background-color: #933;
width: 600px;height: 32px;
line-height: 32px;
}
.nav ul{list-style-type: none;}
.nav ul li{float: left;
position: relative;
width: 200px;text-align: center;
}
.nav ul li a{
color:black;
text-decoration:none;
}
.nav ul li em{
width: 0px;height: 0px;
border-color: transparent transparent transparent #FFF;
border-style: solid;
border-width: 24px;
position: absolute;
right: -24px;top: -8px;
}
.nav ul li i{
width: 0px;height: 0px;
border-color: transparent transparent transparent #933;
border-width: 16px;
border-style: solid;
position: absolute;
right:-8px;top: 0px;
}
好啦，一个简单的面包屑就做好了，如果我们配合Javascript的知识，会做的更好看，这里我们就不介绍啦，喜欢吗？？有什么问题请留言，我会耐心解释的。
原文地址：http://blog.csdn.net/xinguimeng/article/details/38069269
