在使用锚标记时,是否有可能在链接的顶部有额外的空间?

2022-10-14 23:30:24标签htmlcssweb-frontend
提问

body{
    padding: 0;
    margin:0;
    font-weight: bold;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#header{
    position: fixed;
    top: 0;
    margin: 0;
    background-color:rgb(0, 255, 170);
    height:60px;
    width:100%;
    margin-bottom: 20px;
}
.main-list{
    top: -57.5px;
    position:relative;
    list-style: none;
    text-align: right;
    padding-right: 10px;
    margin: 0;
    z-index: 1;
    margin-bottom: 10px;
    min-width: 1%;
}
.list-item{
    margin: 10px 5px;
    text-align: center;
    float: right;
    text-decoration: none;
    background-color: #333;
    color: white;
    border-radius: 5px;
    padding: 3px 5px;
    flex: border-box;
}
a:hover{
    background-color: gray;
    color: black;
}
#header h1{
    margin:0;
    padding: 10px;
    text-align: left;
}
.height{
    height: 700px
}
section{
    margin: -32px 10px 10px 10px;
    padding: 10px;
}
#help{
    padding-top: 70px;
    margin: 0;
}
#contact{
    padding-top: 70px;
}
#about{
    margin:0;
    padding-top: 70px;
}
#home{
    padding-top: 70px;
}
<!DOCTYPE html>
<html lang="en">
  <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>Website</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <header id="header">
      <h1>Website</h1>
      <nav class="main-nav">
        <ul class="main-list">
          <li>
            <a class="list-item button" href="#top" target="_top">Home</a>
          </li>
          <li>
            <a class="list-item button" href="#about" target="_top">About</a>
          </li>
          <li>
            <a class="list-item button" href="#help" target="_top">Help</a>
          </li>
          <li>
            <a class="list-item button" href="#contact" target="_top"
              >Contact</a
            >
          </li>
        </ul>
      </nav>
    </header>
    <section id="content">
    </br>
      <h1 id="about">About me</h1>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet at natus vitae voluptate ex ipsam aspernatur distinctio dolores? Neque, repudiandae.
      </p>
      <h1 id="help">Help</h1>
      <div class="height"></div>
      <a id="return" href="#top-content" target="_top">Return to top</a>
      <div class="height"></div>
      <p1 id="contact">Contact</p1>
      <div class="height"></div>
      <div class="height"></div>
    </section>
  </body>
</html>

我正在修改html和css。我目前在页面的顶部有一个固定的头。我不想有额外的填充物,在滚动页面时会让它看起来很尴尬。当点击链接时,是否有任何方法提供额外的空间?我看到了一些关于clip-path的东西,但我不确定这个标记的语法。

▼版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说cuoshuo.com——程序员的报错记录

部分内容根据CC版权协议转载,如果您希望取消转载请发送邮件到cuoshuo8@163.com

辽ICP备19011660号-5