Question

HTML：

<html>
<head>
  <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css" media="screen" />
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
  <script type="text/javascript"></script>
</head>
<body>
<div class="navWrapper">
  <nav id="nav">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
  </nav>
</div><!--End of Nav-->
  <a id ="home" class="smooth"></a>
  <div id="page1">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-4"></div>
      <div class="col-xs-4">
        <h1 class="firstTitle text-primary text-center">Hi, I'm First Last</h1>
        <h3 class="subTitle text-center">The most interesting man in the world</h3>
        <img src="imgage.jpg" class="firstImg center-block img-rounded img-responsive" alt="First Last Resume">
      </div>
      <div class="col-xs-4 linkedIn"><div class="LI-profile-badge"  data-version="v1" data-size="medium" data-locale="en_US" data-type="horizontal" data-theme="dark" data-vanity="#linkedin-info"><a class="LI-simple-link" href='www.linkedin.com'>First Last</a></div></div>
    </div>
    <div class="row" id="quote">
      <div class="col-xs-4"></div>
      <div class="col-xs-4"><blockquote><p><em>"Striving for excellence every day, in everything that I do."</em></p><footer>First Last</footer></blockquote></div>
      <div class="col-xs-4"></div>
      </div>
  </div>
</div><!--End of Page 1-->
    <a id ="about" class="smooth"></a>
    <div id="page2">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-4 aboutMe"><i class="fa fa-commenting-o" aria-hidden="true"></i>
          <h1>About Me</h1>
          <p>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.</p>
        </div>
        <div class="col-xs-4"></div>
        <div class="col-xs-4"></div>
      </div>
      </div>
    </div><!--end of page 2-->
</body>
</html>

CSS：

#nav {
  position: fixed;
  width: 100%;
  height:50px;
  text-align: center;
  background-color: gray;
  z-index: 1000;
}

#nav ul {
  display: inline;
}

#nav li {
  display: inline;
}

#nav a {
  padding: 14px 16px;
  display: inline-block;
  color: white;
  font-family: sans-serif;
}


#nav a:hover {
  background-color: #0C5DA5;
}

#nav a:active {
  text-decoration: underline;
  color: yellow;
}



blockquote {
  text-align: center;
  position: relative;
}

#quote {
  padding-top: 15px;
}

.linkedIn {
  top: 30px;
  float: right;
}
.firstTitle{
  font-family: lobster, monospace;
  color: blue;
}

.subTitle {
  position: relative;
  top: 0px;
  font-family: lobster, monospace;
  color: black;
  font-size: 15px;
}

.firstImg {
  position: relative;
  width: 264px;
  height: 296px;
  border-color: gray;
  border-width: 15px;
  border-style: solid;
  top: 0px;
}

#page1 {
  padding-top: 40px;
  height: 800px;
}

#page2 {
  height: 800px;
  background-color: red;
}

是否有人能够帮助我理解为什么我的第二页不会直接在导航栏下打开，而是在它下方稍微打开？真的在这一个上旋转我的轮子并且找不到任何东西。

提前致谢！

Answer 1

这是div＃page1的css：

#page1 {
    padding-top: 40px;
    height: 800px;
}

您需要在padding-top: 60px;上添加#page2，才能正常显示您的“我”页面。您可以根据需要更改填充的大小。您需要添加填充，因为当您使用id跳转到页面的一部分时，需要计算导航栏的高度。浏览器将跳转，以便跳跃的div准确对齐窗口的顶部。但是您的导航栏占据了50px的高度，这就是您的div #page2的一部分被覆盖的原因。

以下是我的修改：http://codepen.io/anon/pen/WoYmVq

-

或者，您可以在当前的＃page2 div之前创建一个id为＃page2的空div，并将当前的＃page2 div更改为其他id / class。给＃page2 div一个50px的高度。现在，当您点击＆＃34;关于我＆＃34;时，您将跳转到空的＃page2 div，它将被导航栏覆盖

这是一个演示：http://codepen.io/anon/pen/VmVNLx

在单页固定导航网站

1 个答案: