Question

我试图制作一个顶级导航栏。为什么我的版本与w3s版本不同，我找不到我的错误。

这是css代码和html代码

.logo {
  padding-right: 30px;
  color: #ffffff;
}

.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #a80664;
  border-color: transparent;
  background-color: #a80664;
}

.topnav-menu {
  float: left;
}

.topnav-menu a {
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav-menu a:hover:not(.active) {
  background-color: #ff0094;
}

.topnav-menu a.active {
  {
    color: #a80664;
    background-color: #f3f3f3;
  }
}

<!DOCTYPE html>
<html>

<head>
  <!-- BOOTSTRAP CSS STYLESHEET LINK -->

  <!-- MY CUSTOM CSS -->
  <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
  <title></title>
</head>

<body bgcolor="#000000">
  <li>
    <div class="logo"><a>LOGO</a></div>
  </li>
  <ul class="topnav-menu">
    <li><a class="active" href="#Home">HOME</a></li>
    <li><a href="#Kategori">KATEGORI</a></li>
  </ul>
</body>

</html>

使用这些代码我无法像这样制作顶级导航栏 this is what i want

我做了什么样的错误？

Answer 1

您必须在标记之前放置徽标，然后必须将

打包并且你必须将所有代码包装在

中

 <nav>
     <div class="logo">
        <a href="brand"><img src="imagepath"></a>
      </div>
       <div class="wrapper">
        <ul>
          <li>Home</li>`enter code here`
          **strong text**<li>About</li>
         </ul>
     </div>
   </nav>

无法制作顶级导航栏

1 个答案: