点击锚点跳转，顶部菜单栏遮住了内容

最新推荐文章于 2024-05-24 11:23:20 发布

wcy7916

最新推荐文章于 2024-05-24 11:23:20 发布

阅读量2k

点赞数

分类专栏： CSS javascript

本文链接：https://blog.csdn.net/wcy7916/article/details/91601759

版权

javascript 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

CSS

21 篇文章 0 订阅

订阅专栏

在这里插入图片描述

html:

//顶部菜单栏
<div class="eudicmdMenuList">
   <ul class="ulmenulist">
      <li class="de_activeMenu"><a class="menu-level-1" data-href="字母表" level="1">字母表</a><i class="menuline"></i></li>
      <li class=""><a class="menu-level-1" data-href="语音介绍" level="1">语音介绍</a><i class="menuline"></i></li>
      <li class=""><a class="menu-level-1" data-href="重音规则" level="1">重音规则</a><i class="menuline"></i>
      </li><li class=""><a class="menu-level-1" data-href="语调" level="1">语调</a><i class="menuline"></i></li>
   </ul>
</div>

//顶部菜单对应的内容模块，只取了每一个模块内容的标题
<h1 data-id="字母表" class="h1_new h1_new_first">一、字母表</h1>
<h1 data-id="语音介绍" class="h1_new">二、语音介绍</h1>
<h1 data-id="重音规则" class="h1_new">三、重音规则</h1>
<h1 data-id="语调" class="h1_new">四、语调</h1>

css:
根据需要设置h1的margin，padding，我用的是margin

.h1_new{
    margin-top:20px;
    margin-bottom: 20px;
    font-size: 20px;
    color: #333;
   padding-left: 0px;
}
.h1_new_first {
    position: relative;
}

但我一开始用的是

h1:target {
    margin-top: -40px !important;
    padding-top: 60px;
}

这段代码有个问题，刚开始进来的的 h1的上边距和和点击顶部菜单后 h1 的边距是不同的，遂弃用。