0
我新的网络开发和在这个例子中，我工作：http://codepen.io/wabibito/pen/RawGPo导航栏保持隐藏的内容在它之下
<head>
<title>Tiago Dias Ferreira</title>
<style>
ul {
list-style-type: none;
margin: auto auto;
overflow: hidden;
background-color: #333;
position: static;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top topnav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<a name="home"></a>
<h1 class="text-primary text-center">Tiago Dias Ferreira</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus aliquam velit eget luctus. Proin suscipit lorem ex, ut porta nulla dignissim eu. Praesent at tristique risus, sit amet lacinia urna. Quisque vitae congue mauris, et facilisis nulla. Sed quam dolor, blandit ac velit in, luctus vehicula felis. Donec fringilla urna dolor, ac semper quam congue non. Praesent vel nunc eleifend, mattis ipsum eget, vestibulum eros. Nunc et semper massa.
</p>
<p>
In tortor dui, cursus a velit ac, convallis hendrerit ligula. Nunc ultricies efficitur nisl. Suspendisse condimentum porttitor maximus. Morbi purus nunc, posuere id gravida ac, suscipit at urna. Phasellus non diam vitae mauris aliquet porttitor tincidunt id nibh. Nullam imperdiet nisl eu est imperdiet, porttitor vehicula metus iaculis. Donec rutrum eget tortor a consequat. Maecenas ac arcu erat. Fusce rhoncus nisl eget elementum pharetra. Proin a enim ac mauris mattis ultricies quis a dolor.
</p>
<p>
Nullam ornare non nibh sed cursus. Phasellus volutpat nisi eu nunc dignissim semper. Vivamus nec neque mi. Suspendisse potenti. Aliquam vehicula augue tristique bibendum faucibus. Nam in imperdiet orci, in molestie ante. Pellentesque maximus ex a risus gravida, eget rhoncus neque venenatis.
</p>
<p>
In nec imperdiet diam, at malesuada justo. Donec venenatis in nulla sed consequat. Nunc hendrerit, turpis ut viverra dapibus, tortor lorem consequat sem, ut dapibus massa nisl sit amet arcu. Proin tempor tincidunt ipsum et molestie. Pellentesque vulputate velit sit amet tellus iaculis, eget viverra nibh malesuada. Proin tristique nunc vitae magna cursus, at blandit dolor faucibus. Aenean dignissim sit amet arcu eget vestibulum.
</p>
<p>
Vivamus nec diam non urna pellentesque varius at non tellus. Pellentesque interdum faucibus maximus. Phasellus diam sapien, tincidunt quis cursus at, accumsan eget diam. Integer ullamcorper nulla nec justo consectetur, porta faucibus mauris gravida. Maecenas sagittis sodales velit, et tempor libero efficitur et. Suspendisse pulvinar at nisi quis interdum. In in vestibulum turpis, eget suscipit massa. Nullam faucibus sodales ornare. Mauris at ultricies ex, sit amet convallis lorem.
</p>
<a name="about"></a>
<h1 class="text-primary text-center">Tiago Dias Ferreira</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus aliquam velit eget luctus. Proin suscipit lorem ex, ut porta nulla dignissim eu. Praesent at tristique risus, sit amet lacinia urna. Quisque vitae congue mauris, et facilisis nulla. Sed quam dolor, blandit ac velit in, luctus vehicula felis. Donec fringilla urna dolor, ac semper quam congue non. Praesent vel nunc eleifend, mattis ipsum eget, vestibulum eros. Nunc et semper massa.
</p>
<p>
In tortor dui, cursus a velit ac, convallis hendrerit ligula. Nunc ultricies efficitur nisl. Suspendisse condimentum porttitor maximus. Morbi purus nunc, posuere id gravida ac, suscipit at urna. Phasellus non diam vitae mauris aliquet porttitor tincidunt id nibh. Nullam imperdiet nisl eu est imperdiet, porttitor vehicula metus iaculis. Donec rutrum eget tortor a consequat. Maecenas ac arcu erat. Fusce rhoncus nisl eget elementum pharetra. Proin a enim ac mauris mattis ultricies quis a dolor.
</p>
<p>
Nullam ornare non nibh sed cursus. Phasellus volutpat nisi eu nunc dignissim semper. Vivamus nec neque mi. Suspendisse potenti. Aliquam vehicula augue tristique bibendum faucibus. Nam in imperdiet orci, in molestie ante. Pellentesque maximus ex a risus gravida, eget rhoncus neque venenatis.
</p>
<p>
In nec imperdiet diam, at malesuada justo. Donec venenatis in nulla sed consequat. Nunc hendrerit, turpis ut viverra dapibus, tortor lorem consequat sem, ut dapibus massa nisl sit amet arcu. Proin tempor tincidunt ipsum et molestie. Pellentesque vulputate velit sit amet tellus iaculis, eget viverra nibh malesuada. Proin tristique nunc vitae magna cursus, at blandit dolor faucibus. Aenean dignissim sit amet arcu eget vestibulum.
</p>
<p>
Vivamus nec diam non urna pellentesque varius at non tellus. Pellentesque interdum faucibus maximus. Phasellus diam sapien, tincidunt quis cursus at, accumsan eget diam. Integer ullamcorper nulla nec justo consectetur, porta faucibus mauris gravida. Maecenas sagittis sodales velit, et tempor libero efficitur et. Suspendisse pulvinar at nisi quis interdum. In in vestibulum turpis, eget suscipit massa. Nullam faucibus sodales ornare. Mauris at ultricies ex, sit amet convallis lorem.
</p>
<a name="portfolio"></a>
<h1 class="text-primary text-center">Tiago Dias Ferreira</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus aliquam velit eget luctus. Proin suscipit lorem ex, ut porta nulla dignissim eu. Praesent at tristique risus, sit amet lacinia urna. Quisque vitae congue mauris, et facilisis nulla. Sed quam dolor, blandit ac velit in, luctus vehicula felis. Donec fringilla urna dolor, ac semper quam congue non. Praesent vel nunc eleifend, mattis ipsum eget, vestibulum eros. Nunc et semper massa.
</p>
<p>
In tortor dui, cursus a velit ac, convallis hendrerit ligula. Nunc ultricies efficitur nisl. Suspendisse condimentum porttitor maximus. Morbi purus nunc, posuere id gravida ac, suscipit at urna. Phasellus non diam vitae mauris aliquet porttitor tincidunt id nibh. Nullam imperdiet nisl eu est imperdiet, porttitor vehicula metus iaculis. Donec rutrum eget tortor a consequat. Maecenas ac arcu erat. Fusce rhoncus nisl eget elementum pharetra. Proin a enim ac mauris mattis ultricies quis a dolor.
</p>
<p>
Nullam ornare non nibh sed cursus. Phasellus volutpat nisi eu nunc dignissim semper. Vivamus nec neque mi. Suspendisse potenti. Aliquam vehicula augue tristique bibendum faucibus. Nam in imperdiet orci, in molestie ante. Pellentesque maximus ex a risus gravida, eget rhoncus neque venenatis.
</p>
<p>
In nec imperdiet diam, at malesuada justo. Donec venenatis in nulla sed consequat. Nunc hendrerit, turpis ut viverra dapibus, tortor lorem consequat sem, ut dapibus massa nisl sit amet arcu. Proin tempor tincidunt ipsum et molestie. Pellentesque vulputate velit sit amet tellus iaculis, eget viverra nibh malesuada. Proin tristique nunc vitae magna cursus, at blandit dolor faucibus. Aenean dignissim sit amet arcu eget vestibulum.
</p>
<p>
Vivamus nec diam non urna pellentesque varius at non tellus. Pellentesque interdum faucibus maximus. Phasellus diam sapien, tincidunt quis cursus at, accumsan eget diam. Integer ullamcorper nulla nec justo consectetur, porta faucibus mauris gravida. Maecenas sagittis sodales velit, et tempor libero efficitur et. Suspendisse pulvinar at nisi quis interdum. In in vestibulum turpis, eget suscipit massa. Nullam faucibus sodales ornare. Mauris at ultricies ex, sit amet convallis lorem.
</p>
<a name="contact"></a>
<h1 class="text-primary text-center">Tiago Dias Ferreira</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus aliquam velit eget luctus. Proin suscipit lorem ex, ut porta nulla dignissim eu. Praesent at tristique risus, sit amet lacinia urna. Quisque vitae congue mauris, et facilisis nulla. Sed quam dolor, blandit ac velit in, luctus vehicula felis. Donec fringilla urna dolor, ac semper quam congue non. Praesent vel nunc eleifend, mattis ipsum eget, vestibulum eros. Nunc et semper massa.
</p>
<p>
In tortor dui, cursus a velit ac, convallis hendrerit ligula. Nunc ultricies efficitur nisl. Suspendisse condimentum porttitor maximus. Morbi purus nunc, posuere id gravida ac, suscipit at urna. Phasellus non diam vitae mauris aliquet porttitor tincidunt id nibh. Nullam imperdiet nisl eu est imperdiet, porttitor vehicula metus iaculis. Donec rutrum eget tortor a consequat. Maecenas ac arcu erat. Fusce rhoncus nisl eget elementum pharetra. Proin a enim ac mauris mattis ultricies quis a dolor.
</p>
<p>
Nullam ornare non nibh sed cursus. Phasellus volutpat nisi eu nunc dignissim semper. Vivamus nec neque mi. Suspendisse potenti. Aliquam vehicula augue tristique bibendum faucibus. Nam in imperdiet orci, in molestie ante. Pellentesque maximus ex a risus gravida, eget rhoncus neque venenatis.
</p>
<p>
In nec imperdiet diam, at malesuada justo. Donec venenatis in nulla sed consequat. Nunc hendrerit, turpis ut viverra dapibus, tortor lorem consequat sem, ut dapibus massa nisl sit amet arcu. Proin tempor tincidunt ipsum et molestie. Pellentesque vulputate velit sit amet tellus iaculis, eget viverra nibh malesuada. Proin tristique nunc vitae magna cursus, at blandit dolor faucibus. Aenean dignissim sit amet arcu eget vestibulum.
</p>
<p>
Vivamus nec diam non urna pellentesque varius at non tellus. Pellentesque interdum faucibus maximus. Phasellus diam sapien, tincidunt quis cursus at, accumsan eget diam. Integer ullamcorper nulla nec justo consectetur, porta faucibus mauris gravida. Maecenas sagittis sodales velit, et tempor libero efficitur et. Suspendisse pulvinar at nisi quis interdum. In in vestibulum turpis, eget suscipit massa. Nullam faucibus sodales ornare. Mauris at ultricies ex, sit amet convallis lorem.
</p>
</body>
导航栏保持其下隐藏的内容。最初我通过为第一个标题添加了一个边距来修复它。但是当我点击同一页面上的链接时，它们隐藏在导航栏下。
我该如何解决？我也接受别人的建议，提示和提示以改善。 ：d
干杯， 蒂亚戈
似乎它可能是一个codepen的东西，因为它按预期在jsFiddle中工作：https：//jsfiddle.net/qkcy1c7c/ – kondrak