下面我們就來自訂下自己的導(dǎo)覽列.

垂直導(dǎo)覽列:

首先我們以清單的形式作為最基礎(chǔ)的承載,然後我們再其中加入本地或外部的連結(jié),就像下面這樣:

<ul>
    <li><a href="http://miracleart.cn">php中文網(wǎng) link</a></li>
    <li><a href="http://miracleart.cn">php中文網(wǎng) link</a></li>
    <li><a href="http://miracleart.cn">php中文網(wǎng) link</a></li>
    <li><a href="http://miracleart.cn">php中文網(wǎng) link</a></li>
</ul>

然後我們就會(huì)得到這樣的效果:

我們一般看見的導(dǎo)覽列都沒有下劃線,和前面的帶點(diǎn),並且當(dāng)我們的滑鼠移到連結(jié)上面時(shí)連結(jié)的顏色會(huì)發(fā)生相應(yīng)的變化,這就是我們現(xiàn)在要讓CSS 實(shí)現(xiàn)的效果.

首先,我們要去掉前面的點(diǎn)

ul{    list-style: none;
}

接下來我們就去掉下劃線(不管是未被點(diǎn)擊的狀態(tài)還是已被點(diǎn)擊的狀態(tài)都去掉),然後加上個(gè)背景顏色,再將其顯示作為塊來顯示:

a:link,a:visited{   text-decoration: none;   background-color: lightgray;    display: block;
}

最後我們再給導(dǎo)覽列加個(gè)滑鼠移動(dòng)到上面時(shí),改變背景顏色:

a:active,a:hover{    background-color: cadetblue;
}

下面就是效果圖

垂直的效果圖講完之後,我們再來講講水平的導(dǎo)航列,我們就只需要修改CSS 文件就可以了.

#首先我們要將前面的顯示效果刪除,就是這句:

display: block;

然我們只需要在li 標(biāo)籤中改變顯示方式就可以:

li{    display: inline;
}

這樣就可以實(shí)現(xiàn)水平導(dǎo)航列

我們可以根據(jù)自己的喜好,設(shè)定邊距,字體,顏色等等.這裡我麼不就不再一一的敘述.