纯CSS实现面包屑式导航

柔光的暖阳◎ 2022-08-06 12:24 254阅读 0赞

参照着[教程][Link 1]做了一个面包屑式的导航。在这里分享一下实现方式，自己也在温习一下。首先效果如图：

![221956386835074.jpg][]

HTML代码如下：

1.  <div id="crumbs">  
    
2.          <ul>  
    
3.                  <li><a href="\#">Breadcrumb</a></li>  
    
4.          </ul>  
    
5.  </div>

复制代码

我们用一个无序列表来填充面包屑导航。每一个导航连接都相当于一个内嵌了<a>元素的<li>元素。   
  
       首先将每一个a元素渲染为蓝色的矩形框。文本居中放置，两边加上适当的内边距。设置<a>元素为相对定位。这样它的绝对定位的子元素可以相对于它来进行定位。

1.  \#crumbs ul li a \{  
    
2.          display: block;  
    
3.          float: left;  
    
4.          height: 50px;  
    
5.          background: \#3498db;  
    
6.          text-align: center;  
    
7.          padding: 30px 40px 0 40px;  
    
8.          position: relative;  
    
9.          margin: 0 10px 0 0;   
    
10.           
    
11.         font-size: 20px;  
    
12.         text-decoration: none;  
    
13.         color: \#fff;  
    
14. \}

复制代码

![222048583719482.jpg][]   
  
       使用：after选择器创建一个元素。使用css边框来生成一个三角形。给使用：after选择器生成的元素[应用][Link 2]上下边框，左边框，然后把上下边框的颜色设置成透明的。在将该元素放置到合适的地方（通过position:absolute），注意设置z-index

1.  \#crumbs ul li a:after \{  
    
2.          content: "";    
    
3.          border-top: 40px solid red;  
    
4.          border-bottom: 40px solid red;  
    
5.          border-left: 40px solid blue;  
    
6.          position: absolute; right: -40px; top: 0;  
    
7.          z-index:5;  
    
8.  \}

复制代码

![222057351836526.jpg][]   
  
       设置上下边框为透明，重新设置左边框的颜色后

1.  border-top: 40px solid transparent;  
    
2.  border-bottom: 40px solid transparent;  
    
3.  border-left: 40px solid \#3498db;

复制代码

![222059195122820.jpg][]

使用同样的方法，在矩形框的左边渲染一个三角形样式。这一次还是设置：before元素的上下边框为透明，设置左边框的颜色和页面的背景色一致，伪装成页面的一部分

1.  \#crumbs ul li a:before \{  
    
2.          content: "";    
    
3.          border-top: 40px solid transparent;  
    
4.          border-bottom: 40px solid transparent;  
    
5.          border-left: 40px solid \#d4f2ff;  
    
6.          position: absolute; left: 0; top: 0;  
    
7.  \}

复制代码

![222102412625584.jpg][]

1.  <div id="crumbs">  
    
2.          <ul>  
    
3.                  <li><a href="\#1">One</a></li>  
    
4.                  <li><a href="\#2">Two</a></li>  
    
5.                  <li><a href="\#3">Three</a></li>  
    
6.                  <li><a href="\#4">Four</a></li>  
    
7.                  <li><a href="\#5">Five</a></li>  
    
8.          </ul>  
    
9.  </div>

复制代码

![222105149802856.jpg][]

1.  \#crumbs ul li:first-child a \{  
    
2.          border-top-left-radius: 10px; border-bottom-left-radius: 10px;  
    
3.  \}  
    
4.  \#crumbs ul li:first-child a:before \{  
    
5.          display: none;   
    
6.  \}  
    
7.    
    
8.  \#crumbs ul li:last-child a \{  
    
9.          padding-right: 80px;  
    
10.         border-top-right-radius: 10px; border-bottom-right-radius: 10px;  
    
11. \}  
    
12. \#crumbs ul li:last-child a:after \{  
    
13.         display: none;   
    
14. \}  
    
15. \#crumbs ul li a:hover \{  
    
16.         background: \#fa5ba5;  
    
17. \}  
    
18.         \#crumbs ul li a:hover:after \{  
    
19.                 border-left-color: \#fa5ba5;  
    
20.         \}

复制代码

此次一个完整的面包屑导航就完成了。翻译水平还是有待提升。。。  
附上原文地址：[http://line25.com/tutorials/how- ... rumb-links-with-css][http_line25.com_tutorials_how- ... rumb-links-with-css]  
  
via:[http://www.cnblogs.com/submerge/archive/2014/10/22/4044341.html][http_www.cnblogs.com_submerge_archive_2014_10_22_4044341.html]

[Link 1]: http://www.html5cn.org/portal.php?mod=list&catid=13
[221956386835074.jpg]: http://bbs.html5cn.org/data/attachment/forum/201410/23/093140196uexv6ryz6dvx6.jpg
[222048583719482.jpg]: http://bbs.html5cn.org/data/attachment/forum/201410/23/0932414fpf0caacfji107c.jpg
[Link 2]: http://www.html5cn.org/portal.php?mod=list&catid=20
[222057351836526.jpg]: http://bbs.html5cn.org/data/attachment/forum/201410/23/093317znpy6kk6ic6k22c6.jpg
[222059195122820.jpg]: http://bbs.html5cn.org/data/attachment/forum/201410/23/093355fcrrfhgg3hergepz.jpg
[222102412625584.jpg]: http://bbs.html5cn.org/data/attachment/forum/201410/23/093431pemopowogwoowszp.jpg
[222105149802856.jpg]: http://bbs.html5cn.org/data/attachment/forum/201410/23/093457t9oesb9x3aiha7zf.jpg
[http_line25.com_tutorials_how- ... rumb-links-with-css]: http://line25.com/tutorials/how-to-create-flat-style-breadcrumb-links-with-css
[http_www.cnblogs.com_submerge_archive_2014_10_22_4044341.html]: http://www.cnblogs.com/submerge/archive/2014/10/22/4044341.html