標籤：辛星 導航 css 麵包屑 氣泡
首先講一下麵包屑導航為什麼叫做麵包屑導航，它來自於一個童話故事，這個童話故事的名字也非常有特色，叫做“漢塞爾和格萊特”，有一天他們去森林裡遊玩，但是走著走著發現迷路了，大家都知道，森林裡都都是數，不管往哪邊走，還是茫茫的一片樹，於是他們在沿途走過的地方都撒下麵包屑，他們利用這些麵包屑協助他們走出了森林，因此，麵包屑導航的意思就是說我們去過哪些地方，以及我們如何回到我們之前的位置。
有時候我們特別需要麵包屑導航，比如我們在某論壇或者某網上商城閑逛的時候，很容易被茫茫的文章和眾多的商品搞的頭昏繞張，想要回去的時候，就需要藉助於麵包屑了，因此，麵包屑在我們掌握一個網站的結構和使用者更好的使用我們的網站，比如我們可以通過麵包屑從文章回到版塊，然後通過版塊回到首頁，這就是麵包屑的經典使用，比如我們可以在某網上商城中從商品介面回到商品列表介面，然後回到商品分類介面，然後重新查看其它的分類。
下面讓我們看看我剛才做出來的這個麵包屑導航把：
當然，麵包屑導航有很多種樣式，這裡我們只介紹這一種，而且它比較簡單，我做它總共用了不到五分鐘，不過，在做它之前，先給不懂得如何做三角形的童鞋補習一下基礎知識，讓您能夠快速的做出自己的三角形，雖然我在自己的用css手寫氣泡的部落格中已經指出了，但是還是重寫一下這個過程，我們建立一個html檔案，書寫內容如下：
<html><head><style type="text/css">#demo{width: 0px;height: 0px;border-color: #0FF #00F #F00 #933;border-style: solid;border-width: 50px;}</style></head><div id = "demo"></div></html>
但是實際上我們不要那麼多，我們只要其中的一個三角形就可以了，於是，我們把這個邊界的顏色修改一下，於是代碼如下：
<html><head><style type="text/css">#demo{width: 0px;height: 0px;border-color: transparent transparent transparent #933;border-style: solid;border-width: 50px;}</style></head><div id = "demo"></div></html>於是我們看到的介面如下：
上面既然我們學會了製作三角形，那麼下面我們就開始做我們的麵包屑把，其實這個時候讀者完全可以自己考慮試一下製作了，因為最重要的知識已經講完了，當然直接看我的教程也不錯奧。
第一步，就是先建立一個html檔案，把主要內容寫進去，這個檔案我們直到最後都不用去修改它，讀者如果沒有把握，不要自行修改奧，我們在裡面填寫如下內容：
<html><head><title>辛星手寫CSS麵包屑</title><link rel="stylesheet" type="text/css" href="my.css"></head><div class = "nav"><ul><li><a href="#">網站首頁</a><em></em><i></i></li><li><a href="">手機專櫃</a><em></em><i></i></li><li><a href="">三星專欄</a></li></ul></div></html>第二步，我們建立一個my.css檔案，然後我們需要幹什麼呢，我們先把列表前面的小圓點去掉，然後設定一下margin和padding，代碼如下：
*{margin: 0px;padding: 0px;}.nav ul{list-style-type: none;}第三步，但是現在我們發現我們的列表是豎向排列的，下面我們讓他們向左浮動就可以橫向排列了，於是我們添加之後代碼如下：
*{margin: 0px;padding: 0px;}.nav ul{list-style-type: none;}.nav ul li{float: left;}
第四步，我們發現一個問題就是所有的列表都擠到一起了，什麼原因呢，因為我們沒有設定這些列表的大小，下面我們設定其寬度，並且我們設定一下字型布局，讓他們置中：
*{margin: 0px;padding: 0px;}.nav ul{list-style-type: none;}.nav ul li{float: left; width: 200px;text-align: center;}第五步，我們就開始設定這個nav的背景了，因為我們要一個棕色的背景色，並且我們設定好它的寬度和高度以及字型大小，我們添加一些代碼，它變成如下樣式：
*{margin: 0px;padding: 0px;}.nav{background-color: #933;width: 600px;height: 32px;line-height: 32px;}.nav ul{list-style-type: none;}.nav ul li{float: left; width: 200px;text-align: center;}
*{margin: 0px;padding: 0px;}.nav{background-color: #933;width: 600px;height: 32px;line-height: 32px;}.nav ul{list-style-type: none;}.nav ul li{float: left; width: 200px;text-align: center;}.nav ul li a{color:black;text-decoration:none;}第七步，我們就開始做我們的箭頭了，直到這裡，我們並沒有用到我們的新知識，下面，我們先構造一個空白的三角形出來，它需要用到絕對位置，我們知道，如果一個子項目用到了絕對位置，那麼父元素一定要使用定位才行，於是，我們在所有的li裡面加入一條：position：relative，它不為別的，就是為了能夠讓子項目顯示出來，代碼如下：
*{margin: 0px;padding: 0px;}.nav{background-color: #933;width: 600px;height: 32px;line-height: 32px;}.nav ul{list-style-type: none;}.nav ul li{float: left; position: relative;width: 200px;text-align: center;}.nav ul li a{color:black;text-decoration:none;}第八步，我們先加入一個空白的三角形，我們上面已經知道了怎麼去做三角形了，於是這裡我們就是做一個白色的三角形就可以了，但是，需要注意的是，它的定位上，我們需要讓它向右位移24個像素才行，為什麼呢，因為我們要設定這個三角形的邊框是24個像素，於是我們添加代碼如下：
*{margin: 0px;padding: 0px;}.nav{background-color: #933;width: 600px;height: 32px;line-height: 32px;}.nav ul{list-style-type: none;}.nav ul li{float: left; position: relative;width: 200px;text-align: center;}.nav ul li a{color:black;text-decoration:none;}.nav ul li em{width: 0px;height: 0px;border-color: transparent transparent transparent #FFF;border-style: solid;border-width: 24px;position: absolute;right: -24px;top: -8px;}第九步，上一步我們添加了一個白色的三角形，現在的如下：
第十步，我們就開始添加一個棕色的三角形，值得注意的是它需要向左移動8個像素，我們這裡設定其大小為16px，於是，代碼如下；
*{margin: 0px;padding: 0px;}.nav{background-color: #933;width: 600px;height: 32px;line-height: 32px;}.nav ul{list-style-type: none;}.nav ul li{float: left; position: relative;width: 200px;text-align: center;}.nav ul li a{color:black;text-decoration:none;}.nav ul li em{width: 0px;height: 0px;border-color: transparent transparent transparent #FFF;border-style: solid;border-width: 24px;position: absolute;right: -24px;top: -8px;}.nav ul li i{width: 0px;height: 0px;border-color: transparent transparent transparent #933;border-width: 16px;border-style: solid;position: absolute;right:-8px;top: 0px;}
好啦，一個簡單的麵包屑就做好了，如果我們配合Javascript的知識，會做的更好看，這裡我們就不介紹啦，喜歡嗎？？有什麼問題請留言，我會耐心解釋的。
辛星和您一起用純CSS美化麵包屑導航
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
