HTML導航欄，固定在網頁的頂部，水平框（按鈕）

我想要一個導航欄顯示在網頁的頂部，有一個乾淨的框內的水平按鈕。與在http://www.apple.com/處找到的導航欄非常相似。我覺得我應該知道如何做到這一點，但顯然我沒有。任何幫助是非常感激，甚至點和技巧。謝謝你，下面是我到目前爲止的代碼。首先顯示Css，然後顯示我的HTML。 HTML導航欄，固定在網頁的頂部，水平框（按鈕）

body{ 
 
    border: solid; 
 
    background-color: white; 
 
    color: black; 
 
    text-align: center; 
 
} 
 

 
table.slideshow{ 
 

 

 
} 
 
th.slideshowtitle{ 
 
    text-align: center; 
 

 
} 
 

 
footer{ 
 
    border-top: solid 10px; 
 

 

 
} 
 

 
/*nav bar*/ 
 
.navbar-inverse { 
 
    background-color:black; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
    <link href="C:\Users\Chester Szydlowski\Desktop\HOF\stylesheet.css" type="text/css" rel= "stylesheet" /> 
 
<title> 
 
    Hall Of Framers 
 
</title> 
 
</head> 
 
<body> 
 

 
<nav class ="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
     <div id="navbar" class="collapse navbar-collapse"> 
 
      <u1 class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="C:\Users\Chester Szydlowski\Desktop\HOF\public_html\EmailList.html">Email List</a></li> 
 
      <li><a href="">Custom Frames</a></li> 
 
      <li><a href="">News</a></li> 
 
      <li><a href="">Silent Auction</a></li> 
 
      <li><a href="">Upcoming and Past Events</a><li> 
 
      <li><a href="">i dont know</a></li> 
 
     </u1> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 

 
<p> Products </p> 
 

 
</table> 
 
</body>

來源

2016-05-25 Chester S.

你有'position：fixed'嗎？在你的CSS中，還是我看到的唯一的CSS？和你的JavaScript在哪裏？ – mlegg

如果顯示CSS選擇器添加到「禮」的元素，它會做的伎倆

以下添加到您的CSS。

li{ 
    display:inline-block; 
    }

這將移動eachother旁邊的元素，您可以從那裏進一步設置它的樣式。祝你好運

來源

2016-05-25 01:03:16 Noah

謝謝！這工作馬上。 –

沒問題！讓我知道你是否需要任何進一步的造型協助。 – Noah

它看起來像你的導航使用boostrap類。如果是這樣，只需下載幷包含boostrap.css。

來源

2016-05-25 01:19:40 citysurrounded

因爲我不熟悉bootstrap類，所以我會研究這個，謝謝！ –

HTML導航欄，固定在網頁的頂部，水平框（按鈕）

回答

相關問題