只有第一页单页固定的导航网站的导航栏后打开了

http://codepen.io/abravo227/pen/MbzxBW 只有第一页单页固定的导航网站的导航栏后打开了

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; 
}

会有人能够帮助我理解为什么我的第二个页面不直接在导航栏下打开，而是在它下面一点点打开？真正旋转我的轮子，并没有找到任何搜索。

在此先感谢！

来源

2016-12-15 Angelo Bravo

这是DIV＃第1页的CSS：

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

您需要在#page2添加padding-top: 60px;你关于我的页面才能正确显示。您可以根据需要更改填充的大小。您需要添加填充项，因为当您跳转到id页面的一部分时，需要计算导航栏的高度。浏览器将跳转，以便您跳转的div完全对齐到窗口的顶部。但是您的导航栏高度为50px，这就是为什么您的div #page2的一部分被覆盖。

这里是我的修改：http://codepen.io/anon/pen/WoYmVq

或者，您可以将当前的＃2页DIV之前创建一个ID＃2页的空div，并改变当前的＃2页格到一些其他的ID /类。给＃page2 div 50px的高度。现在，当你点击“关于我”，你会跳转到空＃第2页格，这将是你的导航栏

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

来源

2016-12-15 20:57:35 Alic

但是当我向上滚动，我看到了一堆从填充的红色空间。我试图让它在红色的开始真正开始。那可能吗？ –

请参阅我编辑的答案解释。对的，这是可能的。你可以做一个空的潜水，高度为50-60px，并用id page2命名，而不是page2的真实div。 – Alic

下面是一个演示：http://codepen.io/anon/pen/VmVNLx – Alic

只有第一页单页固定的导航网站的导航栏后打开了

回答

相关问题