2017-07-05 52 views
-1

我通過Freecodecamp瞭解到,我們的任務之一是創建投資組合,但我無法擺脫navbarfootnote中的下劃線鏈接。如何擺脫帶下劃線的鏈接

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>

回答

0

阿法克甚至a:link { text-decoration: none }應該夠了。 甚至a { text-decoration: none }。但在最後一種情況下,即使錨點(除href外,例如<a name='bla'>Bla</a>)也會受到影響。

+0

非常感謝! – Broccolina

2

以下內容添加到您的CSS:

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

您可以通過默認瀏覽器的風格a標記文字下劃線從類.container

0

刪除它,

刪除

選擇元素,並添加text-decoration-line: none;

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

做的最好的辦法是不使用!important,所以加一個類名到a標籤例如像喹

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

edited your code