DIV CSS图形菜单之仿DreamWeaver - WEB前端(UI)

问题点数：0 回复次数：0

DIV CSS图形菜单之仿DreamWeaver

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

" border="0" />

[bold]HTML代码：[/bold]

" border="0" /> Example Source Code

<p id="info">
<ul>
<li><ahref="#" hidefocus="true"><imgsrc="http://www. alt="A"align="absmiddle" /></a></li>
<li><ahref="#" hidefocus="true"><imgsrc="http://www. alt="B"align="absmiddle" /></a></li>
<li><ahref="#" hidefocus="true"><imgsrc="http://www. alt="C"align="absmiddle" /></a></li>
<li><ahref="#" hidefocus="true"><imgsrc="http://www. alt="D"align="absmiddle" /></a></li>
<li><img src="http://www. alt="M" align="absmiddle" /></li>
<li><ahref="#" hidefocus="true"><imgsrc="http://www. alt="E"align="absmiddle" /></a></li>
<li><ahref="#" hidefocus="true"><imgsrc="http://www. alt="F"align="absmiddle" /></a></li>
<li><ahref="#" hidefocus="true"><imgsrc="http://www. alt="G"align="absmiddle" /></a></li>
<li><ahref="#" hidefocus="true"><imgsrc="http://www. alt="H"align="absmiddle" /></a></li>
<li><img src="http://www. alt="M" align="absmiddle" /></li>
<li><ahref="#" hidefocus="true"><imgsrc="http://www. alt="I"align="absmiddle" /></a></li>
<li><ahref="#" hidefocus="true"><imgsrc="http://www. alt="J"align="absmiddle" /></a></li>
<li><ahref="#" hidefocus="true"><imgsrc="http://www. alt="K"align="absmiddle" /></a></li>
<li><ahref="#" hidefocus="true"><imgsrc="http://www. alt="L"align="absmiddle" /></a></li>
</ul>
</p>

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

" border="0" /> Example Source Code

hidefocus="true"

[bold]CSS代码：[/bold]

" border="0" /> Example Source Code

*{ margin:0; padding:0; list-style:none; border:none; line-height:1.8;}

#info{ background:#5F768B; padding:10px;}
#infoul{background:url(

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

) no-repeat left top; float:left; display:block;}
a:active{background:url(

" border="0" />)no-repeat left top; float:left; display:block;}

看最终的运行效果：

" border="0" /> Source Code to Run

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www. xmlns="http://www. http-equiv="Content-Type" c/><title>test</title><style>/*[url]www.[/url]*/*{ margin:0; padding:0; list-style:none; border:none; line-height:1.8;}#info{ background:#5F768B; padding:10px;}#infoul{background:url(

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

)no-repeat left top; float:left; display:block;}a:active{background:url(

" border="0" />)no-repeat left top; float:left; display:block;}</style></head><body><p id="info"> <ul> <li><a href="#"hidefocus="true"><imgsrc="http://www. alt="A"align="absmiddle" /></a></li> <li><a href="#"hidefocus="true"><imgsrc="http://www. alt="B"align="absmiddle" /></a></li> <li><a href="#"hidefocus="true"><imgsrc="http://www. alt="C"align="absmiddle" /></a></li> <li><a href="#"hidefocus="true"><imgsrc="http://www. alt="D"align="absmiddle" /></a></li> <li><imgsrc="http://www. alt="M"align="absmiddle" /></li> <li><a href="#"hidefocus="true"><imgsrc="http://www. alt="E"align="absmiddle" /></a></li> <li><a href="#"hidefocus="true"><imgsrc="http://www. alt="F"align="absmiddle" /></a></li> <li><a href="#"hidefocus="true"><imgsrc="http://www. alt="G"align="absmiddle" /></a></li> <li><a href="#"hidefocus="true"><imgsrc="http://www. alt="H"align="absmiddle" /></a></li> <li><imgsrc="http://www. alt="M"align="absmiddle" /></li> <li><a href="#"hidefocus="true"><imgsrc="http://www. alt="I"align="absmiddle" /></a></li> <li><a href="#"hidefocus="true"><imgsrc="http://www. alt="J"align="absmiddle" /></a></li> <li><a href="#"hidefocus="true"><imgsrc="http://www. alt="K"align="absmiddle" /></a></li> <li><a href="#"hidefocus="true"><imgsrc="http://www. alt="L"align="absmiddle" /></a></li> </ul></p><p style="clear:both"></p><a href="http://www.子鼠2007年06月13日晚</a></body></html>

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

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