所以我得到了两个div作为我的标题，一个导航栏和一个横幅（一个应用了背景图像的div），然后我得到了我的内容div，我将把后面有特定内容的其他div放在那里。我遵循了一个教程，教我如何在横幅上和固定在页面顶部的导航栏下滚动内容。导航栏和条幅都有width:100%和position:fixed，而内容有width:100%和position:relative，如教程所示。
问题是内容div稍微偏右了一点，页面必须水平滚动。后来，当我添加新的div时，它们都有不同的宽度，尽管它们都有width:100%。最后，页面一片混乱，div的宽度完全不同。
我会尝试张贴代码：
<body>
<div class="logo"></div>
<nav>
<ul>
<li><a href="#menu_1">Menu 1</a></li>
<li><a href="#menu_2">Menu 2</a></a></li>
<li><a href="#menu_3">Menu 3</a></li>
<li><a href="#menu_4">Menu 4</a></li>
</ul>
</nav>
<div id="banner">
<h1>lorem ipsum</h1>
</div>
<div id="content">
<h1>Lorem Ipsum Bacon</h1>
<p>Lorem ipsum dolor sit amet</p>
</body>
和CSS:
nav
{
height: 100px;
background: #FFFFFF;
position:fixed;
top:0px;
left:0px;
width: 100%;
z-index: 10;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
text-align: center;
margin:auto;
}
nav ul
{
padding: 0;
margin: 0;
list-style: none;
background: #FFFFFF;
height: 40px;
}
nav li
{
display: inline;
}
nav a:link, a:visited
{
text-decoration: none;
color: #000000;
font-weight: bold;
background:transparent;
}
nav li a, li a:visited
{
display: block;
color: #000000;
width: 104px;
height: auto;
line-height: 73px;
padding: 10px;
display: inline-block;
}
nav li a:hover
{
display: block;
color: #FFFFFF;
background: #AED135;
line-height: 20px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: inline-block;
}
#banner
{
width: 100%;
height: 500px;
position: fixed;
background: url(imgs/header_img.jpg);
background-size: cover;
top: 100px;
left:0px;
}
#content
{
background:#fff;
width:100%;
position:relative;
top:610px;
z-index:5;
height:1000px;
}
不知道我做错了什么。请放心，你想怎么回答就怎么回答！我读得越多关于宽度、位置之类的东西，我就越困惑！
主体默认有一些像素的边距，请尝试添加以下内容：
body {
margin: 0;
}