DIVCSS图形菜单之仿DreamWeaverAuthor

来源:www.w3c2.com 时间:07-11-12 点击数:

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

<div id="info">
<ul>
<li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/1.gif" alt="A" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/2.gif" alt="B" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/3.gif" alt="C" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/4.gif" alt="D" align="absmiddle" /></a></li>
<li><img src="/Files/Remoteupfile/2007-11/12/m.gif" alt="M" align="absmiddle" /></li>
<li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/5.gif" alt="E" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/6.gif" alt="F" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/7.gif" alt="G" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/8.gif" alt="H" align="absmiddle" /></a></li>
<li><img src="/Files/Remoteupfile/2007-11/12/m.gif" alt="M" align="absmiddle" /></li>
<li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/9.gif" alt="I" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/10.gif" alt="J" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/11.gif" alt="K" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/12.gif" alt="L" align="absmiddle" /></a></li>
</ul>
</div>

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

hidefocus="true"

CSS代码：

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

#info{ background:#5F768B; padding:10px;}
#info ul{background:url(/Files/Remoteupfile/2007-11/12/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(/Files/Remoteupfile/2007-11/12/on.gif) no-repeat left top; float:left; display:block;}
a:active{background:url(/Files/Remoteupfile/2007-11/12/on2.gif) no-repeat left top; float:left; display:block;}

代码测试

<!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(/Files/Remoteupfile/2007-11/12/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(/Files/Remoteupfile/2007-11/12/on.gif) no-repeat left top; float:left; display:block;}
a:active{background:url(/Files/Remoteupfile/2007-11/12/on2.gif) no-repeat left top; float:left; display:block;}
</style>
</head>
<body>
<div id="info">
  <ul>
    <li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/1.gif" alt="A" align="absmiddle" /></a></li>
    <li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/2.gif" alt="B" align="absmiddle" /></a></li>
    <li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/3.gif" alt="C" align="absmiddle" /></a></li>
    <li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/4.gif" alt="D" align="absmiddle" /></a></li>
    <li><img src="/Files/Remoteupfile/2007-11/12/m.gif" alt="M" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/5.gif" alt="E" align="absmiddle" /></a></li>
    <li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/6.gif" alt="F" align="absmiddle" /></a></li>
    <li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/7.gif" alt="G" align="absmiddle" /></a></li>
    <li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/8.gif" alt="H" align="absmiddle" /></a></li>
    <li><img src="/Files/Remoteupfile/2007-11/12/m.gif" alt="M" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/9.gif" alt="I" align="absmiddle" /></a></li>
    <li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/10.gif" alt="J" align="absmiddle" /></a></li>
    <li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/11.gif" alt="K" align="absmiddle" /></a></li>
    <li><a href="#" hidefocus="true"><img src="/Files/Remoteupfile/2007-11/12/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>

可自己修改部分样式及代码

loading... 免责声明：本站刊载此文不代表同意其说法或描述，仅为提供更多信息，也不构成任何建议。
对本文有任何异议，请联络：cipin@163.com 转载要求：作者及来源信息必需保留。转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印。

DIVCSS图形菜单之仿DreamWeaverAuthor

来源:www.w3c2.com 时间:07-11-12 点击数:

推荐导读

热门排行