Question

注意：我是初学者。出于某种原因，我正在运行的链接根本不起作用。我做错了什么？

这是HTML：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="portfoliostyles.css">
<title>Home</title>
</head>

<body>
    <div class="header"><a href="home.html"><img class="hoofd" src="images/leaugeau.png" alt="logo"></a>  
        <ul>
           <li><a href="contact.html">Contact</a></li>
           <li><a href="about.html">About</a></li>
        </ul>
    </div>

    <img class="line" src="images/line.jpg" alt="lijn" width='95%' height='2px'>

    <div class=content>
       <img class="image" src="images/thumbnails/watrgatrthumb.jpg" alt="watrgatr" width=400px height=400px>
       <img class="image" src="images/thumbnails/typhlotrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
       <img class="image" src="images/thumbnails/anneketrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
    </div>

</body>
</html>

这是我的CSS：

@charset "UTF-8";
/* CSS Document */

html,body
{
        height: 150%;
        width: 100%;
        margin:  0px 0px 0px 0px;
}

.hoofd
{
        float:  left;
        margin:  0px 0px 0px 0px;
        padding:  0px 0px 0px 0px;
}

.header
{
        height: 216px;
        width: 99%;
        position: fixed;
        background-color: #FFFFFF;
}

.line
{
        margin: 0px 0px 15px 0px;
        padding-top: 216px;
        position:fixed;
}

ul
{
        list-style-type:none;
        margin-right:5%;
        padding:0;
        text-align:center;     
}

li
{
        display:inline;
        float:right;
        margin-right:2%;
        font-size:45px;
        line-height: 280px;

}

.content
{
        padding: 230px 0 0 1.5%;
}

a
{
        font-family: "HelveticaNeue-light";
        text-decoration: none;
        color: #000000;
}


a:hover
{
        font-family: "HelveticaNeue-light";
        color: #E8DA62;
}

h1
{
        font-family: "HelveticaNeue-thin";
        font-size:      24px;
}

p
{
        font-family: "HelveticaNeue-thin";


 font-size: 12px;
}

编辑：哦，并澄清：我的网页确实在根文件夹中，所以不再需要文件夹链接。

但它解决了，谢谢！但是要为固定线路做点什么。但它会成功。

Answer 1

CSS代码的问题是您在某些fixed上使用classes位置。

如果从这两个类下面删除position: fixed;，

会更好。

为了更好地理解，请查看Demo。

.header
{
    height: 216px;
    width: 99%;
    position: fixed; /*Remove this line; so anchor tag could work*/
    background-color: #FFFFFF;
}

.line
{
    margin: 0px 0px 15px 0px;
    padding-top: 216px;
    position:fixed;/*Remove this line; so anchor tag could work*/

}

Answer 2

如果没有实际的例子，很难看到，但看起来你的.line就在他们之上。如果我是对的：

由于它是position:fixed，它被覆盖在顶部，然后你已经给它一个padding-top:216px;，这会增加它从顶部消耗的区域，可能会覆盖在你的标题顶部和导航菜单。

要解决此问题，您应该找到另一种方法来定位.line，无论您在哪里尝试。您可能想要top:216：

.line {
    margin: 0px 0px 15px 0px;
    top: 216px;
    position:fixed;
}

链接无效（HTML5 / CSS）

2 个答案: