2017-07-06 76 views
0

我剛剛開始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」的空間,這將反過來保留用戶可用於導航頁面的三個鏈接。

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

+0

引導可以幫助你 –

+0

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

回答

1

您在

<a href="#About> 

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

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

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

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

+0

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

+0

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

0

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