纯CSS实现面包屑式导航

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

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. }

复制代码

 

       使用：after选择器创建一个元素。使用css边框来生成一个三角形。给使用：after选择器生成的元素应用上下边框，左边框，然后把上下边框的颜色设置成透明的。在将该元素放置到合适的地方（通过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. }

复制代码

 

       设置上下边框为透明，重新设置左边框的颜色后

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

复制代码

 

使用同样的方法，在矩形框的左边渲染一个三角形样式。这一次还是设置：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. }

复制代码

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>

复制代码

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

via:http://www.cnblogs.com/submerge/archive/2014/10/22/4044341.html