2013-02-27 79 views
-3

我的页脚股利不显示背景颜色..CSS 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 */ 

} 

该文本显示,但背景doesnt。

[index.html的]

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

您没有定义背景颜色? – 2013-02-27 21:42:48

+2

我没有看到任何'background-color'声明。 – GordonsBeard 2013-02-27 21:43:14

回答

2

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

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

另外你还没有定义的背景颜色。

在css中使用background-color而不是color

1

更换

color: #ffffff; 

background-color: #ffffff; 
+0

家伙请看更新的代码..仍然不能正常工作.. – 2013-02-27 21:50:21

0

对不起,我要去撕碎你的问题,因为有人要。

首先,您打开<p>标记并以</div>标记关闭。这是你的第一个错误。其次,你在CSS中没有声明变量background-color。第三,你永远不要使用<p>标签来处理页面上的ANY BLOCK元素。块元素始终使用<div></div>。这只是良好的做法和有效的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>标签是纯粹起来给你有或没有,因为它允许你的设计更灵活,但没有必要有。

希望这有助于未来的努力。

+0

@ Epik:你检查了我的更新代码吗?你能告诉我最新的代码中有什么错误吗? – 2013-02-27 22:01:49

+0

你能解释为什么一个人不应该使用'p'作为块级元素吗?另外,当你需要块级元素时,为什么要总是使用'div'?另外,如何违反这些规则中的任何一个坏习惯? – 2013-02-27 22:02:20