Question

我遇到了一些问题，我需要帮助才能获得：

a）将横幅放到页面顶部

b）将菜单栏放到横幅下面的页面中间

c）将我的图像放在内容区域（它不会出现！）

编辑!!

<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<meta charset="utf-8" />

<style type="text/css">
body{
margin: 0;

}
#banner > h1{ 
margin: 0;
width: 100%;
height: 300px;
background-size: 1200px 300px;
text-align: center;
font-family: verdana; sans-serif;
color: #000000;
font-size: 50px;
font-weight: bold;
background-image: -ms-linear-gradient(left, #596A72 0%, #FFFCFA 50%, #596A72 100%);
background-image: -moz-linear-gradient(left, #596A72 0%, #FFFCFA 50%, #596A72 100%);
background-image: -o-linear-gradient(left, #596A72 0%, #FFFCFA 50%, #596A72 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #596A72), color-stop(50, #FFFCFA), color-stop(100, #596A72));
background-image: -webkit-linear-gradient(left, #596A72 0%, #FFFCFA 50%, #596A72 100%);
background-image: linear-gradient(to right, #596A72 0%, #FFFCFA 50%, #596A72 100%);
background-repeat: no-repeat;
background-size: cover;
}

#menu {
margin: 0;
top: 150px;
width: 400px;
height: 50px;
background-color: #336699;
float: center;
font-family: verdana; sans-serif;
font-size: 25px;
font-weight: bold;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;

}

li {
float: left;
}

a {
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
}

#content {
background-image: url('image.jpg') no-repeat center center fixed;
background-size: cover;
margin-left: 203px;
left: 100px;
width: 1050px;
height: 1000px;

}


</style>

</head>

<body>

<div id="banner">
<h1>
    TITLE
</h1>
</div>

<div id="menu">
<ul>
    <li><a href="#page2">Page 2</a></a></li>
    <li><a href="#page3">Page 3</a></a></li>
    <li><a href="#page4">Page 4</a></a></li>
</ul>

</div>

<div id="content">
</div>

</body>
</html>

Answer 1

1）

body {
  margin: 0;
}
#banner > h1 {
  margin: 0;
}

2）

#menu {
  margin: 0 auto;
}

3）您必须在HTML中加入<div id="content"></div>，然后在CSS中将background-image更改为background。

Answer 2

将结束引号添加到<div id="content"></div>

3）这应该有效：

#content {
background: url(image.jpg) no-repeat center center;
background-size: cover;
width: 1050px;
height: 1000px;
margin: 0 auto;
}

如何解决这些布局问题？

2 个答案: