Question

我是html + css的新手。我正在尝试制作网站导航栏。我有它显示和按钮工作到一定程度，现在我唯一的问题是我希望图像重新调整大小与浏览器窗口。

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

我想要这个导航栏做的是重新调整大小，具体取决于浏览器。因此，如果在较小的窗口中显示图像将重新调整大小，反之亦然。我试过将px更改为％s而无济于事。这有一个简单的方法吗？

您可以在这里查看完整的网站：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
}

Answer 1

对于所有Nav-Bar属性，将它们设置为整个屏幕的'％'，这样它们将根据您的需要调整大小。

可调整大小的导航栏

1 个答案: