简单的导航栏（初学者）

我只是在学习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

简单的导航栏（初学者）

回答

相关问题