0

我在顶部导航栏“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;
}
4

3 回答 3

0

页脚标签（以及几乎所有其他标签）应该放在正文标签内。

<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>

除此之外，我没有看到您的 image4 图形应该出现在页脚 =S 中的原因

于 2012-08-06T14:44:28.187 回答
0

您忘记了结束标记中的“/” <a>。结束标签应该看起来像</a>.

于 2012-08-06T14:49:32.297 回答
0 
        <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-06T14:54:53.387 回答