Question

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

Answer 1

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

注意body样式定义的第二行。这将删除#main div周围的白色边框。此外，你的风格应该没问题，我不明白为什么它不应该工作。

另外，对于#picture div周围的2px白色边框，这是因为实际上有一个2px solid white边框。

修改

您的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表单的样式。

Answer 2

首先，您应该考虑添加到项目中的一些事项。我要指出的主要原因是你没有重置样式表，这就是为什么你可能会看到“白色边框”。有关详细信息，请查看此重置样式表：http://meyerweb.com/eric/tools/css/reset/

所以当我看到这个（PC / Chrome v20）时，身体不起作用。但是当我放入这个重置样式表时，它可以工作：）

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

如果这不能更详细地解释它，请告诉我，我会尝试进一步提供帮助。

Answer 3

嘿，我已经检查了你的网站，现在你就像这样创建一个syte-sheet

你的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;
}

Answer 4

下面列出的CSS文件中存在一些问题：

CSS文件不应该围绕<html>，<head>或<body> 标签或任何其他html标签。
样式（<style>）标签只应在CSS为内部（内部）时使用 html文档。）
background-color属性赋予#main div，所以身体不是采取任何背景颜色变化#main是身体的孩子＆amp;同宽度和宽度身高100％。

身体背景颜色不会改变

4 个答案: