html - 滚动到实际元素下方一点

标签 html css navbar

我正在创建一个演示页面，它即将准备就绪。 这是它的 codepen 链接。 https://codepen.io/kamalpancholi/full/wvGMgEK?editors=1100 但我面临两个问题。

[1] 当我单击导航栏链接时，页面滚动到实际元素下方一点。结果一些实际内容位于标题下方。我正在使用 sticky header 。

[2] 我不明白为什么我需要在 CSS 媒体查询中使用这么多 !important ？我在媒体查询中做错了什么吗？媒体查询中提供的值从未更新，直到我使用 !important 。

下面是代码

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

* {margin: 0; padding: 0;}
body{ font-family: 'oswald', sans-serif}
.text-center { text-align: center; }
.text-left { text-align: center; }
.block { display: block; }
.inline { display: inline; }
.bold { font-weight: bold; }
.no-decor-link {
  text-decoration: none;
  color: black;
}
.no-bullets { list-style-type: none; }
.orangered { color: orangered; }
.ubuntu { font-family: 'Ubuntu', sans-serif }
.oswald { font-family: 'Oswald', sans-serif }

#header {
  background-color: #FFDEAD;
  position: sticky;
  top: 0;
  z-index: 2;
}
#logoNtitle {
  display: inline-block;
}
#header-img {
  width: 80px;
  height: auto;
  margin: 1em auto 0.7em 10vw;
}
#header-text{
  position: relative;
  top: -14px;
  font-size: 2em;
  margin-left: 0.8em;
}

#nav-bar {
  float: right;
  position: relative;
  top: 2.3em;
  right: 2em;
  font-family: 'Ubuntu', sans-serif;
}
#nav-bar a{
  padding: 1em 0.5em 1em 0.5em;
}
#main {
  width: 1020px;
  margin: auto;
  background-color: #e6e6e6;
  padding: 0.05px; /* to avoid margin collapsing */
}
#main p {
  margin: 1em;
}
@media(max-width: 1020px) {
  #main { width: 800px; }
  #video {
    width: 500px !important;
    height: 281.25px !important;
  }
  #demo {
    margin: 1em auto 3em !important;
  }
}
@media(max-width: 800px) {
  #main { width: 100%; }
  #features-1 .ico { display: none !important; }
  #features-1 { width: 80% !important; }
  #nav-bar {
    float: none;
    position: initial;
    text-align: center;
    padding-bottom: 1em;
  }
  #logoNtitle {
    display: block;
    width: 320px;
    margin: auto;
  }
  #header-img {
    margin-left: auto;
  }
  #demo {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
  }
  #pricing { margin-bottom: 1.2em; }
  #pricing-content {
    display: initial !important;
    padding: 0.05px;
    margin: 1em auto !important;
  }
  .card {
    width: 300px;
    margin: 1em auto 0.5em;
  }
}
@media(max-width: 550px) {
  #video {
    width: 90vw !important;
    height: 50.625vw !important;
  }
}
#email {
  display: block;
  margin: 1em auto 1em auto;
  border-radius: 3px;
  border: 2px solid black;
  padding: 0.3em 7px 0.3em 7px;
  color: #1b2b34;
  min-width: 15em;
}
#submit {
  display: block;
  margin: auto auto 1em auto;
  background-color: #5fce6a;
  border: none;/*1px solid grey;*/
  padding: 0.5em 1em;
  font-size: 1em;
}
#features-1{
  width: 50%;
  margin: 3em auto 2em;
}
.flex {
  display: flex;
  flex-direction: row;
}
#features-1 .ico {
  display: flex;
  height: 100px;
  width: 90px;
  justify-content: center;
  align-items: center;
  color: orangered;
}
#features-1 .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100px;
  width: 75vw;
  padding-left: 30px;
  padding-right: 10px;
}

#features-2 {
  margin: auto;
  display: flex;
  flex-direction: column;
}

#features-2 ul {
  list-style-type: none;
  line-height: 2em;
  margin: auto;
}
#features-2 .feature-title {
  font-size: 1.2em;
  margin: 1% auto;
}
#features ul li:before {
  content: '\2713';
  display: inline-block;
  position: relative;
  right: 6px;
  font-weight: bold;
}
#demo {
  margin: 2em auto 3em;
}
#video-title {
  text-align: center;
  padding: 1em;
  font-family: 'ubuntu', sans-serif;
}
#video {
  display: block;
  width: 729px;
  height: 410px;
  margin: auto;
}
#pricing-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1.3em;
  width: 95%;
  margin: 2em auto;
}
.card {
  border: 2px solid black;
  text-align: center;
}
.card h3 {
  background-color: #BDBBBB;
  padding: 0.5em 1em;
}
.card h2 {
  font-weight: bold;
  line-height: 2em;
}
.card ul {
  line-height: 2em;
  font-family: 'ubuntu';
}
.card button {
  padding: 0.5em 2.3em;
  margin: 1em auto;
  background-color: orangered;
  border: none;
  font-family: 'ubuntu';
  font-weight: bold;
}
.true:before {
  content: '\2713';
  display: inline-block;
  position: relative;
  right: 6px;
  font-weight: bold;
}
.false:before {
  content: '\2717';
  display: inline-block;
  position: relative;
  right: 6px;
  font-weight: bold;
}

footer div {
  background-color: #BDBBBB;
  font-family: 'ubuntu';
  padding: 0.05px;
}

footer ul {
  padding-top: 1.3em;
  padding-bottom: 0.5em;
}
footer li {
  display: inline;
  padding-left: 1em;
  padding-right: 1em;
}
.footer-content p {
  margin-top: 0px !important;
  font-size: 13px;
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Product page</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<header id="header">
  <div id="logoNtitle">
    <img src="https://www.freepnglogos.com/uploads/eagles-png-logo/eagle-sports-png-logos--0.png" alt="product logo" id="header-img" class="inline">
    <span id="header-text">The Lorem Ipsum</span>
  </div>
  <nav id="nav-bar">
    <div id="links">
      <a href="#features" class="no-decor-link nav-link"><span>Features</span></a>
      <a href="#demo" class="no-decor-link nav-link"><span>Demo</span></a>
      <a href="#pricing" class="no-decor-link nav-link"><span>Pricing</span></a>
      <a href="#contact" class="no-decor-link nav-link"><span>Contact Us!</span></a>
    </div>
  </nav>
</header>

<div id="main">
  <p class="text-center ubuntu pclass"> Provide your email for more information about product </p>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <label for="email">
      <input type="email" id="email" name="email" placeholder="Enter your email address">
    </label>
    <input type="submit" value="Submit" id="submit">
  </form>
  <div id="features" class="ubuntu">
    <div id="features-1">
      <div class="flex">
        <div class="ico"><i class="fas fa-air-freshener fa-2x"></i></div>
        <div class="content">
          <h3>Premium quality material</h3>
          <span>Lorem ipsum dolor sit amat, consecite adispicing elit, ipsum dolor sit amat, consecite adispicing elit</span>
        </div>
      </div>
      <div class="flex">
        <div class="ico"><i class="fas fa-shipping-fast fa-2x"></i></div>
        <div class="content">
          <h3>Fast shipping</h3>
          <span>Lorem ipsum amat, dolorem ipsum</span>
        </div>
      </div>
      <div class="flex">
        <div class="ico"><i class="fas fa-user-clock fa-2x"></i></div>
        <div class="content">
          <h3>Timely maintenance updates</h3>
          <span>Lorem ipsum dolor sit amat, consecite adispicing elit</span>
        </div>
      </div>
    </div>
    <div id="features-2">
      <p class="bold feature-title">Why to choose us ?</p>
      <ul>  <!--  use css list-style-type: none; to remove bullets
                  use list-style-image: url(img.png) to use an image as bullet -->
        <li>Lorem ipsum dolor</li>
        <li>sit amet, consectetur adipiscing elit</li>
        <li>Nunc tempor</li>
        <li>dolorem ipsum quia</li>
        <li>Lorem ipsum dolor</li>
        <li>sit amet, consectetur adipiscing elit</li>
        <li>Nunc tempor</li>
        <li>dolorem ipsum quia</li>
      </ul>
    </div>
  </div>
  
  <div id="demo">
    <h2 id="video-title">Here is how it works !!!</h2>
    <div class="video-container">
      <iframe width="729" height="410" id="video" src="https://www.youtube.com/embed/CmzKQ3PSrow" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
  
  <div id="pricing">
    <div id="pricing-content">
      <div class="card">
        <h3>Basic Package</h3>
        <h2>$500</h2>
        <ul class="no-bullets">
          <li class="true">Lorem ipsum</li>
          <li class="false">Dolor sit, amat</li>
          <li class="false">Nunc tempor</li>
          <li class="false">dolorem ipsum quia</li>
        </ul>
        <button type="button">Select</button>
      </div>
      <div class="card">
        <h3>Premium Package</h3>
        <h2>$600</h2>
        <ul class="no-bullets">
          <li class="true">Lorem ipsum</li>
          <li class="true">Dolor sit, amat</li>
          <li class="false">Nunc tempor</li>
          <li class="false">dolorem ipsum quia</li>
        </ul>
        <button type="button">Select</button>
      </div>
      <div class="card">
        <h3>Pro Package</h3>
        <h2>$800</h2>
        <ul class="no-bullets">
          <li class="true">Lorem ipsum</li>
          <li class="true">Dolor sit, amat</li>
          <li class="true">Nunc tempor</li>
          <li class="true">dolorem ipsum quia</li>
        </ul>
        <button type="button">Select</button>
      </div>
    </div>
  </div>
  
  <footer id="contact">
    <div class="footer-content">
      <ul class="no-bullets">
        <li><a href="#" class="no-decor-link">Privacy</a></li>
        <li><a href="#" class="no-decor-link">Terms</a></li>
        <li><a href="#" class="no-decor-link">Contact</a></li>
      </ul>
      <p>&copyThe Lorem Ipsum</p>
    </div>
  </footer>
</div>
<!-- partial -->
  <script src='https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js'></script>
</body>
</html>

最佳答案

我已将 padding-top: 75px; 和 padding-top: 40px; 添加到页面 anchor ，为其提供您正在寻找的缓冲区。

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'oswald', sans-serif
}

.text-center,
.text-left {
  text-align: center;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.bold {
  font-weight: bold;
}

.no-decor-link {
  text-decoration: none;
  color: black;
}

.no-bullets {
  list-style-type: none;
}

.orangered {
  color: orangered;
}

.ubuntu {
  font-family: 'Ubuntu', sans-serif;
}

#features {
  padding-top: 40px;
}

#demo {
  padding-top: 75px;
}

.oswald {
  font-family: 'Oswald', sans-serif
}

#header {
  background-color: #FFDEAD;
  position: sticky;
  top: 0;
  z-index: 2;
}

#logoNtitle {
  display: inline-block;
}

#header-img {
  width: 80px;
  height: auto;
  margin: 1em auto 0.7em 10vw;
}

#header-text {
  position: relative;
  top: -14px;
  font-size: 2em;
  margin-left: 0.8em;
}

#nav-bar {
  float: right;
  position: relative;
  top: 2.3em;
  right: 2em;
  font-family: 'Ubuntu', sans-serif;
}

#nav-bar a {
  padding: 1em 0.5em 1em 0.5em;
}

#main {
  width: 1020px;
  margin: auto;
  background-color: #e6e6e6;
  padding: 0.05px;
  /* to avoid margin collapsing */
}

#main p {
  margin: 1em;
}

@media(max-width: 1020px) {
  #main {
    width: 800px;
  }
  #video {
    width: 500px !important;
    height: 281.25px !important;
  }
  #demo {
    margin: 1em auto 3em !important;
  }
}

@media(max-width: 800px) {
  #main {
    width: 100%;
  }
  #features-1 .ico {
    display: none !important;
  }
  #features-1 {
    width: 80% !important;
  }
  #nav-bar {
    float: none;
    position: initial;
    text-align: center;
    padding-bottom: 1em;
  }
  #logoNtitle {
    display: block;
    width: 320px;
    margin: auto;
  }
  #header-img {
    margin-left: auto;
  }
  #demo {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
  }
  #pricing {
    margin-bottom: 1.2em;
  }
  #pricing-content {
    display: initial !important;
    padding: 0.05px;
    margin: 1em auto !important;
  }
  .card {
    width: 300px;
    margin: 1em auto 0.5em;
  }
}

@media(max-width: 550px) {
  #video {
    width: 90vw !important;
    height: 50.625vw !important;
  }
}

#email {
  display: block;
  margin: 1em auto 1em auto;
  border-radius: 3px;
  border: 2px solid black;
  padding: 0.3em 7px 0.3em 7px;
  color: #1b2b34;
  min-width: 15em;
}

#submit {
  display: block;
  margin: auto auto 1em auto;
  background-color: #5fce6a;
  border: none;
  /*1px solid grey;*/
  padding: 0.5em 1em;
  font-size: 1em;
}

#features-1 {
  width: 50%;
  margin: 3em auto 2em;
}

.flex {
  display: flex;
  flex-direction: row;
}

#features-1 .ico {
  display: flex;
  height: 100px;
  width: 90px;
  justify-content: center;
  align-items: center;
  color: orangered;
}

#features-1 .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100px;
  width: 75vw;
  padding-left: 30px;
  padding-right: 10px;
}

#features-2 {
  margin: auto;
  display: flex;
  flex-direction: column;
}

#features-2 ul {
  list-style-type: none;
  line-height: 2em;
  margin: auto;
}

#features-2 .feature-title {
  font-size: 1.2em;
  margin: 1% auto;
}

#features ul li:before {
  content: '\2713';
  display: inline-block;
  position: relative;
  right: 6px;
  font-weight: bold;
}

#demo {
  margin: 2em auto 3em;
  padding-top: 75px;
}

#video-title {
  text-align: center;
  padding: 1em;
  font-family: 'ubuntu', sans-serif;
}

#video {
  display: block;
  width: 729px;
  height: 410px;
  margin: auto;
}

#pricing-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1.3em;
  width: 95%;
  margin: 2em auto;
}

.card {
  border: 2px solid black;
  text-align: center;
}

.card h3 {
  background-color: #BDBBBB;
  padding: 0.5em 1em;
}

.card h2 {
  font-weight: bold;
  line-height: 2em;
}

.card ul {
  line-height: 2em;
  font-family: 'ubuntu';
}

.card button {
  padding: 0.5em 2.3em;
  margin: 1em auto;
  background-color: orangered;
  border: none;
  font-family: 'ubuntu';
  font-weight: bold;
}

.true:before {
  content: '\2713';
  display: inline-block;
  position: relative;
  right: 6px;
  font-weight: bold;
}

.false:before {
  content: '\2717';
  display: inline-block;
  position: relative;
  right: 6px;
  font-weight: bold;
}

footer div {
  background-color: #BDBBBB;
  font-family: 'ubuntu';
  padding: 0.05px;
}

footer ul {
  padding-top: 1.3em;
  padding-bottom: 0.5em;
}

footer li {
  display: inline;
  padding-left: 1em;
  padding-right: 1em;
}

.footer-content p {
  margin-top: 0px !important;
  font-size: 13px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CodePen - Product page</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <header id="header">
    <div id="logoNtitle">
      <img src="https://www.freepnglogos.com/uploads/eagles-png-logo/eagle-sports-png-logos--0.png" alt="product logo" id="header-img" class="inline">
      <span id="header-text">The Lorem Ipsum</span>
    </div>
    <nav id="nav-bar">
      <div id="links">
        <a href="#features" class="no-decor-link nav-link"><span>Features</span></a>
        <a href="#demo" class="no-decor-link nav-link"><span>Demo</span></a>
        <a href="#pricing" class="no-decor-link nav-link"><span>Pricing</span></a>
        <a href="#contact" class="no-decor-link nav-link"><span>Contact Us!</span></a>
      </div>
    </nav>
  </header>

  <div id="main">
    <p class="text-center ubuntu pclass"> Provide your email for more information about product </p>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <label for="email">
          <input type="email" id="email" name="email" placeholder="Enter your email address">
        </label>
      <input type="submit" value="Submit" id="submit">
    </form>
    <div id="features" class="ubuntu">
      <div id="features-1">
        <div class="flex">
          <div class="ico"><i class="fas fa-air-freshener fa-2x"></i></div>
          <div class="content">
            <h3>Premium quality material</h3>
            <span>Lorem ipsum dolor sit amat, consecite adispicing elit, ipsum dolor sit amat, consecite adispicing elit</span>
          </div>
        </div>
        <div class="flex">
          <div class="ico"><i class="fas fa-shipping-fast fa-2x"></i></div>
          <div class="content">
            <h3>Fast shipping</h3>
            <span>Lorem ipsum amat, dolorem ipsum</span>
          </div>
        </div>
        <div class="flex">
          <div class="ico"><i class="fas fa-user-clock fa-2x"></i></div>
          <div class="content">
            <h3>Timely maintenance updates</h3>
            <span>Lorem ipsum dolor sit amat, consecite adispicing elit</span>
          </div>
        </div>
      </div>
      <div id="features-2">
        <p class="bold feature-title">Why to choose us ?</p>
        <ul>
          <!--  use css list-style-type: none; to remove bullets
                      use list-style-image: url(img.png) to use an image as bullet -->
          <li>Lorem ipsum dolor</li>
          <li>sit amet, consectetur adipiscing elit</li>
          <li>Nunc tempor</li>
          <li>dolorem ipsum quia</li>
          <li>Lorem ipsum dolor</li>
          <li>sit amet, consectetur adipiscing elit</li>
          <li>Nunc tempor</li>
          <li>dolorem ipsum quia</li>
        </ul>
      </div>
    </div>

    <div id="demo">
      <h2 id="video-title">Here is how it works !!!</h2>
      <div class="video-container">
        <iframe width="729" height="410" id="video" src="https://www.youtube.com/embed/CmzKQ3PSrow" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>

    <div id="pricing">
      <div id="pricing-content">
        <div class="card">
          <h3>Basic Package</h3>
          <h2>$500</h2>
          <ul class="no-bullets">
            <li class="true">Lorem ipsum</li>
            <li class="false">Dolor sit, amat</li>
            <li class="false">Nunc tempor</li>
            <li class="false">dolorem ipsum quia</li>
          </ul>
          <button type="button">Select</button>
        </div>
        <div class="card">
          <h3>Premium Package</h3>
          <h2>$600</h2>
          <ul class="no-bullets">
            <li class="true">Lorem ipsum</li>
            <li class="true">Dolor sit, amat</li>
            <li class="false">Nunc tempor</li>
            <li class="false">dolorem ipsum quia</li>
          </ul>
          <button type="button">Select</button>
        </div>
        <div class="card">
          <h3>Pro Package</h3>
          <h2>$800</h2>
          <ul class="no-bullets">
            <li class="true">Lorem ipsum</li>
            <li class="true">Dolor sit, amat</li>
            <li class="true">Nunc tempor</li>
            <li class="true">dolorem ipsum quia</li>
          </ul>
          <button type="button">Select</button>
        </div>
      </div>
    </div>

    <footer id="contact">
      <div class="footer-content">
        <ul class="no-bullets">
          <li><a href="#" class="no-decor-link">Privacy</a></li>
          <li><a href="#" class="no-decor-link">Terms</a></li>
          <li><a href="#" class="no-decor-link">Contact</a></li>
        </ul>
        <p>&copyThe Lorem Ipsum</p>
      </div>
    </footer>
  </div>
  <script src='https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js'></script>
</body>

</html>

关于html - 滚动到实际元素下方一点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63571713/

上一篇：oracle - 旧式外连接 (+) 不能与 ANSI 连接一起使用，Oracle 数据库错误代码 ORA-25156

下一篇：assembly - 为什么 GCC 选择 dword movl 将长移位计数复制到 CL？

相关文章：

javascript - 单击时将在 HTML 表中显示隐藏列的按钮

javascript - 当它们是多个 w.r.to parent div 时删除子 div

html - ul 和 li 不接受在里面有标签

html - 使用 colspan 时双点边框

html - div 的背景不随内容滚动

html - Bootstrap 导航栏下拉菜单按钮在折叠汉堡中的导航栏时不显示

javascript - 使用 jQuery 获取页面中不存在的类/id 的 css 属性

css - Web 浏览器样式表是否会覆盖所有其他 CSS 样式？

css - superfish 菜单子(monad)菜单居中

javascript - 将导航链接更改为按钮，使其看起来与打开并加载外部 div 相同

©2024 IT工具网  联系我们