如何做成面包屑导航

来源：互联网发布：c语言预处理指令大全编辑：程序博客网时间：2024/05/01 21:52

<!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>无标题文档</title>
<style>
#crumbs ul li {
float: left; /*首先将列表从往垂直方向显示，变成往水平方向显示*/
list-style: none; /*并且列表前的标记设置为没有*/
}
#crumbs ul li a {
display: block;/*因为列表中的一般都是链接，在这里将每一个链接设置成块状元素*/
float: left; /*而且也是往水平方向显示*/
height: 34px;
background: #f66fa2;
text-align: center;
padding: 10px 20px 0 45px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none; /*下划线设置为不见*/
color: #fff;
}
#crumbs ul li a:after { /*在li元素之后插入*/
content: ""; /*内容为空*/
border-top: 22px solid transparent; /*这里是关键部分，边框设置为透明，边长为22px*/
border-bottom: 22px solid transparent; /*同理*/
border-left: 22px solid #f66fa2; /*左边设置可以看的见，而右边却没有设置，所以右边相当于一个点，那么三角形就可以形成了*/
position: absolute; right: -22px; top: 0;
z-index: 1;
}
#crumbs ul li a:before { /*在li元素之前插入*/
content: "";
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-left: 22px solid #fff;
position: absolute; left: 0; top: 0;
}
#crumbs ul li:first-child a {
border-top-left-radius: 5px; /*边长设置为有弧度*/
border-bottom-left-radius: 5px;
padding-left: 40px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 30px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#crumbs ul li:last-child a:after {
display: none;
}
#crumbs ul li a:hover {
background: #e56592;
transition: all 0.2s ease;
}
#crumbs ul li a:hover:after {
border-left-color: #e56592;
transition: all 0.2s ease;
}
.fixed {
clear: both;
}
</style>
</head>

<body>
<div id="crumbs">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">目录</a></li>
<li><a href="#">子目录</a></li>
</ul>
<div class="fixed"></div>
</div>
</body>

</html>

效果图：

0 0