图像不会出现在导航条上。

Question

好的，我花了很长时间试图为这类肚脐(雪碧翻转)找一个教程，我终于找到了一个几乎有用的教程，有人能帮我吗？我的问题是，我的按钮图像根本没有显示在设计视图中，如果我现场直播，它们就会显示出来，但是它没有显示完整的图像，它只显示文本链接后面的每个按钮的少量内容。提前谢谢你。这是代码

HTML

    <div 
        id="toptop"><img src="css/img/header-top.gif" width="950" height="51">
    </div>

    <div 
        id="topmiddle"><img src="css/img/header-middle.gif" width="950" height="199">
    </div>


    <ul class="navbar">
    <li class="home"><a href="home">index.html</a></li>
    <li class="health"><a href="health">health.html</a></li>
    <li class="workouts"><a href="workouts">workouts.html</a></li>
    <li class="diet"><a href="diet">diet.html</a></li>
    <li class="lifestyle"><a href="lifestyle">lifestyle.html</a></li>
    <li class="news"><a href="news">news.html</a></li>
    <li class="forum"><a href="forum">forum.html</a></li>
    <li class="contact"><a href="contact">contact.html</a></li>
    </ul>       

</body>

CSS

  .navbar {
    display: inline-block;
    position: absolute;
    height: 55px;
    width: 950px;
}


.home {
    float: left;
    height: 55px;
    width: 115px;
    position: relative;
}
.health {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.workouts {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.diet {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.lifestyle {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.news {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.forum {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.contact {
    float: left;
    height: 55px;
    width: 115px;
    position: relative;
}
.home a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
.health a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -115px 0px;
}
.workouts a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -235px 0px;
}
.diet a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -355px 0px;
}
.lifestyle a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -475px 0px;
}
.news a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -595px 0px;
}
.forum a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: 715px 0px;
}
.contact a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: 830px 0px;
}
.home a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: 0px -55px;
}
.health a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -115px -55px;
}
.workouts a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -235px -55px;
}
.diet a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -355px -55px;
}
.lifestyle a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -475px -55px;
}
.news a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -595px -55px;
}
.forum a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -715px -55px;
}
.contact a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -830px -55px;
}
.home a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: 0px -110px;
}
.health a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -115px -110px;
}
.workouts a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -235px -110px;
}
.diet a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -355px -110px;
}
.lifestyle a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -475px -110px;
}
.news a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -595px -110px;
}
.forum a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -715px -110px;
}
.contact a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -830px -110px;
}

Answer 1

首先，为什么不做这样的事情：

<ul class="navbar">
   <li><a href="#">Some link></li>
</ul>

然后，在CSS中，您可以使用以下方法对它们进行样式设置：

.navbar li
{
  float: left;
  height: 55px;
  width: 115px;
  position: relative;
} 
.navbar li a
{
  background-image:"someimage.png";
}