在页脚元素中浮动其他元素时，如何向页脚添加背景图像？

问题描述

| 谁能给我解释一下为什么页脚css中的图像没有显示为背景？我既有一个小的无序列表，可以用作导航菜单，又有页脚主要内容分别浮动在左侧和右侧，感觉好像它们被遮挡了，但是我认为它们的默认值是透明的。我是新来的。

<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML       4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
<html>
<head>
<Meta content=\"text/html; charset=ISO-8859-1\"
http-equiv=\"content-type\">
<title>title</title>
<style type=\"text/css\" media=\"screen,print,projection\">
body{
    background: #DAA520;
}
#wrap {
    width:1000px;
    margin:0 auto;
    background: white;
}
#alldivs{
}
#header{ 
    background: blue;
    height: 150px;
}
#nav{
    background: yellow;
    padding: 0px;
    margin: 0px;
    background:white repeat-x;
    width:100%;
    float:left;
    border: 1px solid #42432d;
    border-width:1px 0;
}
#nav li{
    display: inline;
    padding: 0px;
    margin: 0px;
}
#nav a:link,#nav a:visited {
    color:#000;
    background:#FFFFF0;
    float:center;
    width:auto;
    border-right:1px solid #42432d;
    text-decoration:none;
    font:bold 1em/1em Arial,Helvetica,sans-serif;
    text-transform:uppercase;
}
#nav a:hover,#nav a:focus {
    color:#fff;
    background:blue;
}
#main{
    background: white;
    float: left;
    width: 780px;
    padding: 10px;
}
#sidebar{
    background: gray;
    float: right;
    padding: 10px;
    width: 180px;
}
#footer{
    width: 1000px;
    height: 150px;
    clear: both;
    background-image:url(linktopicture.jpg);
}
#footernav li{
    display: inline;
}
#footernav a:link,#footernav a:visited {
    color:gray;
    text-decoration:none;
    text-transform:uppercase;
    padding-left: 15px;
}
#footer ul{
    float: left;
    width: 500px;
    margin: 0px;
    padding-top: 35px;
    padding-bottom: 3px
    text-align: left;
}
#footercontent {
    width: 490px:
    float: right;
    text-align: right;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 0px;
}


</style> 
</head>



<body>
<br>
<div id=\"alldivs\">
<div id =\"wrap\">
<div id=\"header\"><img src=\"linktopicture\" alt=\"text\"/> </div>
<ul id=\"nav\">
<li id=\"home\"><a href=\"homelink\">HOME</a></li>
<li id=\"services\"><a href=\"serviceslink\">SERVICES</a></li>
<li id=\"contact\"><a href=\"linkcontact\">CONTACT</a></li>
</ul>
<div id=\"main\"><p>
main content

</p></div>
<div id=\"sidebar\">sidebar space</div>
<div id=\"footer\">
<ul id=\"footernav\">
<li id=\"footernavhome\"><a href=\"linkhome\">HOME</a></li>
<li id=\"footernavservices\"><a href=\"linkservices\">SERVICES</a></li>
<li id=\"footernavcontact\"><a href=\"linkcontact\">CONTACT</a></li>
</ul>
<div id=\"footercontent\">
<p>
blahh
</br>
blahhh

</p>
</div>
</div>
</div>
</div>



</body>
</html>

解决方法

您需要在页脚中包含并清除浮动元素，这样才能显示背景。这是原始标记中的一个过于简化的示例：

<div id=\"footer\">
    <ul id=\"footernav\">
        ...
    </ul>

    <div id=\"footercontent\">
        ...
    </div>

    <!-- Here\'s the Magic -->
    <br style=\"clear: both; display: block;\" />
</div>

有很多清除浮动元素的方法，但是可以说，最常见和最容易实现的方法是clearfix方法，或者是经过更新且高度推荐的micro clearfix方法。使用\“ clearfix \”的示例将变为：

<div id=\"footer\" class=\"clearfix\">
    <ul id=\"footernav\">
        ...
    </ul>

    <div id=\"footercontent\">
        ...
    </div>      
</div>

, 如果您不想休息，请添加：

<span class=\"cleaAll\"></span>

在RJB所说的html中，添加：

.clearAll {
display:block;
height:1px;
}

对于您的CSS，希望能帮助到你。

元素元素图像浮动添加添加添加背景背景页脚页脚