我被困住了。我创建了一个图像,希望它是一个通过CSS访问导航菜单的背景图像,并在HTML上放置文本。
这是我的CSS:
.menu_item {
background:url(../images/menu_normal.png) no-repeat;
}
这是HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Quotation Form</title>
<link href="css/menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li class = "menu_item"><a href="#">About</li>
<li class = "menu_item"><a href="#">Services</a></li>
<li class = "menu_item"><a href="#">For Translators</a></li>
<li class = "menu_item"><a href="#">Free Quotation</a></li>
</ul>
<img src = "images/menu_normal.png">
</body>
</html>
结果如下:http://eximi.dreamhosters.com/turbolingvo/menu.html
我希望图片显示在菜单项后面,就像它显示在它下面的<img src...>
一样。
我做错了什么?
谢谢!
答案 0 :(得分:2)
你需要这样的东西:
.menu_item {
background: url("../images/menu_normal.png") no-repeat scroll 0 0 transparent;
float: left;
height: 53px;
line-height: 53px;
list-style: none;
text-align: center;
width: 227px;
}
答案 1 :(得分:1)
您必须设置li元素的样式以调整外观
例如
.menuitem{
background:url(../images/menu_normal.png) no-repeat;
display: block;
height: 33px;
padding: 10px;
width: 207px;
}
这只是一个例子,您可以根据需要设置它的样式
答案 2 :(得分:0)
将背景更改为ul
元素,并为ul
元素提供课程菜单。
<强> CSS 强>
.menu {background:url(../images/menu_normal.png) no-repeat; }
<强> HTML 强>
<ul class='menu'>
<li><a href="#">About</li>
<li><a href="#">Services</a></li>
<li><a href="#">For Translators</a></li>
<li><a href="#">Free Quotation</a></li>
</ul>