利用UL、Li+CSS屬性制作無表格實(shí)用菜單導(dǎo)航效果

2024-07-11 08:29:13

字體：大中小

供稿：網(wǎng)友

當(dāng)項(xiàng)目列表的項(xiàng)目符號(hào)可以通過list-style-type設(shè)置為none時(shí)，制作各式各樣的菜單、導(dǎo)航條成了項(xiàng)目列表的最大用處之一，通過各種CSS屬性變換可以達(dá)到很多意想不到的導(dǎo)航效果。本實(shí)例效果如下圖所示：

[CSS]利用UL、Li制作無表格實(shí)用菜單 - 月上西樓 - 月上西樓

建立HTML相關(guān)結(jié)構(gòu)

復(fù)制代碼

代碼如下:
<body>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Sport</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>

此時(shí)頁面的效果如下圖所示，僅僅是最普通的項(xiàng)目列表。

[CSS]利用UL、Li制作無表格實(shí)用菜單 - 月上西樓 - 月上西樓

設(shè)置整個(gè)<div>塊的寬度為固定像素，并且設(shè)置文字的字體。設(shè)置項(xiàng)目列表<ul>的屬性，將項(xiàng)目符號(hào)設(shè)置為不顯示。

復(fù)制代碼

代碼如下:
<style type="text/css">
#navigation{
width:200px;
font-family:Arial;
}
#navigation ul{
list-style-type:none; /* 不顯示項(xiàng)目符號(hào) */
margin:0px;
padding:0px;
}
</style>

通過以上設(shè)置后，項(xiàng)目列表顯示為普通的超鏈接列表，如圖所示：

[CSS]利用UL、Li制作無表格實(shí)用菜單 - 月上西樓 - 月上西樓

接下來為<li>標(biāo)記添加下劃線，以分割各個(gè)超鏈接，并且對(duì)超鏈接<a>標(biāo)記進(jìn)行整體設(shè)置，代碼如下：

復(fù)制代碼

代碼如下:
#navigation li{
border-bottom:1px solid #ED9F9F; /* 添加下劃線 */
}
#navigation li a{
display:block; /* 區(qū)塊顯示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左邊的粗紅邊 */
border-right:1px solid #711515; /* 右側(cè)陰影 */
}

以上代碼中需要特別說明的是“display:block”語句，通過該語句，超鏈接被設(shè)置成了塊元素，當(dāng)鼠標(biāo)指針進(jìn)入該塊的任何部分時(shí)都會(huì)被激活，而不是僅僅在文字上方時(shí)才被激活。此時(shí)顯示效果如下圖：

上一篇：csshover.htc在IE7下使用:active偽類無效解決方法

下一篇：SELECT在瀏覽器中相關(guān)Bug整理