-3

フッター div に背景色が表示されません。

これは、フッターを除くすべての背景が機能する style.css ファイルです。

【スタイル.css】

        .Footer {
width: 200px;
border: 1px solid blue;
padding: 5px;
font-weight: bold;
color: #ffffff;
background-color: #000000;
}



body {
background: #b3dced; /* Old browsers */
background: -moz-linear-gradient(top,  #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=0 ); /* IE6-9 */
}

.body {
padding-top: 1px;
margin-top: 2px;
width: 1200px;
height: 500px;
}

.about_this_site__title {
width: 200px;
border: 1px solid blue;
padding: 5px;
font-weight: bold;
color: #ffffff;
}

.logo {
   margin-top: 10px;
   margin-right: 500px;
}

#menu {
padding: 0;
margin: 0;
width: 1000px;
margin-right: auto;
margin-left: auto;
border-radius: 2px;
}

#menu ul {
margin: 0;
padding: 0;
border-radius: 3px;
}

#menu ul li {
background: #ffffff;
float: left;
position: relative;
border-radius: 2px;
list-style-type: none;
}

#menu ul li a {
font-family: Verdana;
font-size: 14px;
color: blue;
text-decoration: none;
display: block;
line-height: 30px;
width: 160px;
height: 30px;
text-align: center;
}

#menu ul ul {
position: absolute;
visibility: hidden;
top: 31px;
}

#menu ul li ul li a:hover {
color: white;
background: #b8e1fc; /* Old browsers */
background: -moz-linear-gradient(top,  #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */

}

#menu ul li:hover ul {
visibility: visible;
font-weight: bold;
}

#menu ul li:hover {
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background: linear-gradient(to bottom,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */

}

テキストは表示されますが、背景は表示されません。

[ index.html ]

<div class="Footer">Copyright bla blah</div>
4

3 に答える 3

2

タグを開き、pタグで閉じていdivます。

<p class="Footer">Copyright bla blah</p>

また、背景色を定義していません。

CSSbackground-colorで for it の代わりに使用します。color

于 2013-02-27T21:43:46.633 に答える
1

交換

color: #ffffff;

と

background-color: #ffffff;
于 2013-02-27T21:44:28.453 に答える
1

申し訳ありませんが、誰かがしなければならないので、質問をバラバラにします。

まず、タグで開き、<p>タグで閉じ</div>ます。これはあなたの最初の間違いです。background-color次に、提供された CSS で変数をまったく宣言していません。第 3 に、ページ上の ANY BLOCK 要素にはタグを使用しない<p>でください。<div></div>ブロック要素には常に a を使用してください。これは良い習慣であり、有効な HTML コーディングです。

つまり、コードは次のようになります。 [Style.css]

.Footer {
width: 200px;
border: 1px solid blue;
padding: 5px;
font-weight: bold;
color: #ffffff;
background-color: red;
}

[ index.html ]

<div class="Footer"><p>Copyright bla blah</p></div>

(<p></p>上記のタグは、デザインの柔軟性を高めますが、必須ではないため、純粋にあなた次第です。

これが今後の取り組みに役立つことを願っています。

于 2013-02-27T21:54:25.657 に答える