<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My portfolio</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
margin-bottom: 20000px;
}
h1 {
}
#headname {
font-size: 30px;
font-family: sans-serif;
padding-left: 20px;
padding-right: 50px;
color: #356684;
}
#calculator {
text-decoration: none;
padding-right: 500px;
font-family:arial;
}
**#navigation {
position: fixed;
width: 100%;
height: 60px;
background-color: #eee;
}**
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 60px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #1e1e1e;
padding: 0 20px;
}
ul li a:hover {
color: #627f91;
}
**#bodie {
margin-top:80px;
}**</style>
</head>
<body>
<nav id="navigation">
<ul>
<li id="headname">My portfolio</li>
<li><a href="index.php">Home</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</nav id="navigation">
<div id="bodie">
<h1>Welcome to my portfolio</h1>
</div id="bodie">
</body>
</html>
我有一个导航栏位置:固定;在我的页面顶部,在导航容器中,ID为#34;导航&#34;。 我在那里有一小段文字,在一个单独的div中,id&#39; d&#34; bodie&#34;,我给出了属性:margin-top:80px;。所以它会显示在导航栏下面。
出于某种原因,导航栏也会获取此属性。我不明白为什么。有人可以向我解释一下吗?
答案 0 :(得分:0)
您只需要使用固定定位将top: 0;
添加到导航中。
此外,您未在结束标记上添加ID,因此</nav id="navigation">
应为</nav>
。这也适用于div标签。
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
margin-bottom: 20000px;
}
h1 {
}
#headname {
font-size: 30px;
font-family: sans-serif;
padding-left: 20px;
padding-right: 50px;
color: #356684;
}
#calculator {
text-decoration: none;
padding-right: 500px;
font-family:arial;
}
#navigation {
position: fixed;
width: 100%;
height: 60px;
background-color: #eee;
top: 0;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 60px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #1e1e1e;
padding: 0 20px;
}
ul li a:hover {
color: #627f91;
}
#bodie {
margin-top:80px;
}
<nav id="navigation">
<ul>
<li id="headname">My portfolio</li>
<li><a href="index.php">Home</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</nav>
<div id="bodie">
<h1>Welcome to my portfolio</h1>
</div>