CSS 導(dǎo)航欄
下面我們就來(lái)定制下自己的導(dǎo)航欄.
垂直導(dǎo)航欄:
首先我們以列表的形式作為最基礎(chǔ)的承載,然后我們?cè)倨渲屑尤氡镜鼗蛲獠康逆溄?就像下面這樣:
<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>
然后我們就會(huì)得到這樣的效果:
我們一般看見(jiàn)的導(dǎo)航欄都沒(méi)有下劃線,和前面的帶點(diǎn),并且當(dāng)我們的鼠標(biāo)移到鏈接上面時(shí)鏈接的顏色會(huì)發(fā)生相應(yīng)的變化,這就是我們現(xiàn)在要讓 CSS 實(shí)現(xiàn)的效果.
首先,我們要去掉前面的點(diǎn)
ul{ list-style: none;
}接下來(lái)我們就去掉下劃線(不管是未被點(diǎn)擊的狀態(tài)還是已被點(diǎn)擊的狀態(tài)都去掉),然后加上個(gè)背景顏色,再將其顯示作為塊來(lái)顯示:
a:link,a:visited{ text-decoration: none; background-color: lightgray; display: block;
}最后我們?cè)俳o導(dǎo)航欄加個(gè)鼠標(biāo)移動(dòng)到上面時(shí),改變背景顏色:
a:active,a:hover{ background-color: cadetblue;
}下面就是效果圖
垂直的效果圖講完之后,我們?cè)賮?lái)講講水平的導(dǎo)航欄,我們就只需要修改 CSS 文件就可以了.
首先我們要將前面的顯示效果刪除,就是這句:
display: block;
然我們只需要在 li 標(biāo)簽中改變顯示方式就可以:
li{ display: inline;
}這樣就可以實(shí)現(xiàn)水平導(dǎo)航欄
我們可以根據(jù)自己的喜好,設(shè)置邊距,字體,顏色等等.這里我么不就不再一一的講述.
