简单的导航栏（初学者）

Question

我刚刚开始学习 html 我的软件开发老师 class 告诉我应该开始尝试自己的编程，所以我决定尝试做一个简单的网站。如您所见，我还没有走多远，一直在研究如何制作导航栏。我希望导航栏上的每个框都可以单击并能够 link 到正确的网页。我确实尝试在每个 li 之前放置 a 标签并且没有图像映射，只要框能够 link 到适当的网页，它就可以满足我的要求，但是之间有一个 space我不想要的每个盒子，这也导致第 6 个盒子被推到第 1 个盒子下面。使用图像映射，没有 links，当我检查元素时，它说图像映射是 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>

Answer 1

不要使用地图，之后您的页面语义将会丢失。与 links 相同的一段代码（只是 <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 中，只需添加此行即可将全宽添加到 link 并将其解析为一个块，除了删除蓝色和下划线：

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

Answer 2

首先，我建议您开始使用正确的缩进编写代码。对于您自己和阅读您代码的其他人来说，阅读这样的代码要困难得多。

要在您的导航栏中创建链接，只需执行如下操作：

 <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>

如果您在元素和元素位置之间遇到 space 问题，那只是 CSS 的问题。

将您的代码复制到 https://jsfiddle.net/ 会生成一个集群页面，因此很难说出您的问题所在。

如果您需要更好的帮助，我建议您编辑 post 并提供更好的信息并删除不必要的内容。

Answer 3

导航栏

        <div class="collapse navbar-collapse" id="#navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="navbar-item active">
                    <a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="navbar-item">
                <a href="#">Link</a>
                </li>
                <li class="navbar-item dropdown">
                    <a class="nav-link dropdown-toggler" href="#" id="navbarDropdown" role="button" data-toggler="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                    </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">About</a>
                            <a class="dropdown-item" href="#">Another Action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">One More</a>
                        </div>
                </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>    
    </nav>

简单的导航栏（初学者）

Simple navigation bar (Beginner)

html

css

navigation

nav

navbar