身体背景颜色不会改变

问题描述：

我不知道为什么，但身体的背景颜色不会改变为我想要的颜色。我可以让容器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;}

它正在改变。哪里有问题？在哪个浏览器？ – diEcho 2012-07-09 04:04:58

@ user1510951：请记住点赞有用的答案，并将答案标记为适合您的答案。 – 2012-07-09 05:18:57

答

因此，首先，您应该考虑添加到项目中的一些内容。我要指出的主要原因是您没有重置样式表，这就是您可能会看到“白色边框”的原因。看看这个重置样式表，了解更多信息：http://meyerweb.com/eric/tools/css/reset/

所以当我查看这个（PC/Chrome v20）时，主体不起作用。但是，当我把这个重置样式表，它的工作原理:)

此重置样式表还应该修复您的“白边”问题，虽然我不是100％确定我知道你的意思。正如Spiritfyre所说，你在#picture元素上有边框样式，所以我会认为这是有意的。

让我知道如果这不能更详细地解释它，我会尽力帮助进一步。

答

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表格。

编写样式表没有真正的“正确”和“不正确”的方式。每个都有自己的:) – Kate 2012-07-09 04:17:34

确实如此，但是CSS表单应该不包含HTML标签。看看原文，我已经在帖子中分享了它的链接。 :) – 2012-07-09 04:18:15

啊 - 你说得对：D我以为你只是缩进/移动开/关{}的。我的错。是的，user1510951，你应该*不*将HTML标签放在样式表中！这只是对于CSS而言:) – Kate 2012-07-09 04:20:24

答

嘿，我已经检查到您的网站，现在你创建一个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; 
}

答

有下列CSS文件中几个问题：

CSS文件应该不在身边<html>，<head>或<body> 标签或任何其他HTML标记包裹。
风格，才应使用（<style>）标签，如果CSS是内部（内 HTML文档。）
background-color属性被赋予#main div中，身体不采取任何背景颜色变化#main是身体的小孩&与宽度&身高100％。

身体背景颜色不会改变

相关推荐