CSS 面包屑导航栏

做之前，先看一下效果图。

demo01.png

首先，书写好 ​

​HTML​

​ 代码。

<div id="crumbs">
        <ul>
            <li><a href="#">Home</a></li>
        </ul>
    </div>      

这里我们先以一个 ​

​li​

​ 标签为例。

#crumbs ul{
        list-style: none;
    }      

将列表的默认样式修改掉。

#crumbs ul li a{
        float: left;
        margin-right: 30px;
        display: inline-block;
        position: relative;
        height: 30px;
        padding: 10px 20px 0 20px;
        text-align: center;
        background-color: #3498db;
        color: #fff;
        text-decoration: none; 
        font-size: 20px;
    }      

1. 设置 ​

   ​position​

   ​ 为 ​

   ​relative​

   ​， 因为下面我们要用 ​

   ​before, after​

   ​ 绘制效果。
2. 设置高度为 ​

   ​30px​

   ​，​

   ​padding-top​

   ​10px​

   ​ ，所以这里元素的高度为 ​

   ​40px​

   ​。

这个时候的效果如下所示。

demo02.png

#crumbs ul li a:after{
        content: "";
        border-left: 20px solid green;
        border-top: 20px solid red;
        border-bottom: 20px solid red;
        position: absolute;
        right: -20px;
        top: 0;
    }      

现在的效果是这样的。

demo03.png

其实，我到现在还没明白其中的原理，为什么指定了上下左边框中间会有一个三角形出现？希望有明白原理的看到这篇文章能够解释一下。

以上颜色的设置只是为了观察，下面我们可以将上下边框设置为透明，将左边框设置为与 ​

​a​

​ 元素相同。

border-left: 20px solid #3498db;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;      

这个时候效果如下。

demo04.png

可见，效果已经出来了，利用相同的原理，我们绘制出左边的效果。

#crumbs ul li a:before{
        content: "";
        border-top: 20px solid #3498db;
        border-bottom: 20px solid #3498db; 
        border-left: 20px solid transparent;
        position: absolute;
        top: 0;
        left: -20px;
  }      

效果如下

demo05.png

好了，现在我们的效果就已经完成了，如果想要实现我们在开始时候展示的那种效果，我们就需要多写几个标签了，而且第一个元素和最后一个元素和中间的元素效果还是不一样的，下面我们来书写这段代码。

#crumbs ul li:first-child a{
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        #crumbs ul li:first-child a:before{
            display: none;
        }

        #crumbs ul li:last-child a{
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        #crumbs ul li:last-child a:after{
            display: none;
        }      

以上代码并不难懂，我就不在解释，这个时候的效果如下。

demo06.png

为了美观，最好还是为鼠标悬停设置一个背景改变的效果。

#crumbs ul li a:hover{
            background-color:#fa5ba5;
        }


        #crumbs ul li a:hover:after{
            border-left-color: #fa5ba5;
        }



        #crumbs ul li a:hover:before{
            border-top-color: #fa5ba5;
            border-bottom-color: #fa5ba5;
        }      

这个时候我们点击标签，会出现一个白色的边框，十分难看，可以在 ​

​a​

​ 元素的 ​

​style​

​ 中加上下面这行代码。

outline: none;      

Ending.