1. 首頁
  2. 問答
  3. 身體背景顏色不會改變

身體背景顏色不會改變

2012-07-09 242 views
0

我不知道爲什麼，但身體的背景顏色不會改變爲我想要的顏色。我可以讓容器div改變。但是，這會產生白色的邊框，這很尷尬。身體背景顏色不會改變

這裏是我的鏈接：http://weddingtesters.net76.net/index.html

body {background-color: #dde5ec;} 

#main { 
width: 100%; 
height:auto; 
overflow:auto; 
position:relative; 
margin:0px; 
background-color:#dde5ec;} 

#main div { 
float:left; } 
#picture { 
width: 777px; 
height:334px; 
position: relative; 
margin-bottom:0px; 
margin-left: 200px; 
background: url(http://weddingtesters.net76.net/pictures/johnandlaura.png); 
z-index: 10; 
border-left:2px solid white; 
border-right:2px solid white;} 

#nav { 
width:200px; 
height: 400px; 
position:relative; 
margin-left:200px; 
padding:0px; 
margin-bottom:25px; 
background-color:#C3FDB8; 
border-left: 2px solid white; 
border-bottom: 2px solid white;} 

#text { 
width:577px; 
height: 400px; 
position: relative; 
margin-left:0px; 
padding:0px; 
margin-bottom:25px; 
background-color:#C3FDB8; 
border-right:2px solid white; 
border-bottom: 2px solid white;} 

h1 { 
border-right: 1px dashed black; 
font: 25pt calibri; 
color: black; 
text-align: center; 
margin:20px;} 

h2 { 
font: 10pt candara;} 

h3{ 
background: url(http://weddingtesters.net76.net/pictures/transparant.png); 
width:100%; 
height:125px; 
font: 20pt Palatino Linotype serif; 
color:black; 
font-style : italic;}

來源

2012-07-09 user1510951

+0

它正在改變。哪裏有問題？在哪個瀏覽器？ – diEcho 2012-07-09 04:04:58

+1

@ user1510951：請記住點贊有用的答案，並將答案標記爲適合您的答案。 – 2012-07-09 05:18:57

回答

1

因此，首先，您應該考慮添加到項目中的一些內容。我要指出的主要原因是您沒有重置樣式表，這就是您可能會看到「白色邊框」的原因。看看這個重置樣式表，瞭解更多信息：http://meyerweb.com/eric/tools/css/reset/

所以當我查看這個（PC/Chrome v20）時，主體不起作用。但是，當我把這個重置樣式表，它的工作原理:)

此重置樣式表還應該修復您的「白邊」問題，雖然我不是100％確定我知道你的意思。正如Spiritfyre所說，你在#picture元素上有邊框樣式，所以我會認爲這是有意的。

讓我知道如果這不能更詳細地解釋它，我會盡力幫助進一步。

來源

2012-07-09 04:15:39 Kate

1 
body { 
    background-color: #dde5ec; 
    margin:0 auto; 
}

注意body樣式定義的第二條線。這將刪除您的#main div的白色邊框。此外，你的風格應該沒問題，我不明白爲什麼它不應該工作。

此外，至於#picture div的2px白色邊框，這是因爲實際上有一個2px solid white邊框。

EDIT

你的CSS片（http://weddingtesters.net76.net/mainstylesheet.css）不正確地寫入。它應該寫成如下：

body { 
    background-color:#dde5ec; 
} 

#main { 
    width: 100%; 
    height:auto; 
    overflow:auto; 
    position:relative; 
    margin:0px; 
    background-color:#dde5ec; 
} 

#main div { 
    float:left; 
} 

#picture { 
    width: 777px; 
    height:334px; 
    position: relative; 
    margin-bottom:0px; 
    margin-left: 200px; 
    background: url(http://weddingtesters.net76.net/pictures/johnandlaura.png); 
    z-index: 10; 
    border-left:2px solid white; 
    border-right:2px solid white; 
} 

#nav { 
    width:200px; 
    height: 400px; 
    position:relative; 
    margin-left:200px; 
    padding:0px; 
    margin-bottom:25px; 
    background-color:#C3FDB8; 
    border-left: 2px solid white; 
    border-bottom: 2px solid white; 
} 

#text { 
    width:577px; 
    height: 400px; 
    position: relative; 
    margin-left:0px; 
    padding:0px; 
    margin-bottom:25px; 
    background-color:#C3FDB8; 
    border-right:2px solid white; 
    border-bottom: 2px solid white; 
} 

h1 { 
    border-right: 1px dashed black; 
    font: 25pt calibri; 
    color: black; 
    text-align: center; 
    margin:20px; 
} 

h2 { 
font: 10pt candara;  
} 

h3{ 
    background: url(http://weddingtesters.net76.net/pictures/transparant.png); 
    width:100%; 
    height:125px; 
    font: 20pt Palatino Linotype serif; 
    color:black; 
    font-style : italic; 
}

這是如何正確樣式的CSS表格。

來源

2012-07-09 04:10:56

+1

編寫樣式表沒有真正的「正確」和「不正確」的方式。每個都有自己的:) – Kate 2012-07-09 04:17:34

+0

確實如此，但是CSS表單應該不包含HTML標籤。看看原文，我已經在帖子中分享了它的鏈接。 :) – 2012-07-09 04:18:15

+0

啊 - 你說得對：D我以爲你只是縮進/移動開/關{}的。我的錯。 是的，user1510951，你應該*不*將HTML標籤放在樣式表中！這只是對於CSS而言:) – Kate 2012-07-09 04:20:24

0

嘿，我已經檢查到您的網站，現在你創建一個syte表像這樣

你的CSS的鏈接是，這是不正確的編碼 http://weddingtesters.net76.net/mainstylesheet.css

<html> 

<body> 

<style type="text/css"> 
BODY {background-color:#dde5ec; 
margin:0px auto;} 
#main { 
    width: 100%; 
    height:auto; 
    overflow:auto; 
    position:relative; 
margin:0px; 
background-color:#dde5ec; 

} 
#main div { 
float:left; 
} 
#picture { 
width: 777px; 
height:334px; 
position: relative; 
margin-bottom:0px; 
margin-left: 200px; 
background: url(http://weddingtesters.net76.net/pictures/johnandlaura.png); 
z-index: 10; 
border-left:2px solid white; 
border-right:2px solid white; 
} 
#nav { 
    width:200px; 
    height: 400px; 
    position:relative; 
margin-left:200px; 
    padding:0px; 
margin-bottom:25px; 
background-color:#C3FDB8; 
border-left: 2px solid white; 
border-bottom: 2px solid white; 
} 
#text { 
    width:577px; 
    height: 400px; 
    position: relative; 
    margin-left:0px; 
    padding:0px; 
margin-bottom:25px; 
background-color:#C3FDB8; 
border-right:2px solid white; 
border-bottom: 2px solid white; 
} 
h1 { 
border-right: 1px dashed black; 
    font: 25pt calibri; 
    color: black; 
    text-align: center; 
margin:20px; 
} 
h2 { 
font: 10pt candara; 

} 
h3{ 
background: url(http://weddingtesters.net76.net/pictures/transparant.png); 
width:100%; 
height:125px; 
font: 20pt Palatino Linotype serif; 
color:black; 
font-style : italic; 
} 

</style> 

</body> 
</html>

這樣式表不是正確

請替換成這個

body {background-color:#dde5ec; 
margin:0px auto;} 
#main { 
    width: 100%; 
    height:auto; 
    overflow:auto; 
    position:relative; 
margin:0px; 
background-color:#dde5ec; 

} 
#main div { 
float:left; 
} 
#picture { 
width: 777px; 
height:334px; 
position: relative; 
margin-bottom:0px; 
margin-left: 200px; 
background: url(http://weddingtesters.net76.net/pictures/johnandlaura.png); 
z-index: 10; 
border-left:2px solid white; 
border-right:2px solid white; 
} 
#nav { 
    width:200px; 
    height: 400px; 
    position:relative; 
margin-left:200px; 
    padding:0px; 
margin-bottom:25px; 
background-color:#C3FDB8; 
border-left: 2px solid white; 
border-bottom: 2px solid white; 
} 
#text { 
    width:577px; 
    height: 400px; 
    position: relative; 
    margin-left:0px; 
    padding:0px; 
margin-bottom:25px; 
background-color:#C3FDB8; 
border-right:2px solid white; 
border-bottom: 2px solid white; 
} 
h1 { 
border-right: 1px dashed black; 
    font: 25pt calibri; 
    color: black; 
    text-align: center; 
margin:20px; 
} 
h2 { 
font: 10pt candara; 

} 
h3{ 
background: url(http://weddingtesters.net76.net/pictures/transparant.png); 
width:100%; 
height:125px; 
font: 20pt Palatino Linotype serif; 
color:black; 
font-style : italic; 
}

來源

2012-07-09 04:24:49

0

有下列CSS文件中幾個問題：

  1. CSS文件應該不在身邊<html>，<head>或<body> 標籤或任何其他HTML標記包裹。
  2. 風格，才應使用（<style>）標籤，如果CSS是內部（內 HTML文檔。）
  3. background-color屬性被賦予#main div中，身體不 採取任何背景顏色變化#main是身體的小孩&與 寬度&身高100％。

來源

2012-07-09 05:44:38 SVS

相關問題

 相關問題