辛星和您一起用纯CSS美化面包屑导航

来源：互联网发布：mac一般用什么办公软件编辑：程序博客网时间：2024/06/10 23:52

首先讲一下面包屑导航为什么叫做面包屑导航，它来自于一个童话故事，这个童话故事的名字也非常有特色，叫做“汉塞尔和格莱特”，有一天他们去森林里游玩，但是走着走着发现迷路了，大家都知道，森林里都都是数，不管往哪边走，还是茫茫的一片树，于是他们在沿途走过的地方都撒下面包屑，他们利用这些面包屑帮助他们走出了森林，因此，面包屑导航的意思就是说我们去过哪些地方，以及我们如何回到我们之前的位置。

有时候我们特别需要面包屑导航，比如我们在某论坛或者某网上商城闲逛的时候，很容易被茫茫的帖子和众多的商品搞的头昏绕张，想要回去的时候，就需要借助于面包屑了，因此，面包屑在我们掌握一个网站的结构和用户更好的使用我们的网站，比如我们可以通过面包屑从帖子回到版块，然后通过版块回到首页，这就是面包屑的经典使用，比如我们可以在某网上商城中从商品界面回到商品列表界面，然后回到商品分类界面，然后重新查看其它的分类。

下面让我们看看我刚才做出来的这个面包屑导航把：

当然，面包屑导航有很多种样式，这里我们只介绍这一种，而且它比较简单，我做它总共用了不到五分钟，不过，在做它之前，先给不懂得如何做三角形的童鞋补习一下基础知识，让您能够快速的做出自己的三角形，虽然我在自己的用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的知识，会做的更好看，这里我们就不介绍啦，喜欢吗？？有什么问题请留言，我会耐心解释的。

2 0