html - 创建响应式图像行

Question

我有在 Photoshop 中制作的导航栏图像。我将如何创建黑色背景并在调整大小时将它们显示在左侧下方的垂直行中？一旦调整大小，它们就会变成白色并且看不到。此外，如果您使用的是 Chrome，出于某种原因，您必须点击左上角的 Logo 才能向上移动导航图像。这是唯一执行此操作的浏览器。enter link description here

CSS:

/*---Navigation---*/
nav{
   float: right;
   margin-top: 12px;
   margin-right: 25px;

}
nav a: {
   padding: 15px;
}
#contact{
   padding: 4px;
}
#bio{
   padding: 4px;
}
#photography{
   padding: 4px;
}
#design{
   padding: 4px;
}
#sketches{
   padding: 4px;
}
#web{
   padding: 4px;
}

html:

<header>
    <a href="index.html" id="homeLogo" title="home"><img src="images/paintLogo.jpg" alt="Ryan Warner Eyemusic"></a>
   <nav>
    <a href="contact.html" id="contact"><img src="images/links/contact.png" 
       onmouseover="this.src='images/links/contactHover.png'" onmouseout="this.src='images/links/contact.png'"></a>
    <a href="bio.html" id="bio"><img src="images/links/bio.png"
       onmouseover="this.src='images/links/bioHover.png'" onmouseout="this.src='images/links/bio.png'"></a>
    <a href="photography.html" id="photography"><img src="images/links/photography.png"
       onmouseover="this.src='images/links/photographyHover.png'" onmouseout="this.src='images/links/photography.png'"></a>
    <a href="design.html" id="design"><img src="images/links/design.png"
       onmouseover="this.src='images/links/designHover.png'" onmouseout="this.src='images/links/design.png'"></a>
    <a href="sketches.html" id="sketches"><img src="images/links/sketches.png"
       onmouseover="this.src='images/links/sketchesHover.png'" onmouseout="this.src='images/links/sketches.png'"></a>
    <a href="web.html" id="web"><img src="images/links/web.png"
       onmouseover="this.src='images/links/webHover.png'" onmouseout="this.src='images/links/web.png'"></a>
   </nav>
  </header>

Answer 1

像星巴克页面一样将它放在侧面的小按钮上是另一回事，但我会帮助您解决最初的请求。

1. 将 Logo 设置为float: left;
2. 从你的header中删除高度(它禁止它展开)
3. 在 header 上设置 overflow: auto; 并在 nav 上设置 overflow: hidden; 以清除 float 。 (您也可以使用 clearfix 方法，但这个更容易)。

现在您的链接在调整大小时将保持黑色。如果你想让它在小于 480px 时变成一个可打开的按钮，你必须使用 media queries。 .

注意事项:

• 我注意到您在链接上设置了 mouseover 和 mouseout 以切换图像。但是，使用 CSS :hover 选择器效率更高，例如。 nav a:hover { background-image: url(...)
• 您的图片在加载时有点闪烁，请考虑使用 CSS sprite以避免多次请求。
• 最后，如果您在导航中使用图片，请注意这对 SEO 不利，并至少提供一个链接 title 属性。