#footer {
background-color: #B40404;
}
#footerleft {
background-color: #B40404;
padding: 20px;
float: left;
width: 30%;
text-align: left;
}
#footerleft span {
text-decoration: none;
display: table;
color: #F79F81;
}
#footerleft span a {
text-decoration: none;
color: #F79F81;
}
#footerleft span a:hover {
text-decoration: none;
color: #FF0000;
}
#footerright {
background-color: #B40404;
float: right;
padding: 20px;
width: 30%;
}
#footerright span {
padding: 5px;
text-decoration: none;
display: table;
color: #F79F81;
}
#footerright span a {
text-decoration: none;
color: #F79F81;
}
<div id="footer">
<div id="footerleft">
<span><a href="#about">About Us</a></span>
<span><a href="#tours">Tours</a></span>
<span><a href="#bookings">Bookings</a></span>
<span><a href="#contact">Contact Us</a></span>
<span><a href="#southafrica">South Africa</a></span>
<span><a href="#kenya">Kenya</a></span>
<span><a href="#special">Special</a></span>
<span><a href="#feedback">Feedback</a></span>
<span><a href="#photogallery">Photo Gallery</a></span>
<span><a href="#help">Help</a></span>
</div>
<div id="footerright">
<span>Phone: 07 1441 2882</span>
<span>Email: <a href="[email protected]">[email protected]</a></span>
<span>Address: Level 8, 17 Melbourne Street, West End, 4101 QLD.</span>
<span>BUSINESS HOURS: 9AM - 4PM</span>
</div>
</div>
有人可以在他们的计算机上尝试我的代码,并让我知道是否可行。当我在chrome或IE中运行时,背景色没有显示出来。有人可以帮助我找出问题所在,并帮助我找出错误的地方吗?
在#footer
不施加背景,因为#footer
元件本身具有的高度0
,因为它仅具有浮动内容。
一种解决方案是确保内容不断增长:
#footer{
background-color:#B40404;
overflow: auto;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句