位置：GZ医疗队 > 公益纪实 > 公益站长 > 网络技术 >
仿DW的图形菜单 DIV+CSS
来源：web 作者：子鼠 点击:次 时间：2007-06-14
这是为了实现一个效果，而提前作的测试代码！看起来很简单的一个东西，到这会，大约四个小时过去了。不知道是IE6的BUG；还是我自已的BUG！有人问，你的CSS里边写的太麻烦了，呵呵， 你可以用简单的方法试一试；IE6，7，FIREFOX都走一次就知道了。
源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
/*www.zishu.cn*/
*{ margin:0; padding:0; list-style:none; border:none; line-height:1.8;}
#info{ background:#5F768B; padding:10px;}
#info ul{background:url(http://www.zishu.cn/attachments/month_0706/images/bg.gif) repeat-x left top; padding:2px 10px;height:31px;}
#info li{float:left;padding:2px;}
a:link,a:visited{ background:none;float:left;display:block; padding:4px;}
a:hover{background:url(http://www.zishu.cn/attachments/month_0706/images/on.gif) no-repeat left top; float:left; display:block;}
a:active{background:url(http://www.zishu.cn/attachments/month_0706/images/on2.gif) no-repeat left top; float:left; display:block;}
</style>
</head>
<body>
<div id="info">
<ul>
<li><a href="#" hidefocus="true"><img src="http://www.zishu.cn/attachments/month_0706/images/1.gif" alt="A" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://www.zishu.cn/attachments/month_0706/images/2.gif" alt="B" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://www.zishu.cn/attachments/month_0706/images/3.gif" alt="C" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://www.zishu.cn/attachments/month_0706/images/4.gif" alt="D" align="absmiddle" /></a></li>
<li><img src="http://www.zishu.cn/attachments/month_0706/images/m.gif" alt="M" align="absmiddle" /></li>
<li><a href="#" hidefocus="true"><img src="http://www.zishu.cn/attachments/month_0706/images/5.gif" alt="E" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://www.zishu.cn/attachments/month_0706/images/6.gif" alt="F" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://www.zishu.cn/attachments/month_0706/images/7.gif" alt="G" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://www.zishu.cn/attachments/month_0706/images/8.gif" alt="H" align="absmiddle" /></a></li>
<li><img src="http://www.zishu.cn/attachments/month_0706/images/m.gif" alt="M" align="absmiddle" /></li>
<li><a href="#" hidefocus="true"><img src="http://www.zishu.cn/attachments/month_0706/images/9.gif" alt="I" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://www.zishu.cn/attachments/month_0706/images/10.gif" alt="J" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://www.zishu.cn/attachments/month_0706/images/11.gif" alt="K" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://www.zishu.cn/attachments/month_0706/images/12.gif" alt="L" align="absmiddle" /></a></li>
</ul>
</div>
<p style="clear:both"></p>
<a href="http://www.zishu.cn/blogview.asp?logID=624" style="font-size:12px">子鼠2007年06月13日晚</a>
</body>
</html>
说实话，直到写到这里，直到我再次修改这篇文章的时候，这个BUG我才终于处理完。但正常使用是不会有问题的！
样式的属性和一般标签属性之间的关系几乎是不可预知的！