我通过 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>最佳答案
将以下内容添加到您的 CSS:
a:link, a:hover { text-decoration: none; }
您可以将其从类 .container 中删除
关于html - 如何去掉带下划线的链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44919682/