DIVCSS图形菜单之仿DreamWeaver_DIV+CSS实例

教程Tag：暂无Tag,欢迎添加,赚取U币!

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

HTML代码：

示例代码 [www.mb5u.com]

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

示例代码 [www.mb5u.com]

hidefocus="true"

CSS代码：

示例代码 [www.mb5u.com]

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

看最终的运行效果：

代码调试框 [www.mb5u.com]

<!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://p1.mb5u.com/divcss/1.gif" alt="A" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/2.gif" alt="B" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/3.gif" alt="C" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/4.gif" alt="D" align="absmiddle" /></li>
    <li><img src="http://p1.mb5u.com/divcss/m.gif" alt="M" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/5.gif" alt="E" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/6.gif" alt="F" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/7.gif" alt="G" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/8.gif" alt="H" align="absmiddle" /></li>
    <li><img src="http://p1.mb5u.com/divcss/m.gif" alt="M" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/9.gif" alt="I" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/10.gif" alt="J" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/11.gif" alt="K" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/12.gif" alt="L" align="absmiddle" /></li>
  </ul>
</div>
<p style="clear:both"></p>
子鼠2007年06月13日晚
</body>
</html>

[ 可先修改部分代码再运行查看效果 ]

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