使用HTML/CSS/JS开发作品集页面时div样式互相影响故障求助

1. 核心问题1：HTML导航栏标签未闭合 #

你导航栏所有<a>标签都没有添加结束标签</a>，浏览器解析时会自动补全闭合标签，错误将后续所有页面内容包裹在导航的<a href="#">标签内，直接导致两个故障：

• 点击页面任意区域都会触发a标签跳转，回到顶部navbar位置
• a标签的样式会继承给所有子元素，导致整个右侧column区块都应用了按钮相关的样式

修复方法：给所有导航栏的a标签补全结束标签：

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Skills</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Experience</a></li>
    <li><a href="#">Contact</a></li>
</ul>

2. 核心问题2：CSS注释语法错误 #

你注释掉首页HIRE ME按钮样式时，注释语法书写错误，导致CSS规则解析异常：
原错误代码：

/*    .home .home-content a{
    display: inline-block;
    background: crimson;
    color: white;
    font-size: white;
    padding: 12px 36px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}    HIRE ME BUTTON STYLE*

.home .home-content a:hover{
    color: crimson;
    background: none; */

注释语法错误导致后续的About板块样式解析异常，出现样式错乱。

修复方法：修正这段注释的语法，确保注释正确闭合：

/* HIRE ME BUTTON STYLE
.home .home-content a{
    display: inline-block;
    background: crimson;
    color: white;
    font-size: white;
    padding: 12px 36px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}
.home .home-content a:hover{
    color: crimson;
    background: none; 
}
*/

修复以上两个问题后，即可恢复正常效果：仅下载按钮应用对应样式，点击对应区域不会跳转到顶部。

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