标题:DIV CSS图形菜单之仿DreamWeaver
只看楼主
tml327
Rank: 1
等 级:新手上路
帖 子:510
专家分:0
注 册:2007-10-30
 问题点数: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我才终于处理完。但正常使用是不会有问题的!
搜索更多相关主题的帖子: CSS DIV DreamWeaver BUG 图形 
2007-11-27 14:57



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-188744-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.071001 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved