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

制作漂亮美觀的面包屑導(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)文章
html+css+js實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)漸變效果
這篇文章主要介紹了html+css+js實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)漸變效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-28- 這篇文章主要介紹了純CSS實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨效果,本文圖文并茂實(shí)例代碼詳解,給大家介紹的非常詳細(xì),需要的朋友參考下吧2019-12-09
html+css 實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄功能
這篇文章主要介紹了基于html+css 實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄功能,主要就是css(級(jí)聯(lián)樣式表)對(duì)html的內(nèi)容做格式化。具體內(nèi)容詳情大家跟隨小編一起通過本文學(xué)習(xí)吧2021-04-07CSS中的導(dǎo)航欄和下拉菜單的實(shí)現(xiàn)
這篇文章主要介紹了CSS中的導(dǎo)航欄和下拉菜單的實(shí)現(xiàn)的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-18純CSS實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨滑動(dòng)效果
這篇文章主要介紹了純CSS實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨滑動(dòng)效果,需要的朋友可以參考下2018-03-29- 這篇文章主要介紹了使用CSS制作立體導(dǎo)航欄的相關(guān)資料,需要的朋友可以參考下2017-10-16
- 本篇文章主要介紹了CSS導(dǎo)航欄及彈窗示例代碼,導(dǎo)航欄和彈窗是在web中應(yīng)用很廣泛的,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-01-10
純CSS實(shí)現(xiàn)導(dǎo)航欄Tab切換效果
CSS 的強(qiáng)大之處有的時(shí)候超乎我們的想象,Tab 切換,常規(guī)而言確實(shí)需要用到一定的腳本才能實(shí)現(xiàn)。下面看看如何使用純CSS實(shí)現(xiàn)導(dǎo)航欄Tab切換效果2016-10-13CSS利用偽元素實(shí)現(xiàn)導(dǎo)航欄斜線分隔
這篇文章主要介紹了CSS利用偽元素實(shí)現(xiàn)導(dǎo)航欄斜線分隔的相關(guān)資料2016-03-14基于html和CSS3制作簡(jiǎn)單側(cè)邊導(dǎo)航欄
本篇文章給大家分享基于html和CSS3制作簡(jiǎn)單側(cè)邊導(dǎo)航欄,效果簡(jiǎn)單大方,需要的朋友可以從參考下2016-02-25