首页 > 代码库 > 辛星和您一起用纯CSS美化面包屑导航

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

2024-07-13 17:19:46   220人阅读

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

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

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


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




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


联系
我们