ul(專案列表)-製作無須表格的選單
阿新 • • 發佈：2019-02-10
1、Html 程式碼
<html> <head> <title>無需表格的選單</title> <style> <!-- body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial; } #navigation ul { list-style-type:none; /* 不顯示專案符號 */ margin:0px; padding:0px; } #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; /* 右側陰影 */ } #navigation li a:link, #navigation li a:visited{ background-color:#c11136; color:#FFFFFF; } #navigation li a:hover{ /* 滑鼠經過時 */ background-color:#990020; /* 改變背景色 */ color:#ffff00; /* 改變文字顏色 */ } --> </style> </head> <body> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">My Blog</a></li> <li><a href="#">Friends</a></li> <li><a href="#">Next Station</a></li> <li><a href="#">Contact Me</a></li> </ul> </div> </body> </html>
2、效果截圖
注：以上程式碼中需要特別說明的是 "display:block;" 語句， 通過該語句， 超連線被設定成了塊元素， 當滑鼠進入該塊的任何部分時都會啟用，而不僅僅在文字上方時才被啟用。