Question

我正在设计这个简单的网站，我的导航栏旁边有一条小链接线。可能导致这种情况的任何想法？

链接到网站：http://www.driesmelkebeke.zz.mu/Website/

的index.html：

<!doctype html>
<html>
<head>
    <title>De Druppel</title>
    <meta name="author" content="driesmelkebeke"/>
    <meta name="description" content="Major 1 januari 2015 Dries Melkebeke"/>
    <meta name="keywords" content="major lacusofobie regenplassen"/>
    <meta charset="utf-8"/>
    <link href="css/screen.css" rel="stylesheet" type="text/css"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:700,800,400' rel='stylesheet' type='text/css'>
</head>

<body>
    <header>
        <div id="grad"></div>
    </header>

    <div class="container">
        <img id="headimg" src="images/logo.png" alt="Logo">
        <nav>
            <ul>
                <li><a href="#">home</li>
                <li><a href="#"><span id="navborder">tips</span></a></li>
                <li>|</li>
                <li><img src="images/sleutel.png" alt="sleutel"><a href="#">log in</a></li>
            </ul>
        </nav>
    </div>

    <div class="content1"></div>
</body>

screen.css：

/****************
ALGEMEEN
****************/

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

body{
   font-size:62.5%;
}

.container{
    width:960px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    padding-left:15px;
    padding-right:15px;
}

/****************
FONTS
****************/


/****************
HEADER
****************/

#grad{
    width:100%;
    height:100px;
    position:absolute;
    background: -webkit-linear-gradient(left, #4183d7, #3498db);
    background: -o-linear-gradient(left, #4183d7, #3498db);
    background: -moz-linear-gradient(right, #4183d7, #3498db);
    background: linear-gradient(to right, #4183d7, #3498db); 
}

.container #headimg{
    margin-top: 17px;
    position: absolute;
}

/****************
NAVIGATIE
****************/

nav{
    font-family: 'Open Sans', sans-serif;
    font-size: 1.8em;
    margin-top: 50px;
    margin-left: 660px;
    position:absolute;
}

nav ul{
    list-style: none;
} 

nav ul li{
    display: inline-block;
    text-transform: uppercase;
    margin-left: 25px;
    color:#fff;
}

nav ul li a:link, nav ul li a:visited{
    text-decoration: none;
    color:#fff;

}

/****************
CONTENT
****************/

.content1{
    height:100vh;
    background: url('../images/homeImg1.png') fixed no-repeat; 
    webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
}

如果你知道可能是什么原因，或者看到任何其他重大错误，请告诉我。非常感谢所有帮助。

此致干燥时

Answer 1

您尚未关闭首页的超链接。

<li><a href="#">home</li>

应该是

<li><a href="#">home</a></li>

导航中的html怪异行

1 个答案: