相关文章
北京网站建设XHTML网页中加入CSS的五种方式
网站设计学网页设计与网页制作，你该做啥？
网页设计新手入门：图解Photoshop蒙版的作用与效果
网站设计关于网站制作规范的探讨
北京网站建设网页最简短的拖动对象代码实例演示
北京网站设计一组常用的弹出窗口用法总结
网站设计提高网站访问速度的终极技巧
企通互联建立用户体验过程的实用指南
北京网站建设基础知识]菜鸟建站全攻略-从入门到精通
北京网页设计如何在IE右键菜单中添加菜单项以及如何添加IE任务栏按钮
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 网站制作北京网站制作CSS实现导航条图片的翻转菜单
网站制作北京网站制作CSS实现导航条图片的翻转菜单
如果用传统的方法制作这个翻转菜单，至少需要把图片切成10块，还要加上JS代码，在图片按钮上再加行为，现在完全用CSS来实现，图片只要一张，见下图：
Www~Chinaz~com
CSS代码： Chinaz^com
#imgmenu{ 北京网站制作
width: 450px; 网站建设
height: 25px; /*高度是背景图片的一半*/ 北京网站设计 网站制作
background: url(/imagelist/06/43/473648jpj0j1.gif); 北京网站建设
list-style-type: none; 北京网站建设
padding: 0px; 网页设计
margin: 0px; 北京网站制作
} 网页设计
#imgmenu li{ 网站设计
float: left; 网站设计
} 网页设计
#imgmenu li a{ 网站制作
display: block; 网站制作
width: 90px; 网站制作
height: 25px; 北京网站建设
} 北京网页设计
#imgmenu li#home a:hover,#activeh{ 网页设计
background: url(/imagelist/06/43/473648jpj0j1.gif) 0 -25px; 网站建设
/*翻转时背景图的位置，左边0px，顶部-25px, 北京网站设计
背景图的下半部分，下同*/ 网站建设
} 企通互联
#imgmenu li#about a:hover,#activea{ 网站建设
background: url(/imagelist/06/43/473648jpj0j1.gif) -90px -25px; 网站建设网站建设
/*第二个菜单的位置距左边90px， 北京网站设计 北京网站设计
每个菜单的宽度是90px*/ 企通互联
} 网页设计
#imgmenu li#pro a:hover,#activep{ 网站制作
background: url(/imagelist/06/43/473648jpj0j1.gif) -180px -25px;
} 网站设计 北京网页设计
#imgmenu li#faq a:hover,#activef{ 企通互联
background: url(/imagelist/06/43/473648jpj0j1.gif) -270px -25px; www.qitongnet.com企通互联
北京网站制作} 网页设计
#imgmenu li#contact a:hover,#activec{ 北京网页设计
background: url(/imagelist/06/43/473648jpj0j1.gif) -360px -25px; 网页设计
}
Chinaz
<ul id="imgmenu"> 企通互联
<li id="activeh"><a href="#"></a></li>
中国站.长.站
<li id="about"><a href="#"></a></li> 网站制作
企通互联 <li id="pro"><a href="#"></a></li><li id="faq"><a href="#"></a></li>
<li id="contact"><a href="#"></a></li></ul>
可以在LI内套入SPAN元素，加入文本链接，在风格中设SPAN不可见。
