css导航条:CSS实现导航条图片的翻转菜单来源: 发布时间:星期五, 2008年9月26日 浏览:382次 评论:0
如果用传统的方法制作这个翻转菜单,至少需要把图片切成10块,还要加上JS代码,在图片按钮上再加行为,现在完全用CSS来实现,图片只要一张,见下图:
CSS代码: 以下是引用片段: width:450px; height:25px;/*高度是背景图片的一半*/ background:url(/imagelist/06/43/473648jpj0j1.gif); list-style-type:none; padding:0px; margin:0px; } #imgmenuli{ float:left; } #imgmenulia{ display:block; width:90px; height:25px; } #imgmenuli#homea:hover,#activeh{ background:url(/imagelist/06/43/473648jpj0j1.gif)0-25px; /*翻转时背景图的位置,左边0px,顶部-25px, 背景图的下半部分,下同*/ } #imgmenuli#abouta:hover,#activea{ background:url(/imagelist/06/43/473648jpj0j1.gif)-90px-25px; /*第二个菜单的位置距左边90px, 每个菜单的宽度是90px*/ } #imgmenuli#proa:hover,#activep{ background:url(/imagelist/06/43/473648jpj0j1.gif)-180px-25px; } #imgmenuli#faqa:hover,#activef{ background:url(/imagelist/06/43/473648jpj0j1.gif)-270px-25px; } #imgmenuli#contacta:hover,#activec{ background:url(/imagelist/06/43/473648jpj0j1.gif)-360px-25px; } 以下是引用片段: 设计的更体贴,照顾纯文本浏览的朋友: 可以在LI内套入SPAN元素,加入文本链接,在风格中设SPAN不可见。 0
相关文章读者评论发表评论 |