请帮我解决我的问题。 我需要用图片制作头菜单。 我现在有:
我需要做什么:
我的HTML代码:
<div id="head">
<div class="site_info">
<div id="tabs">
<ul id="tabMenu">
<li class="dropdown">
<div><a class="tab1">поиск по производителю</a></div>
</li>
<li class="dropdown">
<div><a class="tab2">поиск по назначению</a></div>
</li>
<li class="dropdown">
<div>
<span id="more_search"></span>
<a class="tab4" href="/emarket/cart/">покупки</a>
</div>
</li>
<li class="dropdown">
<div><a class="tab3">сравнение</a></div>
</li>
<li class="dropdown">
<div><a class="tab3">кабинет</a></div>
</li>
</ul>
</div>
</div>
<div class="work" umi:element-id="40">
<div umi:field-name="order_info_top"></div>
</div>
</div>
CSS:
#main #head div.site_info {
padding-top: 45px;
}
#main #head div.site_info ul {
width: 50%;
margin: 0 auto;
min-width: 1024px;
}
#main #head div.site_info ul li {
display: inline;
margin-right: 18px;
}
#main #head div.site_info ul li a.tab1 a.tab2 a.tab3 a.tab4 {
float: left;
margin-left: 89px;
}
答案 0 :(得分:3)
为单个菜单指定高度和宽度。然后添加以图像为背景的样式。将backgruond图像置于顶部中心位置。
<div>
<ul>
<li class="dropdown"><div><a class="tab1">Menu 1</a></div></li>
<li class="dropdown"><div><a class="tab2">Menu 2</a></div></li>
</li>
</ul>
</div>
li
{
list-style: none;
float: left;
width :100px;
}
.dropdown .tab1
{
background : url('http://www.indievisionmusic.com/wp-content/themes/indievisionmusic/images/at_symbol_10x10.gif') no-repeat top center;
padding-top: 10px;
}
.dropdown .tab2
{
background : url('http://www.gigabyte.us/images/icon_blue.png') no-repeat top center;
padding-top: 10px;
}
<强> DEMO 强>
答案 1 :(得分:0)
只需更改<img src="images/image.jpg">
如果您希望它成为链接:<a href="index.html"><img src="images/image.jpg" width="100" height="100"/></a>
答案 2 :(得分:0)
您可以使用图片而不是文字,并使用CSS后台功能
添加图片li a.tab1 { background: url(); width:XXpx; height: XXpx }
li a.tab2 { background: url(); width:XXpx; height: XXpx }
li a.tab3 { background: url(); width:XXpx; height: XXpx }