我该如何解决这些布局问题？

问题描述：

一）来获得横幅页面

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>

至少，你需要'保证金左：自动;保证金右：自动在菜单css。至于图片，不知道为什么它不会出现，只要它不嵌套在一个奇怪的div。 https://jsfiddle.net/fyc71qw5/ –

有几个拼写错误，例如额外的''和'font-family'的错误语法 – cocoa

答

添加收盘quotemarks到<div id="content"></div>

3）这应该工作：

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

它没有工作。我已经更正了引号。 – sarangheh510

@ sarangheh510这里是工作副本[https://jsfiddle.net/hmdvrxpo/](https://jsfiddle.net/hmdvrxpo/）同时检查你的图片来源。 – Burlakh

答

1）

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

2）

#menu { 
    margin: 0 auto; 
}

3）你必须包括<div id="content"></div>你的HTML和你的CSS改变background-image到background。

第一部分为A）工作，但是B）和C）don没有工作。图像仍然不会显示。 – sarangheh510

2）它正在工作。 3）将'

'和'背景图像'为'背景' – makshh

没有做什么哈哈。和b）我希望它在整个页面的中心。 – sarangheh510

我该如何解决这些布局问题？

相关推荐