当前位置：首页 → 问答吧 → 求助一个menu

求助一个menu

时间：2009-06-21

来源：互联网

本帖最后由 carpocirou 于 2009-6-22 13:58 编辑

各位好我在做一个这样的导航的时候碰到了困难。因为各个menu之间的宽度不一样造成了困扰，特来求助。是要求用背景图实现以下是我的源码
<!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>无标题文档</title>
<style>
* {margin:0; padding:0; font-size:12; list-style-type:none; }
#mini_nav {width:1003px; height:28px; margin:0px auto; background:url(nav2.jpg) no-repeat 0 0; overflow:hidden;}
/*#mini_nav li {width:156px; height:28px; float:left;}
#mini_nav li a {display:block; width:156px; height:28px; padding-top:40px; overflow:hidden;}*/

#nini_nav li.nav1{ width:156px; height:28px; float:left}
#mini_nav li.nav1 a {display:block; width:156px; height:28px; padding-top:40px; overflow:hidden;}

#nini_nav li.nav2{ width:154px; height:28px; float:left}
#mini_nav li.nav2 a {display:block; width:154px; height:28px; padding-top:40px; overflow:hidden;}

#nini_nav li.nav3{ width:154px; height:28px; float:left}
#mini_nav li.nav3 a {display:block; width:154px; height:28px; padding-top:40px; overflow:hidden;}

#nini_nav li.nav4{ width:140px; height:28px; float:left}
#mini_nav li.nav4 a {display:block; width:140px; height:28px; padding-top:40px; overflow:hidden;}

#nini_nav li.nav5{ width:152px; height:28px; float:left}
#mini_nav li.nav5 a {display:block; width:152px; height:28px; padding-top:40px; overflow:hidden;}

#nini_nav li.nav6{ width:244px; height:28px; float:left}
#mini_nav li.nav6 a {display:block; width:244px; height:28px; padding-top:40px; overflow:hidden;}

#mini_nav li a:hover {background:url(nav2.jpg) no-repeat;}
#mini_nav li.nav1 a:hover {background-position:0 -28px;}
#mini_nav li.nav2 a:hover {background-position:-156px -28px;}
#mini_nav li.nav3 a:hover {background-position:-312px -28px;}
#mini_nav li.nav4 a:hover {background-position:-466px -28px;}
#mini_nav li.nav5 a:hover {background-position:-605px -28px;}
#mini_nav li.nav6 a:hover {background-position:-759px -28px;}
#mini_nav li span{ display:none;}

</style>
</head>

<body>

<ul id="mini_nav">
<li class="nav1"><a href="http://www.okajax.com/" title="财经">财经</a></li>
<li class="nav2"><a href="http://www.okajax.com/" title="商业">商业</a></li>
<li class="nav3"><a href="http://www.okajax.com/" title="管理">管理</a></li>
<li class="nav4"><a href="http://www.okajax.com/" title="领袖">领袖</a></li>
<li class="nav5"><a href="http://www.okajax.com/" title="协会">协会</a></li>
<li class="nav6"><a href="http://www.okajax.com/" title="博客">博客</a></li>
</ul>
</body>
</html>

效果图片在附件中

作者: carpocirou 发布时间: 2009-06-21

你可以讓它背景重復出現！

作者: ajax203063 发布时间: 2009-06-24