html中如何点击导航栏就直接定位内容中的小标题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html中如何点击导航栏就直接定位内容中的小标题相关的知识,希望对你有一定的参考价值。

参考技术A html定位的方法:首先创建一个HTML示例文件;然后使用a标签写好3个菜单以及内容;接着给每个内容标题的a标签中加上name属性并添加“#链接”;最后在“#”前面加上具体的页面即可自动定位到这个页面的具体位置。

将导航定位在具有重叠 div 的下标题边框上 (HTML/CSS)

【中文标题】将导航定位在具有重叠 div 的下标题边框上 (HTML/CSS)【英文标题】:Positioning nav on lower header border with overlapping divs (HTML/CSS) 【发布时间】:2020-10-13 12:02:11 【问题描述】:

我正在尝试创建一个由三个 div 组成的简单网页:包含图像的标题 div、包含文本的内容 div 和包含导航元素和徽标的导航 div。我的目标是将标题 div 与导航 div 重叠,以便导航元素和徽标始终垂直居中放置在标题 div 的下边框上。

到目前为止,这是我的代码:

<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
          body 
            text-align: center;
          

          #headerimage 
            height: 100%;
            width: 100%;
            z-index: 50;
            position: relative;
          

          #headerimage > img 
            max-width: 100%;
            max-height: 100%;
            border: 6px;
            border-style: solid;
            border-color: #671013;
            

          #nav 
            width: 100%;
            overflow: visible;
            top: 97.75%;
            z-index: 100;
            position: absolute;
          

          #nav > img 
            text-align: center;
            vertical-align: middle;
            margin-top: -6.2%;
            height: 20%;
            width: 20%;
          

          .nav-element 
            width: 10%;
            height: 100%;
            padding: 5px;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            text-align: center;
            font-weight: bold;
            border: 4px;
            border-style: solid;
            border-color: #2d3139;
            background-color: white;
            color: #80857f;
          

          .nav-element:hover 
            background-color: #2d3139;
            color: white;
            cursor: pointer;
          

          .left 
            float: left;
            z-index: 100;
          

          .first 
            margin-left: 3%;
          

          .right 
            float: right;
            z-index: 100;
          

          .last 
            margin-right: 3%;
          

          #point2 
            margin-left: 9%;
          

          #point3 
            margin-right: 9%;
          

          #content 
            height: 100%;
            width: 100%;
          

          #text 
            padding-top: 8%;
            padding-left: 3%;
            padding-right: 3%;
            padding-bottom: 5%;
            text-align: justify center;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
          
        </style>
    </head>
<body>
  <div id="headerimage">
    <img src="https://images.pexels.com/photos/34577/pexels-photo.jpg"  />

    <div id="nav">
        <div id="point1" class="nav-element left first">
          Point 1
        </div>

      <div id="point2" class="nav-element left ">
        Point 2
      </div>
      
      <img src="https://pixabay.com/get/55e2d3454853a814f1dc8460da2932771736dfe6575074_640.png"  />
    
      <div id="point3" class="nav-element right last">
        Point 3
      </div>

      <div id="point4" class="nav-element right">
        Point 4
      </div>
    </div>
  </div>

  <div id="content">
    <div id="text">
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
        aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
        in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
        mollit anim id est laborum.</h1>
    </div>
  </div>
</body>
</html>

目前导航 div 并没有保持在下边界的中心,我的在线研究到目前为止还没有带来任何有用的结果,所以如果有人有想法指出我正确的方向,我会非常感激!

【问题讨论】:

什么时候不居中?当你调整屏幕大小时? 是的,我尝试使用带百分比的边距,但到目前为止没有成功 【参考方案1】:

希望这是你想要的:

nav img 
    margin-top: -40px;

#point1, #point2, #point3, #point4 
    margin-top: -40px;

根据需要微调边距。

【讨论】:

抱歉回答晚了,但感谢您,为四个点元素设置margin-top 有帮助

以上是关于html中如何点击导航栏就直接定位内容中的小标题的主要内容,如果未能解决你的问题,请参考以下文章

为啥一旦我滚动标题部分,引导导航栏就会消失?

layui如何左侧点击,右侧显示内容?

微信小程序如何设置地图导航

怎么查两个地点之间的城市

设置Eclipse/MyEclipse中编辑界面点击任何文件后Package Explorer导航自动定位该文件

如何控制在导航栏中显示的jquery mobile中的url