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;}
4

4 回答 4

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

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

另外，对于 div 周围的 2px 白色边框#picture，那是因为实际上有一个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 表的样式。

于 2012-07-09T04:10:56.577 回答
1

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

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

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

如果这不能更详细地解释它，请告诉我，我会尽力提供帮助。

于 2012-07-09T04:15:39.513 回答
0

嘿，我已经检查了您的网站，现在您像这样创建了一个 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;
}
于 2012-07-09T04:24:49.177 回答
0

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

  1. CSS 文件不应环绕<html>,<head>或<body> tag 或任何其他 html 标记。
  2. <style>只有当 CSS 是内部的（在 html 文档中）时才应该使用Style( ) 标签。
  3. background-color 属性被赋予#maindiv 所以，body 没有像#mainbody & 的子元素那样改变背景颜色，宽度和高度为 100%。
于 2012-07-09T05:44:38.000 回答