仿DW的图形菜单 DIV+CSS
作者：zishu 来源：zishu.cn 时间：2007-08-14 10:07:00
这是为了实现一个效果，而提前作的测试代码！看起来很简单的一个东西，到这会，大约四个小时过去了。不知道是IE6的BUG；还是我自已的BUG！有人问，你的CSS里边写的太麻烦了，呵呵， 你可以用简单的方法试一试；IE6，7，FIREFOX都走一次就知道了。
布局部分：
<div id="info">
<ul>
<li><a href="#" hidefocus="true"><img src="https://img.aspxhome.com/file/UploadPic/20078/14/200781410243936.gif" alt="A" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="https://img.aspxhome.com/file/UploadPic/20078/14/200781410243944.gif" alt="B" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="https://img.aspxhome.com/file/UploadPic/20078/14/200781410243363.gif" alt="C" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="https://img.aspxhome.com/file/UploadPic/20078/14/200781410243243.gif" alt="D" align="absmiddle" /></a></li>
<li><img src="https://img.aspxhome.com/file/UploadPic/20078/14/200781410244320.gif" alt="M" align="absmiddle" /></li>
<li><a href="#" hidefocus="true"><img src="https://img.aspxhome.com/file/UploadPic/20078/14/200781410244589.gif" alt="E" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="https://img.aspxhome.com/file/UploadPic/20078/14/200781410244272.gif" alt="F" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="https://img.aspxhome.com/file/UploadPic/20078/14/200781410244319.gif" alt="G" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="https://img.aspxhome.com/file/UploadPic/20078/14/200781410244759.gif" alt="H" align="absmiddle" /></a></li>
<li><img src="https://img.aspxhome.com/file/UploadPic/20078/14/200781410244320.gif" alt="M" align="absmiddle" /></li>
<li><a href="#" hidefocus="true"><img src="https://img.aspxhome.com/file/UploadPic/20078/14/200781410244331.gif" alt="I" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="https://img.aspxhome.com/file/UploadPic/20078/14/200781410245196.gif" alt="J" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="https://img.aspxhome.com/file/UploadPic/20078/14/200781410245666.gif" alt="K" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="https://img.aspxhome.com/file/UploadPic/20078/14/200781410245364.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(/file/UploadPic/20078/14/2007814102359117.gif) no-repeat left top; float:left; display:block;}
看一下效果吧！
说实话，直到写到这里，直到我再次修改这篇文章的时候，这个BUG我才终于处理完。但正常使用是不会有问题的！ 
样式的属性和一般标签属性之间的关系几乎是不可预知的！
0
投稿猜你喜欢
javaScript通用数据类型校验函数
使用模板实现ASP代码与页面分离
动态SQL中返回数值的实现代码
历数Firefox2.0对XML处理的改进
PHP和JS之间的数据交互并处理
IE7下 filter:Alpha(opacity=xx) 的小问题
CSS 的优先规则
W3C优质网页小贴士（三）
ASP Crazy 模版操作类(最简单的模板类、仅提供交流)
asp如何用Jmail组件的发送电子邮件？
网页布局设计基础
用户研究角度看设计（2）：用户为何视若无睹
asp三天学好ADO对象之第二天
MySQL 函数过程递归
准备SQL Server 2008透明数据加密
再谈 Web 字体的现状与未来[译]
SQL Server Bulk Insert 只需要部分字段时的方法
asp如何实现无组件上传二进制文件？
Dreamweaver MX新功能试用：连续空格
Ethnique公司logo设计过程和思路
