Question

ul +li 做网站的菜单（menu）,布局总是出现不能解决的问题。效果总是很难做到，我不想背景是一张图片？

ul +li 做网站的菜单（menu）,布局总是出现不能解决的问题。效果总是很难做到，我不想背景是一张图片？

1、我切了一小块作为背景。设在ul上。名字为menu_bg.jpg;

2、我又切了一小块，这是菜单文字中间分隔的图片。名字为menu_fg.jpg;

3、我的布局是这样的。
<style>
.con{width:960px; margin:0 auto 0px; clear:both;}
.menu{background:url(images/menu_bg.jpg) repeat-x;}
.menu li{float:left;height:40px;}
.menu li span{height:40px;}
.menu li a{margin:0px 15px 15px 15px;line-height:40px;font-weight:600;color:#2a2a2a;}
</style>

<ul class="con menu">
<li><a href="#">大会首页</a><span><img src="images/menu_fg.jpg" /></span></li>
<li><a href="#">会展介绍</a><span><img src="images/menu_fg.jpg" /></span></li>
<li><a href="#">主题演讲</a><span><img src="images/menu_fg.jpg" /></span></li>
<li><a href="#">演讲嘉宾</a><span><img src="images/menu_fg.jpg" /></span></li>
<li><a href="#">合作伙伴</a><span><img src="images/menu_fg.jpg" /></span></li>
<li><a href="#">合作媒体</a><span><img src="images/menu_fg.jpg" /></span></li>
<li><a href="#">在线注册</a><span><img src="images/menu_fg.jpg" /></span></li>
<li><a href="#">酒店交通</a><span><img src="images/menu_fg.jpg" /></span></li>
<li><a href="#">联系我们</a><span><img src="images/menu_fg.jpg" /></span></li>
<li><a href="#">往届回顾</a><span><img src="images/menu_fg.jpg" /></span></li>
<li><a href="#">现场直播</a><span><img src="images/menu_fg.png"/></span></li>
</ul>
注意最后一个span里面的img, 是png格式的透明图片。大小和menu_fg.jpg,一样。不如不这样就是错位。

4、最终的效果很不爽。

5、我想说的就是这种结构的布局。。。中间有分线的这种，我想找个好的方法解决他。
我想要的一定是有用的答案，找的也行，但一定要有用，要兼容性好的。。不要给我说用flash,因为那样我也不用问了。





Answer 1

你可以把背景切成块状，例如

把这个块状的右边缘用ps修饰一下，将<li>的高度和宽度设成和你切的图片一样大小。然后设成<li>的背景图片。

Answer 2

代码再调整一下

<style>
.con{width:960px; margin:0 auto 0px; clear:both; height:40px}
.menu{background:#000 url(images/menu_bg.jpg) repeat-x; list-style:none}
.menu li{ float:left; padding:5px 15px 5px 15px;background:url(images/menu_fg.jpg) no-repeat right 5px}
.menu li.nobg{ background:none}
.menu li a{font-weight:600;color:#2a2a2a;}
</style>
<ul class="con menu"><li style=""><a href="#">大会首页</a></li><li><a href="#">会展介绍</a></li><li><a href="#">主题演讲</a></li><li><a href="#">演讲嘉宾</a></li><li><a href="#">合作伙伴</a></li><li><a href="#">合作媒体</a></li><li><a href="#">在线注册</a></li><li><a href="#">酒店交通</a></li><li><a href="#">联系我们</a></li><li><a href="#">往届回顾</a></li><li class="nobg"><a href="#">现场直播</a></li>
</ul>
直接把img 放到背景里不就得了导航尽量精简点吗。搞那么多元素做什么呢 是吧

Answer 3

给a和span 一个固态属性，display:block;float:left;然后再用span的padding来设置中间图片的位置

要注意把span的height去掉

Answer 4

呵呵，这个没必要做，建议你直接套入