制作漂亮美觀的面包屑導航欄
在開始之前，我要照例給大家科普一下啥叫面包屑導航欄
類似於下面這幾種的
主頁>欄目頁>文章頁面
主頁/欄目頁/文章頁面
可以告訴訪問者他們目前在網站中的位置以及如何返回的DOM叫面包屑導航欄
但是。。。。。。
你不覺得這個不好看嗎？
如果哪一天，你們公司的UI給你一張圖，圖里的面包屑導航欄是這樣的
這樣的
又或者是其他帶圖案的面包屑導航欄，這時候應該怎么做？
可能有朋友說這個簡單，so easy，直接找個圖案給導航欄加background就行了
可是，真的有這么簡單嗎？好，廢話不多說，讓我們直接開始動手實踐一下，看到底該如何完成這種高顏值的面包削導航欄
1、先用無序列表做一個導航欄，代碼如下
<ul> <li> <a href="#">主頁</a> </li> <li> <a href="#">主頁2</a> </li> <li> <a href="#">主頁3</a> </li> <li> <a href="#">主頁4</a> </li> <li> <a href="#">主頁5</a> </li> </ul>
接下來是css代碼
body{
background:#000
}
ul{
list-style: none;
}
li{
width: 60px;
height: 50px;
line-height: 50px;
float: left;
background: #6cf;
text-align: center;
}
a{
color: #000;
text-decoration: none;
}
css代碼也沒什么特別的，就跟平常做nav差不多。接下來就開始將我們選中的背景圖放上去，就是下面這張圖
給導航欄里面的li添加背景圖片
body{
background: #000;
}
ul{
list-style: none;
margin: 100px 100px;
}
li{
width: 60px;
height: 30px;
line-height: 30px;
float: left;
background: #6cf;
text-align: center;
background: url(img/bg.png) no-repeat 100% 0;
}
a{
color: #000;
text-decoration: none;
}
這時候的頁面效果是這樣子的
納尼？這有點不對啊？導演，這劇本有問題啊！
確實是有問題，但是問題在哪？
上下圖一對比，問題出在哪里立刻就清楚了，每一個導航（除了最后一個）的>是堆在緊鄰的下一個導航的身上的，那么這個時候，我們只需要給li標簽加一個margin-left:-15px;就可以了，具體代碼如下
li{ width: 80px; height: 30px; line-height: 30px; float: left; background: #6cf; text-align: center; background: url(img/bg.png) no-repeat 100% 0; margin-left: -15px; }
由於一開的寬度沒給足夠，所以這里我稍微加了下li的寬度，加上之后，我們的面包屑導航欄就變成了這個樣子
咦？我們的箭頭呢？
說好的箭頭呢？
第1-4的箭頭去哪了？
讓我們再次倒回上一步操作，我們上一步操作是給li標簽加margin-left：-15px;
前端的東西有個特性，后面寫的屬性通常會覆蓋前面的屬性，而dom結構雖然不會覆蓋，但是當兩者位置重疊時，在沒有加z-index屬性之前，或者該屬性值相等的時候，后寫的dom結構會在上面
這里也正是這種情況，所以我們只需要在li標簽上，單獨加上不同的z-index即可（要想要z-index屬性生效，必須先加定位，position:relative）
這里對z-index的值沒有多少限制，但只有一點，那就是最后一個li標簽是最小的，以此類推，逐漸遞增，第一個是最大的。
最終代碼是這樣子的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ background: #000; } ul{ list-style: none; margin: 100px 100px; } li{ width: 80px; height: 30px; line-height: 30px; float: left; background: #6cf; text-align: center; background: url(img/bg.png) no-repeat 100% 0; margin-left: -15px; position: relative;/*保證z-index有效*/ } a{ color: #000; text-decoration: none; } </style> </head> <body> <ul> <li style="z-index: 5;"> <a href="#">主頁</a> </li> <li style="z-index: 4;"> <a href="#">主頁2</a> </li> <li style="z-index: 3;"> <a href="#">主頁3</a> </li> <li style="z-index: 2;"> <a href="#">主頁4</a> </li> <li style="z-index: 1;"> <a href="#">主頁5</a> </li> </ul> </body> </html>
這邊的話，第二個原型的導航欄其實也差不多，我把網址貼一下
http://codepen.io/anon/pen/mWYJdR