如何做成面包屑导航

￡神魔★判官ぃ 2022-07-10 04:59 209阅读 0赞

<!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>

效果图：![Center][]

[Center]: /images/20220709/c898fe79a9684745b19b74037c24c539.png