欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時(shí)間:2017-04-06 16:33:48   作者:中二晚期   我要評(píng)論
本文主要介紹了制作漂亮美觀的帶箭頭的面包屑導(dǎo)航欄的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧

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

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

類似于下面這幾種的

主頁>欄目頁>文章頁面

主頁/欄目頁/文章頁面

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

但是。。。。。。

你不覺得這個(gè)不好看嗎?

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

這樣的

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

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

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

1、先用無序列表做一個(gè)導(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;
            }

這時(shí)候的頁面效果是這樣子的

納尼?這有點(diǎn)不對(duì)啊?導(dǎo)演,這劇本有問題啊!

確實(shí)是有問題,但是問題在哪?

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

咦?我們的箭頭呢?

說好的箭頭呢?

第1-4的箭頭去哪了?

讓我們?cè)俅蔚够厣弦徊讲僮?,我們上一步操作是給li標(biāo)簽加margin-left:-15px;

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

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

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

最終代碼是這樣子的

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

以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!

相關(guān)文章

最新評(píng)論