时间戳

首页 > 解决方案 > 正文出现在标题中？

html - 正文出现在标题中？

问题描述

尝试向我的正文添加内容以继续我的网站流程，但正文中的任何内容都出现在标题的左上角。

为什么会发生这种情况的任何想法？

堆栈溢出要我写更多的内容。这是我写的更多内容。

<!DOCTYPE html>
<html>
    <head>

        <link href="flex.css" rel="stylesheet" type="text/css">

        <link href="https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500">

    </head>

    <header>
        <div id="header">
            <h1 class="title">brookfield corp</h1>
            <nav class="top-nav">
                <ul>
                    <a href="#recent"><li>recent</li></a>
                    <a href="#samples"><li>samples</li></a>
                </ul>
            </nav>
        </div>
    </header>

    <body>
        <h2>recent</h2>
    </body>

</html>

html {
    box-sizing: border-box;
}

.title {
    font-family: 'Frank Ruhl Libre', serif;
    text-align: center;
    font-size: 4em;
    background-color: hsla(140, 50%, 30%, .9);
    color:cornsilk; 
    padding: 30px 0px 30px 0px;
    margin: 0 auto;
    height: 100px;
    width: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
}

nav {
    font-family: 'Frank Ruhl Libre', serif;
    float: right;
    text-decoration: none;
}

li {
    color: black;
    list-style: none;
    display: inline;
    opacity: .7;
    text-decoration: none;
}

标签： htmlcss

解决方案

这个块：

<header>
    <div id="header">
        <h1 class="title">brookfield corp</h1>
        <nav class="top-nav">
            <ul>
                <a href="#recent"><li>recent</li></a>
                <a href="#samples"><li>samples</li></a>
            </ul>
        </nav>
    </div>
</header>

需要搬进去

<body> </body>

然后你可以继续，在结束</body>标签之前，使用<div id="body">或类似的，跟随你的<header></header>块。

推荐阅读