-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 */

}

文本显示，但背景不显示。

[索引.html]

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

3 回答 3

2

您正在打开一个p标签并用一个标签关闭div。

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

此外，您还没有定义背景颜色。

在 css 中使用background-color而不是for 它。color

于 2013-02-27T21:43:46.633 回答
1

对不起，我要把你的问题撕开，因为有人必须这样做。

首先，您使用标签打开并使用<p>标签关闭</div>。这是你的第一个错误。其次，您根本没有在提供的 CSS 中声明background-color变量。第三，你不应该<p>为页面上的任何 BLOCK 元素使用标签。始终使用 a<div></div>作为您的块元素。这只是很好的做法和有效的 HTML 编码。

话虽如此，您的代码应如下所示： [ Style.css]

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

[索引.html]

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

（<p></p>上面的标签完全取决于您是否拥有，因为它确实为您的设计提供了更大的灵活性，但不是必须拥有的。

希望这对未来的努力有所帮助。

于 2013-02-27T21:54:25.657 回答
1

代替

color: #ffffff;

和

background-color: #ffffff;
于 2013-02-27T21:44:28.453 回答