html - 由图像组成的导航栏

Question

我有五个不同的图像用作我网站导航的按钮。我希望它们水平内联并在浏览器窗口中居中。在我添加代码以在将鼠标悬停在每个图像上时在每个按钮下方显示文本之前，它们看起来还不错。这些按钮现在都在窗口中间垂直对齐。

在 html 文件中:

   <div class="nav">
        <div class="container">
            <ul>
            <div class="about">
            <li><input type="image" src="image.png" id="aboutPage" onClick = 'aboutPage()'/></li>
            <p class = "text1"> About </p>
            </div>

            <div class="resume">
            <li><input type="image" src="image.png" id="resumePage" onClick = 'resumePage()'/></li>
            <p class = "text2"> Resume </p>
            </div>

            <div class="home">
            <li><input type="image" src="image.png" id="homePage" onClick = 'homePage()'/></li>
            <p class = "text3"> Home </p>
            </div>

            <div class="portfolio">
            <li><input type="image" src="image.png" id="portfolioPage" onClick = 'portfolioPage()'/></li>
            <p class = "text4"> Portfolio </p>
            </div>

            <div class="contact">
            <li><input type="image" src="image.png" id="contactPage" onClick = 'contactPage()'/></li>
            <p class = "text5"> Contact </p>
            </div>
        </ul>
        </div>

在 CSS 文件中:

.nav {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nav .container {
   font-size: 12px;
  font-family: 'Shift', sans-serif;
  color: #5a5a5a;
  font-weight: lighter;
}

.nav .container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav .container li {
  display: inline;
}

以下是每个图像的悬停代码示例:

.nav .container .about .text1 {
   position:relative;
   bottom:0px;
   text-align: center;
   visibility: hidden;
}

.nav .container .about:hover .text1{
   visibility: visible;
}

任何帮助将不胜感激!谢谢。

Answer 1

首先，关于您的标记，我有几点要说。我知道这不是代码审查，与问题不完全相关，但当我查看 HTML 时，我无法自拔:

• 一个div.nav只是对我尖叫，你实际上想使用 nav
• 那个div.container对我来说似乎过时了，只是添加了标记。如果你真的需要容器类(出于 css 或 js 的原因)，为什么不将它添加到 ul 中呢？相反。
• 一个ul只能有li元素作为直接子元素，所以那些div元素应该成为 li 的子元素代替 parent 。
• 你为什么要使用(非常罕见的)input[type=image]元素，而不是通常的 <a><img></a> ？这看起来很奇怪。
• 为每个文本使用不同的类似乎毫无用处。它只会让你的代码更难维护，你的 CSS 也更冗长。我想知道您是否需要一个类，但如果您有充分的理由，至少对所有文本 block 使用相同的类。

考虑到这些评论，我的标记看起来像这样:

<nav>
    <ul class='container'>
        <li>
            <a href='#'>
                <img src='' alt='do not forget your alt, especially for nav!' />
                <p>text</p>
            </a>
        </li>
        ...
    </ul>
</nav>

然后对于你的实际问题，我不完全确定我理解你想要实现的目标，但是 this is what I came up with . CSS 看起来像这样。

nav {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    text-align: center;
}
nav ul {
    font-size: 12px;
    font-family:'Shift', sans-serif;
    color: #5a5a5a;
    font-weight: lighter;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav li {
    margin: 12px;
    display: inline-block;
}

nav p {
    opacity: 0;
    transition: opacity .5s;
}
nav a:hover p {
    opacity: 1;
}

请注意，我选择了 opacity代替 visibility因为这允许您添加过渡，我发现这可以提供更好的体验。不过，您也应该能够使用可见性(或只是删除过渡)来进行即时状态切换。

我希望这能让您走上正轨。如果我误解了什么，或者您希望我进一步解释，请告诉我。