麵包屑導航的製作?

Tags: 網站, 麵包屑,

現在的網站都很龐大,網站頭部的麵包屑導航理所應當的成為了幫助瀏覽者確定其所在位置的標識。那麼麵包屑導航的製作原理是什麼呢,小漁這就來告訴大家。

方法/步驟

首先,我們打開自己電腦上的網頁編輯器,我以DW軟件為例。我們新建一個HTML文檔。

麵包屑導航的製作

然後我們在HTML的body部分開始寫我們的代碼。麵包屑導航是橫排的幾個文字和圖片的組合。

麵包屑導航的製作

我們可以用ul>li,或者dl>dt>dd來實現。因為這兩個都可以橫著在一行顯示。

麵包屑導航的製作

我以dl>dt>dd為例。我們在html頁面中寫入dl和dd標籤。這個導航的class我們一般使用breadcrumb,這個比較通用。

麵包屑導航的製作

我們在dd標籤中輸入部分文字。按下F12,查看不寫樣式頁面在瀏覽器中的效果。可以看到不寫樣式,三段文字是豎著排列的。

麵包屑導航的製作

我們需要讓三個dd標籤橫著排列,我們在style中將dd標籤設為行內元素。默認情況下dd是有margin-left的,我們需要將其設為0;

麵包屑導航的製作

麵包屑導航的製作

這樣一個簡單的麵包屑導航就做好了,一般導航是可以點擊的鏈接,我們可以再為其添加上a標籤。

麵包屑導航的製作

麵包屑導航的製作

相關問題答案