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スタイル定義の 2 行目に注意してください。#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 シートを正しくスタイルする方法です。

于 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

ねえ、私はあなたのサイトをチェックしました。今、あなたはこのようなサイトシートを作成します

あなたの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> その他の html タグでラップしないでください。
  2. Style( <style>) タグは、CSS が内部 (html ドキュメント内) の場合にのみ使用する必要があります。
  3. background-color プロパティが#maindiv に与えられているため、body の子と同じように、body は background-color を変更しません#main。幅と高さは 100% です。
于 2012-07-09T05:44:38.000 に答える