列表链接出现在页脚上

我在上面的导航栏“image4”上显示所有页脚上的最后一个链接。因此，我将鼠标悬停在页脚上的最后一个<li>项目的超链接想要触发。列表链接出现在页脚上

出于某种原因，它看起来像image4链接一直下到页脚。如果我删除了image4 <li>项目，那么image3就是可以从页脚的任何位置触发的新链接。

我该如何解决这个问题？

我的代码如下：

HTML：

</head> 

<body> 
    <div id="wrapper"> 

     <div id="nav"> 
      <ul> 
       <li><a href="http://www.com/" target="blank" class="image1"><img alt="#" src="image1.png" /></li> 
       <li><a href="http://www.com/" target="blank" class="image2"><img alt="#" src="image2.png" /></li> 
       <li><a href="http://www.com/" target="blank" class="image3"><img alt="#" src="image3.png" /></li> 
       <li><a href="http://www.com/" target="blank" class="image4"><img alt="#" src="image4.png" /></li> 
      </ul> 
     </div><!-- end of the nav --> 

     <div id="content"> 
      <img alt="#" class="image5" src="image5.png" /> 
      <img alt="#" class="image6" src="image6.png" /> 
     </div><!-- end of the content --> 

    </div><!-- end of the wrapper --> 
</body> 

<footer> 
    <img class="logo" alt="#" src="logo.png" /> 
    <p>© 2012<?php echo date('Y'); ?> logo studio. All rights reserved.</p> 
</footer> 

</html>

CSS：

*{ 
    margin: 0px; 
    padding: 0px; 
} 

body { 
    margin: 0px; 
    background: url('images/bg.png') repeat-x; 
    background-color: #ffffeb; 
} 

#nav { 
    float: left; 
    width: 1024px; 
    height: 732px; 
    display: block; 
    margin: 5px 0 0 200px; 
} 

ul { 
    list-style: none; 
    width: 420px; 
    margin: 0 auto; 
} 

li { 
    float: left; 
} 

.image5 { 
    position: absolute; 
    top: 0px; 
    left: 200px; 
    z-index: -1; 
} 

.image6 { 
    position: absolute; 
    top: 375px; 
    left: 200px; 
    z-index: -1; 
} 

footer { 
    height: 30px; 
    position: relative; 
    top: 715px; 
} 

.logo { 
    position: absolute; 
    left: 230px; 
    top: 0px; 
} 

p { 
    font-family: helvetica, arial, sans serif; 
    font-size: 12px; 
    color: #aaaaaa; 
    text-decoration: none; 
    position: absolute; 
    left: 940px; 
    top: 0px; 
    padding: 5px; 
}

来源

2012-08-06 200gSoft

 <head> 
     </head> 

     <body> 
      <div id="wrapper"> 

       <div id="nav"> 
        <ul> 
         <li><a href="http://www.com/" target="blank" class="image1"><img alt="#" src="image1.png" /> </a></li> 
         <li><a href="http://www.com/" target="blank" class="image2"><img alt="#" src="image2.png" /></a></li> 
         <li><a href="http://www.com/" target="blank" class="image3"><img alt="#" src="image3.png" /></a></li> 
         <li><a href="http://www.com/" target="blank" class="image4"><img alt="#" src="image4.png" /></a></li> 
        </ul> 
       </div><!-- end of the nav --> 

       <div id="content"> 
        <img alt="#" class="image5" src="image5.png" /> 
        <img alt="#" class="image6" src="image6.png" /> 
       </div><!-- end of the content --> 

      <footer> 
      <img class="logo" alt="#" src="logo.png" /> 
      <p>© 2012<?php echo date('Y'); ?> logo studio. All rights reserved.</p> 
      </footer> 

      </div><!-- end of the wrapper --> 



     </body> 



     </html>

来源

2012-08-06 14:54:53 Ma9ic

页脚标签（和几乎所有其他标签）应该去身体标签内。

<html> 
<head> 
<!--allows: meta, title, script and style --> 
</head> 
<body> 
<!--allows every other tag, including script, style, li, ul, ol, b, i, u, hr, h1-h5, table,  etc...... --> 
</body> 
</html>

除此之外，我不”明白了一个道理你的图像4的图形应该在页脚=将出现小号

来源

2012-08-06 14:44:28 Losbear

你忘了‘在结束标记/’的<a>。 close标签应该看起来像</a>。

来源

2012-08-06 14:49:32

列表链接出现在页脚上

回答

相关问题