ddc
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 网站建设 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计 虚拟主机 域名注册 acg王国 ACG玩家 品牌设计 上海网站建设
求创科技
网站建设
中国互联
素材出售
中国设计秀
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> xhtml+css制作不规则导航

xhtml+css制作不规则导航 (2)

来源:中国设计秀    作者:phantom    点击:484     加入收藏
关键字:css WEB标准 div xhtml
过程:

1、在浏览器中,根据li的结构表现,后面的li会覆盖住前面的li,如果宽度足够的话,是靠边在一起,那么只要利用负边距就可以实现初始状态下相互叠加的样式。margin:0 -5px ;
2、初始状态下的叠加实现了,要解决的就是:hover触发的时候,让 <a href="#" title="菜单">菜单</a> 这个放弃浮动使用定位。在这个过程中如果是要利用绝对定位话,会让有一个 z-index 的问题出现。
这个问题只体现在IE中,FF下是无问题的,可以正常显示。IE中表现出来的是最后一个li永远都会盖住前面的li,那么当鼠标经过的时候就无法完美显示了。

个人认为比较重要的几个属性

  1. li中的负边距,实现叠加效果
  2. hover中的position:relative
  3. a是内联元素,要触发haslayout,可以使用float:left来触发

以上内容或许讲得不是非常明白,不过大家可以仔细分析一下源码,然后交流一下。如果觉得好也请不要回帖说顶,收藏,谢谢之类的话,你们的点击就是对我的支持了。

0
顶一下
[1] [2]
2008-06-10 10:09:31    出处:蓝色理想
Google
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口