HTML - 未显示链接的标题横幅

Question

我正在学习网络开发并且正在创建一个练习网站，但是我遇到了一些问题。我正在尝试提供一个背景/横幅，以隐藏指向其他网站的链接所在的位置。据我所知，我正确地链接到了图像等等。

HTML 代码:

<header role="banner" id="site_header">
<h1 role="heading"><a href="index.php" title="Sandwich Express">Sandwich Express</a></h1>
    <nav role="navigation">
      <ul>
          <li><a href="index.html" class="active">Home</a></li>
          <li><a href="Menu.html">Menu</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="event.html">Event Catering</a></li>
        </ul>
    </nav>

CSS 代码:

/* header */
#site_header {
    height: 188px;
    background: url(photos/headerbg.png) top repeat-x;
}
#site_header h1 {
    padding: 8px 0 0 21px;
    float: left;
}
#site_header h1 a {
    display: block;
    text-indent: -9999px;
    height: 173px;
    width: 176px;
    background: url(photos/logo.png);
    text-decoration: none;
}
#site_header nav {
    display: block;
    float: left;
}
#site_header nav ul {
    margin: 0;
    padding: 113px 0 0 6px;
    list-style: none;
    list-style-image: none;
}
#site_header nav ul li {
    font-family: "Century Gothic", "Gudea", sans-serif;
    font-size: 15px;
    line-height: 17px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline;
    padding: 0 10px;
}
#site_header nav ul li a {
    color: #000;
    text-decoration: none;
    transition: all .3s ease;
   -o-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -webkit-transition: all .3s ease;    
    text-decoration: none;
}
#site_header nav ul li a:hover, #site_header nav ul li .active {
    color: #900028
}

任何帮助都会很棒，我希望 CSS 和 html 是正确的。

Answer 1

请注意，CSS 中指定的路径是相对于 CSS 文件而非 HTML 文件的。因此，如果你的 CSS 位于 /css 子目录中，而图片位于 /photos 相对于 HTML 文件的子目录中，那么你在 CSS 中的路径应以 开头../照片.