簡單的導航欄（初學者）

我只是在學習html，我的軟件開發班的老師告訴我我應該開始在自己的時間嘗試編程，所以我決定嘗試做一個簡單的網站。正如你所看到的，我並沒有走得太遠，一直在困擾着如何製作導航欄。我希望導航欄上的每個框都是可點擊的，並且能夠鏈接到正確的網頁。我曾嘗試在每個li之前放置一個標籤，並且沒有圖像映射，只要這些框能夠鏈接到相應的網頁，我就可以做到這一點，但每個盒子之間都有一個空格，而我沒有這也導致第六個盒子被推到第一個盒子下面。使用圖像映射時，沒有鏈接，當我檢查元素時，它說圖像映射爲0 x 0.讓我知道我在導航欄中做了什麼錯誤，或者是否有更好的方法來做到這一點。 HTML：簡單的導航欄（初學者）

body { 
 
    background-color: #FFFFFF; 
 
    margin: 0; 
 
} 
 
#name { 
 
    font-size: 19pt; 
 
    margin-top: 0; 
 
    padding-top: 0; 
 
    width: 100%; 
 
    background-image: url(wood.png); 
 
    height: 81px; 
 
    display: block; 
 
} 
 
h2.Title { 
 
    position: absolute; 
 
    margin-bottom: 0; 
 
    padding-bottom: 0; 
 
    left: 535; 
 
    top: 1; 
 
} 
 
h2.TitleShadow { 
 
    position: absolute; 
 
    left: 533; 
 
    top: 0; 
 
    color: #368BC1; 
 
} 
 
#navbar { 
 
    display: table; 
 
    height: 30px; 
 
    width: 100%; 
 
    padding-left: 0; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 65; 
 
} 
 
#navbar li { 
 
    display: table-cell; 
 
    height: 30px; 
 
    width: 16.666666667%; 
 
    line-height: 30px; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    white-space: nowrap; 
 
    background-color: #F8F8F8; 
 
}

<html> 
 

 
<head> 
 
    <title>Noah's Sports Cards</title> 
 
    <link href="home.css" rel="stylesheet" type="text/css" media="screen, tv, tty" /> 
 
</head> 
 

 
<body> 
 
    <div id="name"> 
 
    <h2 class="Title">Noah's Sports Cards</h2> 
 
    <h2 class="TitleShadow">Noah's Sports Cards</h2> 
 
    </div> 
 
    <ul id="navbar" usemap="#navMap"> 
 
    <li>Home</li> 
 
    <li>Albums</li> 
 
    <li>Random</li> 
 
    <li>Memorbilia</li> 
 
    <li>Tools</li> 
 
    <li>About</li> 
 
    </ul> 
 
    <div> 
 
    <map id="navMap"> 
 
     <area shape="rect" coords="0, 82, 227.667, 113" href="home.htm" /> 
 
     <area shape="rect" coords="227.667, 82, 455.334, 113" href="albums.htm" /> 
 
     <area shape="rect" coords="455.334, 82, 683.001, 113" href="random.htm" /> 
 
     <area shape="rect" coords="683.001, 82, 910.668, 113" href="memorbilia.htm" /> 
 
     <area shape="rect" coords="910.668, 82, 1138.335, 113" href="tools.htm" /> 
 
     <area shape="rect" coords="1138.335, 82, 1366, 113" href="about.htm" /> 
 
    </map> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-11-26 Noah Hornak

能否請您做一個[小提琴]（http://jsfiddle.net/）例如 –

爲什麼不創建一個'ul'和使用'顯示：table' –

不要使用地圖，你的頁面語義將在後面丟失。相同的一段代碼的鏈接（只是<ul>部分）：

<ul id="navbar"> 
    <li> 
    <a href="home.htm">Home</a> 
    </li> 
    <li> 
    <a href="albums.htm">Albums</a> 
    </li> 
    <li> 
    <a href="random.htm">Random</a> 
    </li> 
    <li> 
    <a href="memorbilia.htm">Memorbilia</a> 
    </li> 
    <li> 
    <a href="tools.htm">Tools</a> 
    </li> 
    <li> 
    <a href="about.htm">About</a> 
    </li> 
</ul>

然後在CSS，只是添加此行完整寬度添加到鏈接並解析它作爲一個塊，除了除去所述藍色顏色和下劃線：

#navbar li a { color: #000; text-decoration: none; width: 100%; display: inline-block;}

來源

2015-11-26 17:42:15

太感謝你了，這個完美的作品！ –

首先，我建議您開始用正確的縮進編寫代碼。閱讀這樣的代碼，對於你自己和閱讀你的代碼的其他人來說很難。

要創建您的導航欄鏈接，簡單地做這樣的事情：

<nav> 
    <ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="album.html">Album</a></li> 
    <li><a href="random.html">Random</a></li> 
    <li><a href="memorbilia.html">Memorbilia</a></li> 
    <li><a href="tools.html">Tools</a></li> 
    <li><a href="about.html">About</a></li> 
    </ul> 
</nav>

如果您遇到與元素和元素的位置之間的空間的問題，它只是一個CSS的問題。

將您的代碼複製到https://jsfiddle.net/中會生成聚合頁面，因此很難說出問題所在。

如果你想更好的幫助，我建議你編輯你的文章，並提供更好的信息，並刪除不必要的東西。

來源

2015-11-26 17:44:00 Gendarme

簡單的導航欄（初學者）

回答

相關問題