Question

When I try to type anything into the div tag below, the text shows up hyperlinked, even though there is no "a" tag around it.

HTML:

<html>
    <head>
        <link href = "https://fonts.googleleapis.com/css?family=Work+Sans:300">
        <link href = "MockUpV1.css" rel = "stylesheet" type = "text/css">
        <meta charset = "UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Home | TechHOUNDS</title>
    </head>

    <header>
        <!-- Navigation Bar -->
        <div class = "container">
            <h1 class = "logo"></h1>
            <img class = "test" src = "th_logo.png" width = "4.5%" height = "auto">
            <nav>
                <ul>
                    <li><a href = "https://techhounds.com"/>Home</li>
                    <li><a href = "https://google.com"/>Text1</li>
                    <li><a href = "https://google.com"/>Text2</li>
                    <li><a href = "https://google.com"/>Text3</li>
                    <li><a href = "https://google.com"/>Text4</li>
                </ul>
            </nav>
        </div>
    </header>

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

        <div style = "height: 150%; background-color: white; font-size: 36px">
            This is attempt #5 at a parallax scroll.
        </div>

        <!-- This is if the background picture is also wanted below -->
        <!-- <div class="parallax"></div> -->
    </body>
</html>

CSS:

body {
    margin: 0;
    background: #222;
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;
    }

.container {
    width: 80%;
    margin: 0 auto;
}

header {
    background: #f1f1f1;
}

header::after {
    content: '';
    display: table;
    clear: both;
}

.logo {
    float: left;
    padding: 10px 0;
}

nav {
    float: right;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-left: 70px;
    padding-top: 23px;
    position: relative;
}

nav a {
    color: #444;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
}

nav a:hover {
    color: #000;
}

nav a::before {
    content: '';
    display: block;
    height: 3px;
    background-color: #444;

    position: absolute;
    top: 100%;
    width: 0%;

    transition: all ease-in-out 250ms;
}

nav a:hover::before {
    width: 100%;
}

body, html {
    height: 100%;
}

.parallax {
    /* The image used */
    background-image: url('placeholder.png');

    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

I have figured out that the reason "This is attempt #5 at a parallax scroll." is showing up hyperlinked is because of the "a" tag, and I cannot find a better substitute for it. Can someone help he "un"link the text?

Answer 1

标题中未关闭的标签

标头中有一组<a href...标记，这些标记从未关闭。您可能会认为浏览器会在</li>或</header>处自动关闭它们，但不一定是这种情况。在每个</a>之前添加</li>。

例如，更改：

<li><a href = "https://techhounds.com"/>Home</li>

收件人：

<li><a href = "https://techhounds.com"/>Home</a></li>

在<a> tag?

1 个答案:

标题中未关闭的标签