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";
}

图像无法在导航栏上正确显示

1 个答案: