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.

文／高華峰（簡書作者）
原文鏈接：http://www.jianshu.com/p/030a375934bf
著作權歸作者所有，轉載請聯系作者獲得授權，並標注“簡書作者”。