ul(项目列表)-制作无须表格的菜单

来源：互联网发布：薄荷瘦身软件下载编辑：程序博客网时间：2024/05/21 18:46

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;" 语句，通过该语句，超连接被设置成了块元素，当鼠标进入该块的任何部分时都会激活，而不仅仅在文字上方时才被激活。

0 0