使用HTML Divs來製作導航欄

我剛剛開始web開發，並試圖用一堆'Div'元素來構建一個頁面導航欄，但我似乎無法得到我的第二個按鈕（「 AboutButton「）出現在屏幕上。這是我的HTML代碼的身體：使用HTML Divs來製作導航欄

<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」的中心40％標記爲要放置第二個「div」的空間，這將反過來保留用戶可用於導航頁面的三個鏈接。

在此先感謝，希望它是一個愚蠢的錯誤，我希望我的描述是不夠清楚:)

來源

2017-07-06 Wags

引導可以幫助你 –

引導是要使用的工具，但它並不能幫助一個純粹的初學者學習任何標記的基本面。 – jswebb

您在

<a href="#About>

如果你只是開始錯過了一個引號，我建議你使用一些免費編輯器，如Atom或Sublime會提醒您這種錯誤。

另外，不允許在元素上使用「id」兩次。更好的做法是使用classes在這裏您將能夠堆疊起來，如：

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

來源

2017-07-06 18:19:19

非常感謝。關於在元素上不使用「id」兩次，是否意味着我不能識別具有「id」的元素，如果它已經在用「id」識別的另一個元素中？ – Wags

「id」是一個唯一的標識符，它只能在整個html頁面中使用一次。你可以在另一個「id」中插入一個「id」 –

這裏需要澄清一點：你不能在同一個元素上多次使用id。您可以在整個標記中多次使用它;但是，您一次只能使用每個唯一標識符。 – jswebb

你錯過了結束報價"在<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>

來源

2017-07-06 18:23:46

使用HTML Divs來製作導航欄

回答

相關問題