div+css實現(xiàn)帶箭頭的面包屑導(dǎo)航欄

2024-07-11 08:41:52

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

制作漂亮美觀的面包屑導(dǎo)航欄

在開始之前，我要照例給大家科普一下啥叫面包屑導(dǎo)航欄

類似于下面這幾種的

主頁>欄目頁>文章頁面

主頁/欄目頁/文章頁面

可以告訴訪問者他們目前在網(wǎng)站中的位置以及如何返回的DOM叫面包屑導(dǎo)航欄

但是。。。。。。

你不覺得這個不好看嗎？

如果哪一天，你們公司的UI給你一張圖，圖里的面包屑導(dǎo)航欄是這樣的

這樣的

又或者是其他帶圖案的面包屑導(dǎo)航欄，這時候應(yīng)該怎么做？

可能有朋友說這個簡單，so easy，直接找個圖案給導(dǎo)航欄加background就行了

可是，真的有這么簡單嗎？好，廢話不多說，讓我們直接開始動手實踐一下，看到底該如何完成這種高顏值的面包削導(dǎo)航欄

1、先用無序列表做一個導(dǎo)航欄，代碼如下

<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差不多。接下來就開始將我們選中的背景圖放上去，就是下面這張圖

給導(dǎo)航欄里面的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;            }

這時候的頁面效果是這樣子的

納尼？這有點不對啊？導(dǎo)演，這劇本有問題啊！

確實是有問題，但是問題在哪？

上下圖一對比，問題出在哪里立刻就清楚了，每一個導(dǎo)航（除了最后一個）的>是堆在緊鄰的下一個導(dǎo)航的身上的，那么這個時候，我們只需要給li標(biāo)簽加一個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的寬度，加上之后，我們的面包屑導(dǎo)航欄就變成了這個樣子

咦？我們的箭頭呢？

說好的箭頭呢？

第1-4的箭頭去哪了？

讓我們再次倒回上一步操作，我們上一步操作是給li標(biāo)簽加margin-left：-15px;

前端的東西有個特性，后面寫的屬性通常會覆蓋前面的屬性，而dom結(jié)構(gòu)雖然不會覆蓋，但是當(dāng)兩者位置重疊時，在沒有加z-index屬性之前，或者該屬性值相等的時候，后寫的dom結(jié)構(gòu)會在上面

這里也正是這種情況，所以我們只需要在li標(biāo)簽上，單獨加上不同的z-index即可（要想要z-index屬性生效，必須先加定位，position:relative）

這里對z-index的值沒有多少限制，但只有一點，那就是最后一個li標(biāo)簽是最小的，以此類推，逐漸遞增，第一個是最大的。

最終代碼是這樣子的

<!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>