Question

我通过Freecodecamp学习，我们的任务之一就是创建一个投资组合，但我无法摆脱navbar和footnote中的下划线链接。

Text-decoration: none;没有帮助，还有其他想法吗？

body {
  max-width: 100%;
  position: relative;
  overflow-x: hidden;
}

.container {
  z-index: 5;
  background-color: #8f8a01;
  position: fixed;
  top: 0;
  margin: auto;
  width: 100%;
  box-shadow: 2px 2px 2px #888;
  padding-bottom: 5px;
  text-decoration: none;
}

button {
  margin: 15px 0px 0px 15px;
  box-shadow: 2px 2px 2px #888;
  background-color: #ece2b4;
  font-family: 'Rajdhani', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #8f8a01;
}

button:hover {
  background-color: #edce00;
}

a {
  text-decoration: none;
}

.about {
  min-height: 380px;
  margin: auto;
  width: 100%;
  padding: 50px 220px 70px 200px;
  background-color: #ece2b4;
  line-height: 50px;
  text-align: left;
  overflow: auto;
}

p {
  padding-left: 150px;
}

.photo {
  width: 200px;
  heihgt: 200px;
  float: right;
  margin-right: 0px;
  margin-left: 0px;
  border-radius: 120px;
  box-shadow: 2px 2px 2px #888;
}

#port {
  background-color: #bdb817;
  padding: 10px 10px 19px 10px;
  margin: auto;
  width: 100%;
}

.left-link {
  margin: 25px;
  padding: 5px 30px 15px 5px;
}

.right-link {
  margin: 25px;
  padding: 5px 30px 15px 5px;
}

#port {
  align: center;
}

img:hover {
  background-color: #edce00;
}

.small-img {
  padding: 5px;
  border: 1px solid gray;
  height: 250px;
  width: 300px;
  max-height: 350px;
  max-width: 400px;
  border-radius: 15px;
  box-shadow: 2px 2px 2px #888;
}

input {
  text-align: center;
}

.send-btn {
  margin: 10px 10px 50px 10px;
}

.ctcMe {
  z-index: 1;
  background-color: #ece2b4;
  line-height: 30px;
  margin: auto;
  width: 100%;
  padding-top: 2px;
}

input {
  border-radius: 0px;
  border-top: none;
  border-left: none;
  width: 200px;
}

textarea {
  border-radius: 0px;
  border-top: none;
  border-left: none;
  width: 200px;
}

.contact {
  text-align: center;
}

.send-btn {
  margin-left: 0%;
}

.web {
  background-color: #bdb817;
  padding-top: 15px;
  padding-bottom: 5px;
  margin: auto;
  width: 100%;
}

.fc {
  width: 30px;
  height: 30px;
}

.coded {
  background-color: #edce00;
  padding-top: 15px;
  padding-bottom: 5px;
  margin: auto;
  width: 100%;
}

<body>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <div class="container">
    <div class="row">
      <div class="col-xs-2">
        <a href="#aboutbtn">
          <button class="btn btn-block">
          About</button>
      </div>
      <div class="col-xs-2">
        <a href="#portbtn">
          <button class="btn btn-block">Portfolio</button></a>
      </div>

      <div class="col-xs-2">
        <a href="#contactbtn">
          <button class="btn btn-block">Contact</button>
      </div>
    </div>
    <!-- close ROW -->
  </div>
  <!-- close HEAD -->

  <div class="about">
    <h2 style="text-align: center">
      <a name="aboutbtn">
      ABOUT </h2></a>

      <img src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAzEAAAAJDkwZTM5NmY4LWYwMzQtNDhmOS1hYzExLTM4YWI5NTZmMGI5ZA.jpg" alt="picture of me" class="img-responsive photo">
      <center>
        <p> I am a book-lover translator, and an excellent-organised personal assistant.
          <br> I help my team daily to get through the week from chaos to clarity,
          <br> and I provide my colleagues with comprehensive translations and proofreading.
          <br> Recently I am also a coding hobbyist and a Front-End Developer wannabe.
        </p>
      </center>
  </div>

  <div id="port">
    <h2 style="text-align: center"><a name="portbtn"> PORTFOLIO</a></h2>
    <br>
    <div class="row img-center">
      <div class="col-xs-offset-2">
        <a target="_blank" class="left-link" href "#"><img class="small-img" src="http://www.drodd.com/images15/1-12.jpg"></a>
        <a target="_blank" class="left-link" href "#"><img class="small-img" src="http://www.edu.xunta.gal/centros/ceipramoncajal/?q=system/files/u2/globo2fantasia.jpg"></a>
        <a target="_blank" class="left-link" href "#"><img class="small-img" src="https://rfclipart.com/image/big/67-84-40/strawberry-style-font-number-3-Download-Royalty-free-Vector-File-EPS-71206.jpg"></a>
      </div>
      <!-- close COL -->
    </div>
    <!--- close ROW -->
    <br>
    <div class="row img-center">
      <div class="col-xs-offset-2">

        <a target="_blank" class="right-link" href "#"><img class="small-img" src="http://3.bp.blogspot.com/-9cSZuRMO65M/UOYn20oxGUI/AAAAAAAALgg/zTyw-uLPkO8/s1600/number4.jpg"></a>
        <a target="_blank" class="right-link" href "#"><img class="small-img" src="https://thebitterlemon.files.wordpress.com/2016/09/5.jpg?w=400"></a>
        <a target="_blank" class="right-link" href "#"><img class="small-img" src="https://thumbs.dreamstime.com/z/liczby-kresk%C3%B3wki-%C5%9Bmieszny-r%C3%B3%C5%BCowy-flaming-31350873.jpg"></a>
      </div>
      <!--close COL -->
    </div>
    <!--close ROW -->
  </div>
  <!-- close PORT -->
  <div class="ctcMe">
    <h2 style="text-align: center">
      <a name="contactbtn">
    CONTACT ME</h2></a>
      <br>
      <div class="row" style="margin-top: 10px;">
        <div class="col-xs-7">
          <p class="contact">If you have any requests or questions<br>I am very eager to answer them :) </p>
        </div>
        <!-- close COL -->

        <div class="col-xs-2">
          <form><input type="text" placeholder="name">
            <input type="text" placeholder="e-mail addres">
            <input type="text" placeholder="phone number">
            <textarea style="text-align: center" type="text" placeholder="message">
         </textarea>
          </form>
          <form><button class="btn send-btn" type="mailo">SEND</button></form>
          </form>
        </div>
        <!-- close COL -->
      </div>
      <!-- close ROW -->

  </div>
  <!-- close CtcMe -->



  <div class="web">
    <center>
      <p class="footnote">
        Around the web:
        <br>
        <a href="https://www.freecodecamp.com/broccolina"><img class="fc" src="https://yt3.ggpht.com/-bWUaHwGz7To/AAAAAAAAAAI/AAAAAAAAAAA/xEUD6X5iT2Y/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></a>
        <a href="https://www.linkedin.com/in/agnieszka-kozub-209a4495/"><img class="fc" src="http://www.blitzcleaned.com/wp-content/uploads/2014/07/LI-Logo-1.png"></a>
        <a href="https://github.com/Broccolina"><img class="fc" src="http://www.freeiconspng.com/uploads/github-logo-icon-0.png"></a>
        <a href="https://codepen.io/Broccolina/"><img class="fc" src="https://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Large.png"></a>
      </p>
    </center>
  </div>

  <div class="coded">
    <center>
      <p class="footnote">
        Written and coded by
        <a href="https://www.facebook.com/broccolina19"> Agnieszka Kozub </a>
      </p>
    </center>
  </div>
</body>

Answer 1

将以下内容添加到CSS中：

a:link, a:hover { text-decoration: none; }

您可以从课程.container

中删除它

Answer 2

默认浏览器样式a标记文字下划线，

删除

选择该元素并添加text-decoration-line: none;

a {
    text-decoration-line:  none !important;
}

最好的方法是不要使用!important，因此请为a个代码添加一个类名，例如像noline

a.noline {
    text-decoration-line: none;
}

edited your code

Answer 3

AFAK甚至a:link { text-decoration: none }就足够了。甚至是a { text-decoration: none }。但在最后一种情况下，甚至锚点（除了href，例如<a name='bla'>Bla</a>）都会受到影响。

如何摆脱带下划线的链接

3 个答案: