[CSS]利用UL、Li製作無表格實用菜單

07-17

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

建立HTML相關結構

<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>

此時頁面的效果如下圖所示，僅僅是最普通的項目列表。

設置整個<div>塊的寬度為固定像素，並且設置文字的字體。設置項目列表<ul>的屬性，將項目符號設置為不顯示。

通過以上設置後，項目列表顯示為普通的超鏈接列表，如圖所示：

接下來為<li>標記添加下劃線，以分割各個超鏈接，並且對超鏈接<a>標記進行整體設置，代碼如下：

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

以上代碼中需要特別說明的是「display:block」語句，通過該語句，超鏈接被設置成了塊元素，當滑鼠指針進入該塊的任何部分時都會被激活，而不是僅僅在文字上方時才被激活。此時顯示效果如下圖：

最後設置超鏈接的3個偽屬性，以實現動態菜單的效果，代碼如下：

#navigation li a:link,#navigation li a:visited{background-color:#c11136;color:#FFFFFF;}#navigation li a:hover{background-color:#990020;color:#ffff00;}

到這裡就完成了，運行一下試試，你的和下面的一樣嗎？