Question

我正在尝试为我的网站创建一个水平导航栏，就在横幅下方。我希望我的导航栏是用我在photoshop中制作的图像制作的。无论我做什么，我都无法让它发挥作用。我也尝试使用翻转链接。

有人可以告诉我我做错了什么吗？此代码是我的master.dwt文件的一部分。它位于我的根目录中名为“templates”的文件夹中。

谢谢！

这是CSS：

#navigation {
    width: 800px;
    height: 36px;
    background-color: transparent;
    margin-left:auto;
    margin-right:auto;
}
#navbar {
    list-style: none;
    height: 36px;
}
#navbar li {
    float: left; }
#navbar a {
display:block;
background:url(../nav bar2.png);
width:200px;
text-indent:-9000px;
}
#navbar a.link1:hover {background-position:0px -36px;}
#navbar a.link2 {background-position:-200px 0px;}
#navbar a.link2:hover {background-position:-200px -36px;}
#navbar a.link3 {background-position:-400px 0px;}
#navbar a.link3:hover{background-position:-400px -36px;}
#navbar a.link4 {background-position:-600px 0px;}
#navber a.link4:hover {background-position:-600px -36px;}

这是HTML：

<div id="navigation">
<ul id="navbar">
<li><a href="default.html" class="link1">home</a></li>
<li><a href="about.html" class="link2">about</a></li>
<li><a href="portfolio.html" class="link3">portfolio</a></li>
<li><a href="contact.html" class="link4">contact</a></li>
</ul>
</div>

照片中的照片： http://i.stack.imgur.com/uEdO8.png

Answer 1

主要问题

（1）如果图片的url()路径包含空格，则需要将整个路径放在引号中：

background:url("../nav bar2.png");

话虽如此，网站文件在文件名中有空格并不是一个好主意。用连字符或下划线替换空格，或者简单地删除空格会更安全。

（2）其中一个CSS选择器中存在拼写错误：

#navber a.link4:hover    /* Wrong */
#navbar a.link4:hover    /* Right */

次要问题

（1）如果您还没有这样做（可能使用reset.css），请删除ul标记中的默认空格;否则，4个菜单项（每个200px）将不适合800px容器。

#navbar {
    padding-left: 0;
    margin-left: 0;
}

试图制作水平导航栏，但这很棘手

1 个答案: