时间戳

首页 > 解决方案 > 为什么导航栏元素下有链接？

html - 为什么导航栏元素下有链接？

问题描述

我只是想删除导航栏子类别（课程，关于我）上的下划线。我认为是因为有一个href，但我不知道用什么代码来摆脱它。我尝试使用text-decoration: none，但没有奏效。也请随时给我更多关于如何使这个网站更好的建议！

body {
  margin: 0;
}


/*Headings*/


/*Navbar*/

.navbar {
  background-color: #005070;
  overflow: hidden;
}

.navbar a {
  font-family: 'Montserrat Alternates', sans-serif;
  float: right;
  color: white;
  margin: 23px 20px 0px 0px;
  animation: fadeIn 2s;
  text-decoration: none;
}

.navtext::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width .3s;
}

.navtext:hover::after {
  width: 100%;
  transition: width .3s;
}

.navimg {
  width: 175px;
  height: auto;
  margin: 5px 0px 5px 20px;
  animation: fadeIn 2s;
}

.navlogin {
  width: 75px;
  height: auto;
  float: right;
  margin: 15px 20px 0px 0px;
  animation: fadeIn 4s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}
<div class="navbar">
  <a href="index.html"><img class="navimg" src="Assets/Logo White.png"></a>
  <img class="navlogin" src="Assets/Login.png">
  <a class="navtext" href="Pages/Courses/index.html">Courses</a>
  <a class="navtext" href="Pages/About Me/index.html">About Me</a>
</div>
<div class="head1">
  <h1>Placeholder text</h1>
</div>
<div class="head2">
  <h1>Placeholder text</h1>
</div>

标签： html

解决方案

如果您没有该 URL 中的链接，请使用以下属性selector

text-decoration:none;

这是示例：

<a style="text-decoration:none" href="http://google.Com">Google</a>

这是您的代码的示例：

.navtext {
  text-decoration: none;
}
<div class="navbar">
  <a href="index.html"><img class="navimg" src="Assets/Logo White.png"></a>
  <img class="navlogin" src="Assets/Login.png">
  <a class="navtext" href="Pages/Courses/index.html">Courses</a>
  <a class="navtext" href="Pages/About Me/index.html">About Me</a>
</div>

推荐阅读