Question

我正在学习HTML，我的软件开发课上的老师告诉我，我应该开始在自己的时间进行编程实验，所以我决定尝试创建一个简单的网站。正如你所看到的那样，我还没有走得太远而且一直困扰着弄清楚如何制作导航栏。我希望导航栏上的每个框都可以点击并能够链接到正确的网页。我确实尝试在每个li之前放置一个标签而没有图像映射，只要能够链接到相应网页的框就可以实现我想要的，但是每个框之间都有一个空格，我不会这样做。 ; t想要，这也导致第6个盒子被推到第一个盒子下面。使用图像映射，没有链接，当我检查元素时，它说图像映射是0 x 0.让我知道我在导航栏上做错了什么或者是否有更好的方法可以做这个。 HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

不要使用地图，之后您的页面语义将会丢失。带链接的同一段代码（只是<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;}

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>

如果您在元素和元素位置之间存在空格问题，那么它只是一个CSS问题。

将代码复制到https://jsfiddle.net/会生成一个群集页面，因此要告诉您的问题并不容易。

如果您需要更好的帮助，我建议您修改帖子并提供更好的信息并删除不必要的内容。

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>

简单的导航栏（初学者）

3 个答案: