Question

我有另一个问题。我无法确定问题所在。我在菜单项周围添加了边框。在我添加徽标之前，一切正常。我相信问题出在我的.Main-Nav li：a。在我的CSS中。我会发布所有内容，看看你们是否可以解决这个问题。我还想知道我是否需要为我网站上的每个页面制作一个不同的文件

＆＃13;

* {
  margin: 0PX;
  padding: 0PX;
}

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://static.pexels.com/photos/371794/pexels-photo-371794.jpeg);
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.main-nav {
  float: right;
  list-style: none;
  margin-top: 30px;
}

.main-nav li {
  display: inline-block;
}

.main-nav li a {
  color: white;
  text-decoration: none;
  padding: 5px 20px;
  font-family: "roboto", sans-serif;
  font-size: 15px;
}

.main-nav li.active a {
  border: 1px solid white;
}

.main-nav li a:hover {
  border: 1px solid white;
}

.logo img {
  width: 200px;
  height: auto;
  float: left;
}

body {
  font-family: monospace;
}

.row {
  max-width: 1200px;
  margin: auto;
}

.hello {
  position: absolute;
  width: 1200px;
  margin-left: 0px;
  margin-top: 0px;
}

h1 {
  color: white;
  text-text-transform: uppercase;
  font-size: 70px;
  text-align: center;
  margin-top: 275px;
}

.button {
  margin-top: 30px;
  margin-left: 440px;
}

.btn {
  border: 1px solid white;
  padding: 10px 30px;
  color: white;
  text-decoration: none;
  margin-right: 5px;
  font-size: 13px;
  text-transform: uppercase;
}

.btn-one {
  background-color: darkorange;
  font-family: "roboto", sans-serif;
}

.btn-two {
  font-family: "roboto", sans-serif;
}

.btn-two:hover {
  background-color: darkorange;
  transition: all 0.5s ease-in;
}

＆＃13;

<HTML>

<Head>
  <title> Drew's Blog</title>
  <link href="style.css" rel="stylesheet" type "text/css" </head>

  <body>
    <header>

      <div class="row">
        <div class="logo">
          <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Oh-deer.png">
        </div>
        <ul class="main-nav">
          <li class="active"><a href=""> HOME </a></li>
          <li><a href=""> ABOUT </a></li>
          <li><a href=""> GALLERY </a></li>
          <li><a href=""> NEWS </a></li>
          <li><a href=""> CONTACT </a></li>
          <li><a href=""> LESSONS </a></li>
        </ul>
      </div>

      <div class="Hello">
        <h1> Lets Get Started</h1>

        <div class="button">
          <a href="" class="btn btn-one"> Get to Know Me</a>
          <a href="" class="btn btn-two"> Check out my lessons</a>
        </div>


    </header>
  </body>


</html>

＆＃13;

`

Answer 1

在

.main-nav li a {
  color: white;
  text-decoration: none;
  padding: 5px 20px;
  font-family: "roboto", sans-serif;
  font-size: 15px;
  }

添加：

border: 2px solid white;

这会在您放入<li>标记

的菜单项周围添加边框

在活动类中查找边框：

.main-nav li.active a {
border: 2px solid white;
}

这是HOME按钮，因为它的类是活动的（class="active">）并且它已经有一个边框

我改变了像素，所以我可以看到结果，但问题恰恰是：像素。如果您的hover像素和li像素相同，则不会看到任何更改

这应该为菜单项添加边框，并在用鼠标悬停在菜单项上时进行更改。

另外，

.main-nav li a:hover

恰恰相反。当你在这里定义一个边框而你在一个菜单项上面时，边框会出现，所以基本上尝试平衡像素。

我正在试图弄清楚你到底想要什么。您是否希望边框始终存在？当您将鼠标悬停在它们上方时，您希望它们消失，或者当您将鼠标悬停在它们上方时，是否希望显示边框。

菜单项周围的边框消失

1 个答案: