Question

我刚刚开始进行网页开发，我正在尝试用一堆'Div'元素构建一个页面导航栏，但我似乎无法将第二个按钮（“AboutButton”）显示在屏幕。这是我的HTML正文代码：

<body>

    <div id="navbar" id="top">
        <div id="pageselection">
            <div id="HomeButton"> <a href="#top"> HOME </a> </div>
            <div id="AboutButton"> <a href="#About> ABOUT </a> </div>
        </div>
    </div>


</body>

这是我的页面CSS：

#navbar{
Position: fixed;
Width: 100%;
Height: 10%;
}

#pageselection{
Position: absolute;
Width: 40%;
Height: 100%;
Right: 30%;
}

#HomeButton{
Position: absolute;
Width: 33%;
Height: 100%;
Left: 0%;
text-align: center;
}

#AboutButton{
Position: absolute;
Width: 33%;
Height: 100%;
Left: 33%;
text-align: center;
}

基本上，我正在尝试构建一个横跨页面顶部的'div'，然后将'div'的中心40％标记为第二个'div'坐下的空间，这将是反过来持有用户可以用来浏览页面的三个链接。

先谢谢，希望这是一个愚蠢的错误，我希望我的描述足够清楚：）

Answer 1

你错过了

中的引号

<a href="#About>

如果您刚刚开始使用，我建议您使用一些免费的编辑器，例如Atom或Sublime，它们会提醒您这类错误。

此外，不允许在元素上使用“id”两次。更好的做法是使用classes，您可以将它们堆叠起来，如：

<div class="navbar top"></div>

Answer 2

您错过了"中的结尾引用<a href="#About>。我还建议您在导航栏上使用另一种方法。不要绝对定位导航栏中的链接，这是不需要的。而且，一个元素可以有一个ID，而不是多个。我做了一些更改，并使用了类而不是下面的ID。请看看。

#navbar{
  position: fixed;
  width: 100%;
  height: 10%;
  top: 0;
  left: 0;
  background-color: whitesmoke;
  height: 40px;
}

#pageselection{
  position: absolute;
  width: 40%;
  height: 100%;
  right: 30%;
  background-color: gray;
}

.nav-button{
  float:left;
  width:33%;
  height: 100%;
  text-align: center;
  line-height:40px;
}
.nav-button a{
  display:block;
  height: 100%;
}

<div id="navbar" id="top">
    <div id="pageselection">
        <div class="nav-button"><a href="#top">HOME</a></div>
        <div class="nav-button"><a href="#about">ABOUT</a></div>
        <div class="nav-button"><a href="#test">TEST</a></div>
    </div>
</div>

使用HTML Divs制作导航栏

2 个答案: