CSS 導航欄
下面我們就來定制下自己的導航欄.
垂直導航欄:
首先我們以列表的形式作為最基礎的承載,然后我們再其中加入本地或外部的鏈接,就像下面這樣:
<ul> <li><a href="http://ipnx.cn">php中文網(wǎng) link</a></li> <li><a href="http://ipnx.cn">php中文網(wǎng) link</a></li> <li><a href="http://ipnx.cn">php中文網(wǎng) link</a></li> <li><a href="http://ipnx.cn">php中文網(wǎng) link</a></li> </ul>
然后我們就會得到這樣的效果:
我們一般看見的導航欄都沒有下劃線,和前面的帶點,并且當我們的鼠標移到鏈接上面時鏈接的顏色會發(fā)生相應的變化,這就是我們現(xiàn)在要讓 CSS 實現(xiàn)的效果.
首先,我們要去掉前面的點
ul{ list-style: none;
}接下來我們就去掉下劃線(不管是未被點擊的狀態(tài)還是已被點擊的狀態(tài)都去掉),然后加上個背景顏色,再將其顯示作為塊來顯示:
a:link,a:visited{ text-decoration: none; background-color: lightgray; display: block;
}最后我們再給導航欄加個鼠標移動到上面時,改變背景顏色:
a:active,a:hover{ background-color: cadetblue;
}下面就是效果圖
垂直的效果圖講完之后,我們再來講講水平的導航欄,我們就只需要修改 CSS 文件就可以了.
首先我們要將前面的顯示效果刪除,就是這句:
display: block;
然我們只需要在 li 標簽中改變顯示方式就可以:
li{ display: inline;
}這樣就可以實現(xiàn)水平導航欄
我們可以根據(jù)自己的喜好,設置邊距,字體,顏色等等.這里我么不就不再一一的講述.
