0

我对 html + css 很陌生。我目前正在尝试制作一个网站导航栏。我已经让它显示并且按钮可以在一定程度上工作，现在我唯一的问题是我希望图像可以使用浏览器窗口重新调整大小。

我使用的技术有 1 张图像，上面有正常的导航栏，鼠标悬停在下面的导航栏按钮上，所以通常图像显示上半部分，但当悬停在它上面时，会显示下半部分的某个部分。在我使用的编码中，引用每个按钮的位置和大小以及显示多少都是特定于像素的。

我想要这个导航栏做的是在一定程度上根据浏览器重新调整大小。因此，如果显示在较小的窗口中，图像将重新调整大小，反之亦然。我尝试将 px 更改为 %，但无济于事。有没有一种简单的方法来解决这个问题？

你可以在这里查看完整的网站：www.step-down.co.uk

ul#navbar li a {
display: block; float: left; height: 104px;
background-image: url(li1.png); text-indent: -9999px; position:relative; top:50px; right:10px;

}

ul#navbar li a.news {
    width: 172px; background-position: 0px 0;
}

ul#navbar li a.newr {
    width: 338px; background-position: -172px 0;
}
ul#navbar li a.hype {
    width: 170px; background-position: -510px 0;
}

ul#navbar li a.reviews {
    width: 205px; background-position: -680px 0; 
}
ul#navbar li a.bands {
    width: 195px; background-position: -885px 0;
}



ul#navbar li a.contact {
    width: 214px; background-position: -1080px 0;
}




    ul#navbar li a.news:hover {
    background-position: 0px -114px;
}

    ul#navbar li a.newr:hover {
    background-position: -172px -114px;
}
    ul#navbar li a.hype:hover {
    background-position: -510px -114px;
}

    ul#navbar li a.reviews:hover {
    background-position: -680px -114px;
}
    ul#navbar li a.bands:hover {
    background-position: -885px -114px;
}
    ul#navbar li a.contact:hover {
    background-position: -1080px -114px
}
4

1 回答 1

0

对于所有导航栏属性，使它们占整个屏幕的“%”，这样它们的大小将根据您的需要重新调整。

于 2012-05-20T22:21:59.463 回答