如何去除导航栏及See My Resume链接下划线并设置导航文字为黑色

一、去除链接下划线 #

问题根源： #

1. 导航栏的<a>标签默认自带下划线，你仅在鼠标悬停状态设置了text-decoration: none;，但默认状态未做处理；
2. CSS中写的header{}选择器无效——HTML里导航栏是<nav class="header">，需用.header类选择器匹配；
3. 「See My Resume」的<a>标签未单独设置去除下划线的样式。

修改代码： #

在你的CSS中添加/调整以下内容：

/* 修正导航栏选择器，替换原有无效的header{} */
.header {
  margin: 3% 10% 3% 10%;
  padding: 37px 161px;
  align-items: center;
}

/* 去除导航栏链接默认下划线，同时设置黑色文字（解决第二个问题） */
.menu li a {
  text-decoration: none;
  color: #000;
}

/* 保留原有的hover变色效果 */
.menu li a:hover {
  color: rgb(82, 198, 235);
}

/* 去除「See My Resume」链接的下划线 */
#contact a {
  text-decoration: none;
}

二、设置导航栏文字为黑色 #

上述代码中.menu li a里的color: #000;已经直接解决这个问题，无需额外操作。

关键修改后的完整CSS片段（仅展示修改部分，其余代码保留）： #

body
{
    margin:0%;
    font-family: Hoefler Text;
    background-color: rgb(233, 245, 248);
    color:rgb(7, 9, 10);
}

/* 修正导航栏选择器 */
.header{
   margin: 3% 10% 3% 10%;
    padding: 37px 161px;
     align-items: center; 
}

.menu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: right;
    
}
.menu li{
    display: inline-block;
    padding: 20px 40px;
    font-size: 20px;
    
}
/* 新增：导航栏链接默认样式 */
.menu li a {
    text-decoration: none;
    color: #000;
}
.menu li a:hover {
    color: rgb(82, 198, 235);
} 

/* 其他原有CSS代码不变 */

#contact{
    margin: 5px;
    background-color: rgb(37, 198, 235);
    display: inline-block;
    padding: 2% 5%;
    font-size: 20px;
    font-weight: 501;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    text-align: left;
    text-decoration: none;
    transition: background 0.2s;
}
/* 新增：去除简历链接下划线 */
#contact a {
    text-decoration: none;
}
#contact:hover{
    background:rgb(0, 28, 85);
}

/* 其他原有CSS代码不变 */

额外小修复： #

HTML的<head>标签内有一个多余的</div>，请删除，避免结构错误：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>""</title>
    <link rel="stylesheet" href="">
    <link rel="shortcut icon" href=""type="image/jpg">
    <!-- 删除本行的</div> -->
</head>

内容的提问来源于stack exchange，提问作者codewithchiefkabbz