我是网络开发的新手，在这个例子中，我正在研究：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
干杯， 蒂亚戈
答案 0 :(得分：2)
固定导航栏是问题所在。当您将某些东西设置为固定时，它会将其从DOM中删除，然后所有其他内容将被渲染，就好像它不存在一样。这意味着它将在页面顶部显示内容，然后将导航栏放在顶部。您需要在主体上添加填充以将其降低。例如，如果导航栏高度为50px，请将body {padding-top：50px}添加到您的css。
另外 - 只需查看代码，如果您使用导航通过href在页面上定位部分，则需要将其作为ID添加到页面中的链接 - 目前您只列出了身体中每个链接的名称。它们应该在语义上列为＆＃34; section＆＃34;同样（包含该部分的标题和<p>元素） - 目前你有很多h1元素，但你应该每页只有一个其他标题是h2，h3等（可以有一个h1为每个部分如果使用部分命名法，因为它推断每个部分在语义上与其他部分不同，因此可以有一个新的h1）。希望这有助于gavgrif