Question

我最终希望重建一个符合网络标准的旧网站，并且认为我会尝试在html5和css3中弄湿我的脚。我知道这些浏览器还没有得到完全支持，但是我愿意在时间限制范围内工作。

然而，我已经在早期的墙上撞了我的头，坦率地说现在感觉非常愚蠢。我似乎无法在我的代码生成的页面中突出显示文本或打开链接。

HTML：

<!DOCTYPE html>
<html> 
    <head>
        <meta charset="UTF-8" />
        <title>The Hominis Inquiry: Reconstructing Psychology, Societies, and Human Ecosystems</title>
        <link rel="stylesheet" href="HIcss3.css" />
        <script src="HIjs.js"></script>
    </head>
    <body>
        <div class="title">
            <div id="search">
                <form id="searcher" onclick="startSearch('sbox')">
                    <input type="text" id="sbox" size="15" value="Search This Site"> 
                    <input type="button" id="sbutt" value="Find"> 
                </form> 
            </div> 
        </div>
        <div class="navigation">
            <div id="about"> <a href="about.htm"> About </a> </div>
            <div id="blog"> <a href="blog.htm"> Blog </a> </div>
            <div id="research"> <a href="research.htm"> Research/ Academic Papers </a> </div>
            <div id="hypercourse"> <a href="hypercourses"> Hypercourses </a> </div>
            <div id="links"> <a href="links"> Links </a> </div>
            <div id="contact"> <a href="about.htm#contact"> Contact </a> </div>
        </div>

        <div class="download">
            <a href="http://www.mozilla.com/firefox/" target="_blank">
                Firefox is strongly recommended for viewing this page. Download the latest version free!<img src="firefox.jpg" />
            </a> 
        </div>

        <p>
            Welcome to HI Updates!
        </p>

    </body>
</html>

的CSS：

body {border:0; margin:0; padding:0; vertical-align:top; text-align:center; background-color:#FFDDAA; color:#440000}

h1 {font-size:3em; font-weight:700}
h2 {font-size:1.5em; font-weight:600}
h3 {font-size:1.25em; font-weight:500}
p {}

a {color:#000066; font-weight:600; text-decoration:none}
a:hover {background-color:#FFFFDD}
a:visited {color:#440066}

div.title {position:fixed; width:100%; height:10.5em; background-image:url(hominquiry_laeroprocni.jpg); }


div.download {text-align:left} 
div.download img {border:0; float:left; width:3em; height:3em}

div.navigation {}
#about {}
#blog  {}

这对于我在html 4中的最后一个布局来说不是问题，我觉得我必须忽略一些非常明显的东西...更糟糕的是，它经过了验证器而没有任何障碍：P

谢谢！

Answer 1

您的div.title为position: fixed，因此它实际上浮动在您的链接上，因此他们不会从您的鼠标接收悬停或点击事件。删除它以试用它。

使用：http://jsfiddle.net/LFTpB/

没有：http://jsfiddle.net/THyke/

链接/锚元素的基本html5问题？

1 个答案: