制作漂亮美觀的面包屑導(dǎo)航欄
在開始之前，我要照例給大家科普一下啥叫面包屑導(dǎo)航欄
類似于下面這幾種的
主頁>欄目頁>文章頁面
主頁/欄目頁/文章頁面
可以告訴訪問者他們目前在網(wǎng)站中的位置以及如何返回的DOM叫面包屑導(dǎo)航欄
但是。。。。。。
你不覺得這個不好看嗎？
如果哪一天，你們公司的UI給你一張圖，圖里的面包屑導(dǎo)航欄是這樣的
這樣的
又或者是其他帶圖案的面包屑導(dǎo)航欄，這時候應(yīng)該怎么做？
可能有朋友說這個簡單，so easy，直接找個圖案給導(dǎo)航欄加background就行了
可是，真的有這么簡單嗎？好，廢話不多說，讓我們直接開始動手實(shí)踐一下，看到底該如何完成這種高顏值的面包削導(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; } |
這時候的頁面效果是這樣子的
納尼？這有點(diǎn)不對?。繉?dǎo)演，這劇本有問題??！
新聞熱點(diǎn)
疑難解答
圖片精選
