我該如何解決這些佈局問題？

一）來獲得橫幅頁面

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>

來源

2015-10-13 sarangheh510

至少，你需要'保證金左：自動;保證金右：自動在菜單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; 
}

來源

2015-10-13 22:06:41 Burlakh

它沒有工作。我已經更正了引號。 – 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。

來源

2015-10-13 21:21:19 makshh

第一部分爲A）工作，但是B）和C）don沒有工作。圖像仍然不會顯示。 – sarangheh510

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

'和'背景圖像'爲'背景' – makshh

沒有做什麼哈哈。和b）我希望它在整個頁面的中心。 – sarangheh510

我該如何解決這些佈局問題？

回答

相關問題