0
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SOS</title>
<link href="first.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var __adobewebfontsappname__="dreamweaver"
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script><script src="http://use.edgefonts.net/amatic-sc:n4:default.js" type="text/javascript"></script>
</head>
<body onLoad="MM_preloadImages('images/slideshow1_over.jpg','images/slideshow2_over.jpg','images/slideshow3_over.jpg','images/news1_over.png','images/news2_over.png')">
<div id="container">
<div id="navbar">
<img src="images/logo.png" alt="" width="230" height="70" class="floatleft" id="logo"/>
<div id="menu">
<ul><li>HOME</li>
<li>ABOUT US</li>
<li>ABOUT ORANGUTANS</li>
<li>
OUR WORK
<ul>
<li>PROJECTS</li>
<li>CAMPAIGNS</li>
</ul>
</li>
<li>DONATE</li>
<li>CONTACT US</li>
<li>SHOP</li>
</ul>
</div>
</div>
<div class="slideshow">
<div><img src="images/slideshow1.jpg" alt="" width="1105" height="576" usemap="#Map" id="Image1"/>
<map name="Map">
<area shape="rect" coords="698,440,1070,544" href="#" onMouseOver="MM_swapImage('Image1','','images/slideshow1_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
</map>
</div>
<div><img src="images/slideshow2.jpg" alt="" width="1105" height="576" usemap="#Map2" id="Image2"/>
<map name="Map2">
<area shape="rect" coords="734,438,1058,542" href="#" onMouseOver="MM_swapImage('Image2','','images/slideshow2_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
</map>
</div>
<div><img src="images/slideshow3.jpg" alt="" width="1105" height="576" usemap="#Map3" id="Image3"/>
<map name="Map3">
<area shape="rect" coords="730,436,1058,544" href="#" onMouseOver="MM_swapImage('Image3','','images/slideshow3_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
</map>
</div>
</div>
<div class="news">
<div><img src="images/news1.png" alt="" width="638" height="322" usemap="#Map4" id="Image4"/>
<map name="Map4">
<area shape="rect" coords="440,262,612,286" href="http://www.takepart.com/article/2015/10/22/orangutans-are-dying-indonesia-burns" target="_blank" onMouseOver="MM_swapImage('Image4','','images/news1_over.png',1)" onMouseOut="MM_swapImgRestore()">
</map>
</div>
<div><img src="images/news2.png" alt="" width="638" height="322" usemap="#Map5" id="Image5"/>
<map name="Map5">
<area shape="rect" coords="444,264,608,284" href="http://www.eco-business.com/news/palm-oil-expands-in-aceh/" target="_blank" onMouseOver="MM_swapImage('Image5','','images/news2_over.png',1)" onMouseOut="MM_swapImgRestore()">
</map>
</div>
</div>
<div id="video">
<div id="iframe">
<iframe width="435" height="280" src="https://www.youtube.com/embed/SE_Gw9GzdZY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="footer">
<img src="images/footer.png" width="1105" height="64" alt=""/></div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
</body>
<script type="text/javascript">
$('.slideshow').slick({autoplay:true,fade:false, dots:true, arrows:false});
$('.news').slick({autoplay:true,fade:true, dots:false, arrows:true});
</script>
</html>
@charset "UTF-8";
html {
margin:0px;
padding:0px;
}
body {
background-image:url(images/background3.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
margin:0px;
padding:0px;
}
#container {
width:1105px;
margin:0 auto;
}
#navbar {
background-color: rgba(0,0,0,0.70);
width:1105px;
height:100px;
}
ul {
po
display: inline;
list-style-type:none;
}
ul li {
font-weight: 400;
font-size: 27px;
display: inline-block;
margin-right: 0px;
position: relative;
padding: 19px 20px 27px 28px;
cursor: pointer;
font-family: amatic-sc;
font-style: normal;
color: #F2F2F2;
}
ul li:hover {
color: #fff;
text-shadow: 0px 0px 10px #13F909;
}
ul li:hover li{
text-shadow: none;
}
ul li ul {
position: absolute;
padding:0;
width: 150px;
top:80px;
left:0;
visibility: hidden;
}
ul li ul li {
background-color:rgba(0,0,0,0.70);
display: block;
color: #fff;
}
ul li ul li:hover { background-color:rgba(0,0,0,0.70); text-shadow: 0px 0px 10px #13F909; }
ul li:hover > ul {
visibility: visible;
}
ul.sub{
top:0;
left:154px;
visibility:hidden;
}
.floatleft{
float:left;
}
#logo {
margin-top:15px;
margin-left:20px;
}
#menu {
position:relative;
z-index:100;
padding-top:4px;
}
.slideshow {
padding-top:20px;
}
.news {
width:638px;
height:322px;
float:left;
}
#video {
background-color:rgba(0,0,0,0.70);
width:458px;
height:322px;
margin-left:647px;
position:absolute;
}
#iframe {
padding-top:21px;
padding-left:11.5px;
}
#footer {
bottom:50px;
}
以上是我的代码，基本上，我的页脚div包含一个图像，充当我的页脚，但是，它不与我的页面底部齐平。我试图把负边缘，填充和底部，并没有移动。底部图像不坐在同一页的底部齐平
这里是显示问题更清晰，http://imgur.com/rk4DOuk
请运行您的代码在fiddle.net –
尝试把下面的CSS图像标签（或CSS覆盖图像标签）...'vertical-align：text-bottom;' – freefaller
在其他div中必须设置margin或padding –