用到的背景图片：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{padding: 0;margin: 0;}
.wrapper{
margin:100px auto;
width: 900px;
background-color: #EDEDED;
overflow: hidden;
}
ul{list-style-type:none;}
li{float:left;}
a{
position: relative;
background-position:right center;
padding: 4px 15px 4px 5px;
text-decoration: none;
display:block;
color:white;
}
#crumb1 a{background-image:url(images/crumb_1.png)}
#crumb2 a{background-image:url(images/crumb_2.png)}
#crumb3 a{background-image:url(images/crumb_3.png)}
#crumb1 a:hover,
#crumb2 a:hover,
#crumb3 a:hover{background-image:url(images/crumb_over.png)}
#crumb1 a{ z-index:3;}
#crumb2 a{ z-index:2;}
#crumb3 a{ z-index:1;}
#crumb2 a,#crumb3 a{margin-left:-20px;padding-left: 25px;}
</style>
</head>
<body>
<div class="wrapper">
<ul class="crumb-nav">
<li id="crumb1">
<a href="#">首页</a>
</li>
<li id="crumb2">
<a href="#">国内新闻</a>
</li>
<li id="crumb3">
<a href="#">时政要闻</a>
</li>
</ul>
</div>
</body>
</html>
另参考两款jquery插件：1.jquery-breadCrumb 2.jBreadCrumb
另可参参考：http://www.lendmeyourear.net/breadcrumb-navigation-with-css-arrows.html
520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
