DIV CSS图形菜单之仿DreamWeaver

时间:2007-08-02 12:06:36  来源:zishu.cn  作者:zishu
　这是为了实现一个效果，而提前作的测试代码！看起来很简单的一个东西，到这会，大约四个小时过去了。不知道是IE6的BUG；还是我自已的BUG！有人问，你的CSS里边写的太麻烦了，呵呵， 你可以用简单的方法试一试；IE6，7，FIREFOX都走一次就知道了。



HTML代码：

p css xhtml xml Example Source Code Example Source Code

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


加了hidefocus，是为了去掉点击链接时的虚线。

p css xhtml xml Example Source Code Example Source Code

hidefocus="true"


CSS代码：

p css xhtml xml Example Source Code Example Source Code

*{ 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;}


看最终的运行效果：

p css xhtml xml Source Code to Run Source Code to Run



友情提示：全选代码复制运行，您也可以先修改部分代码再运行查看效果 。


　　说实话，直到写到这里，直到我再次修改这篇文章的时候，这个BUG我才终于处理完。但正常使用是不会有问题的！
　　本文作者：zishu

文章评论

共有 位CH网友发表了评论 查看完整内容

特别推荐

最新信息