頁腳文字裝飾不起作用

我正在設置頁腳，但是我無法刪除文字下的行。我也想改變文字的顏色。我嘗試使用text decoration:none根據.footer ul，但這是不成功的。頁腳文字裝飾不起作用

h2 { 
 
    text-align: center; 
 
    font-family: "Courier New"; 
 
    color: beige; 
 
    font-size: 50px; 
 
    font-weight: 200; 
 
    text-shadow: -2px -2px black; 
 
    margin-bottom: -50px; 
 
    position: relative; 
 
} 
 

 
.head-link { 
 
    text-decoration: none; 
 
    color: aliceblue; 
 
} 
 

 
.head-link:hover { 
 
    margin: 20px auto 20px; 
 
    position: relative; 
 
    color: darkgoldenrod; 
 
} 
 

 
header { 
 
    background-image: url(https://i.imgur.com/xD3POCF.jpg); 
 
    position: absolute; 
 
    background-position: center; 
 
    max-width: 2000px; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    display: inline-block; 
 
    bottom: 40px; 
 
} 
 

 
.header-image { 
 
    background-size: cover; 
 
} 
 

 
.dropbtn { 
 
    background-color: transparent; 
 
    color: darkblue; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
    font-family: monospace; 
 
    top: 0; 
 
    font-size: 15px; 
 
    width: 120px; 
 
    height: 50px; 
 
    border-color: black; 
 
    border-style: double; 
 
    align-content: center; 
 
    text-align: center; 
 
    margin-top: -10px; 
 
} 
 

 
.dropdown { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin-left: 15px; 
 
} 
 

 
.dropdown-content { 
 
    padding: 12px; 
 
    position: absolute; 
 
    font-family: monospace; 
 
    background-color: transparent; 
 
    z-index: 1; 
 
    display: none; 
 
    min-width: 10px; 
 
    text-align: left; 
 
    left: 0; 
 
} 
 

 
.dropbtn:hover { 
 
    color: white; 
 
} 
 

 
.dropdown-content a { 
 
    color: #04116f; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    font-size: 13px; 
 
} 
 

 
.dropdown-content a:hover { 
 
    color: white; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
    text-decoration: underline; 
 
} 
 

 
.sidebar { 
 
    display: block; 
 
    position: relative; 
 
    top: -650px; 
 
    bottom: 0px; 
 
    left: -30px; 
 
    width: 120px; 
 
    padding: 10px; 
 
    background: transparent; 
 
    z-index: 0; 
 
} 
 

 
.sidebar ul { 
 
    cursor: pointer; 
 
    list-style: none; 
 
    color: white; 
 
    line-height: 2; 
 
} 
 

 
body { 
 
    margin: 0px; 
 
    top: 0; 
 
    width: 100%; 
 
    max-height: 10%; 
 
    background-image: url(http://i.imgur.com/yiMoYpV.jpg); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 20px 50px center; 
 
    background-attachment: fixed; 
 
} 
 

 
.content { 
 
    display: block; 
 
    margin-right: 0px; 
 
    padding: 0px; 
 
    margin-bottom: 700px; 
 
    position: relative; 
 
    max-width: 1500px; 
 
    max-height: 500px; 
 
} 
 

 
p { 
 
    display: block; 
 
    padding: 40px; 
 
    position: relative; 
 
    max-width: 500px; 
 
    max-height: 500px; 
 
    width: 100%; 
 
    left: 50%; 
 
    height: 200px; 
 
    top: 120px; 
 
    font-family: monospace; 
 
    font-size: 15px; 
 
    line-height: 2; 
 
    margin-bottom: -70px; 
 
    color: goldenrod; 
 
    text-align: left; 
 
} 
 

 
.footer { 
 
    margin: 100px 0 0 0; 
 
    display: flex; 
 
    flex-flow: row; 
 
    justify-content: center; 
 
    padding-bottom: 2px; 
 
    align-content: space-between; 
 
    background: transparent; 
 
    overflow: hidden; 
 
} 
 

 
.footer ul { 
 
    text-align: center; 
 
    list-style: none; 
 
    display: inline-flex; 
 
    color: white; 
 
    text-decoration: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<header> 
 
    <h2 style="bottom: -130px"> 
 
    <a href="#" class=h ead-link> A B E L</a> 
 
    </h2> 
 
    <div class="dropdown" style="float;right"> 
 
    <button class="dropbtn">Menu</button> 
 
    <div class="dropdown-content" style="right;0"> 
 
     <a href="#">About </a> 
 
     <a href="#">Portfolio</a> 
 
     <a href="#">Contact</a> 
 
    </div> 
 
    </div> 
 
    <div class="title"></div> 
 
    <title>A B E L </title> 
 
</header> 
 

 
<body> 
 
    <div id="hl-content" class="content"></div> 
 

 
    <p> 
 
    <span style="color:navajowhite"> 
 
     <b>Hello, Welcome to my website.</b> 
 
    </span> 
 
    <BR></BR> 
 

 
    My name is Abel, a senior college student currently residing in the Bay Area. This portfolio will give you a good background about me including my specialties, expertise and even hobbies. As you can probably tell from the background pictures, I like traveling 
 
    and taking photos! 
 
    </p> 
 
    <p>This is my first ever website that I created using HTML and CSS, and it's a pleasure to finally be able to share it with you. I am happy to receive any feedback, recommendations or opportunities from you, so don't hesitate to contact me.</p> 
 
    <div class="footer"> 
 
    <ul> 
 
     <li><a href="#" target="#"> About</a></li> 
 
     <li><a href="#" target="#">Portfolio</a></li> 
 
     <li> <a href="#" target="#"> Contact </a></li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

正如你所看到的文字裝飾和顏色不正常工作。

我該如何解決這個問題？

來源

2017-09-04 Abel

爲什麼你的問題上的「javascript」標記？ – nnnnnn

歡迎來到StackOverflow！我已經格式化了你的代碼，但是不幸的是，你的代碼仍然**有語法錯誤**（例如''以外的寫入輸出）**。請閱讀[**的基本知識**]（https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics），並確保您遵循所需的HTML結構，以便您的代碼正確顯示輸出。您可以使用[** W3標記驗證器**]（https://validator.w3.org）驗證您的代碼是否正確。 –

.footer > ul > li > a { 
    color: white; 
    text-decoration: none; 
}

試試這個。

來源

2017-09-04 03:17:53 zynkn

您需要明確指定頁腳中的鏈接樣式。

.footer ul a { 
    text-decoration:none; 
}

來源

2017-09-04 03:18:26

您需要添加這個CSS：

.footer ul li a { 
    text-decoration:none; 
}

來源

2017-09-04 04:49:02

不錯的建議。我只想要這個。謝謝。 –

我已經盡我所能，這可能有助於按照您的要求（下劃線和顏色）：

在代碼中添加此，

.footer ul li a { 
 
    text-decoration: none; 
 
    color: tan; 
 
    padding: 5px; 
 
    } 
 
    
 
    .footer ul li a:hover { 
 
    text-decoration: underline; 
 
    }

欣賞它是否足夠有用。

來源

2017-09-04 05:51:11

頁腳文字裝飾不起作用

回答

相關問題