页脚文字装饰不起作用

我正在设置页脚，但是我无法删除文字下的行。我也想改变文字的颜色。我尝试使用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

页脚文字装饰不起作用

回答

相关问题