我是一个css/html的初学者,我正在做一个小项目.我在网上找到了制作页眉和页脚的代码,文本将按预期出现在这些区域中,但不会出现在页面的非页眉部分.有什么建议吗?(参考代码,第二个是我的样式表.)

<DOCTYPE! html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <html lang="en-US">
        <head>
            <link rel="stylesheet" href="css attempt">
            <title>Prism Outreach</title>
        </head>
        <body>
            <div class="fixed-header">
                <h1><a href="index.html">Organization</a></h1>
            <div class="container">
                <nav>
                    <a href="#">About</a>
                    <a href="#">Resources</a>
                    <a href="#">Donate</a>
                    <a href="#">Projects</a>
                    <a href="#">Contact Us</a>
                </nav>
                </div>
            </div>
      <!--I have attempted to put <p> here, but the text does not appear.-->
            <div class="fixed-footer">
                <div class="container">Insert Text Lol</div>        
            </div>
        </body>
body {
    padding-top:60px;
    padding-bottom: 40px;}
p {
    color:black;}
.fixed-header, .fixed-footer {
    width: 100%;
    position: fixed;
    background: rgb(0, 0, 0);
    padding: 10px 0;
    color: aliceblue;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: large;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
.fixed-header {top: 0;}
.fixed-footer {bottom: 0;}
.container {
    width: 100%;
    margin: 0 auto;}
nav a {
    color: #fff;
    text-decoration: none;
    padding: 7px 25px;
    display: inline-block}

推荐答案

您必须关闭您的Header元素

<body>
            <div class="fixed-header">
                <h1><a href="index.html">Organization</a></h1>

            <!-- You needed this closing tag -->
            </div>

            <div class="container">
                <nav>
                    <a href="#">About</a>
                    <a href="#">Resources</a>
                    <a href="#">Donate</a>
                    <a href="#">Projects</a>
                    <a href="#">Contact Us</a>
                </nav>
                </div>
            </div>
            <div class="fixed-footer">
                <div class="container">Insert Text Lol</div>        
            </div>
        </body>

Html相关问答推荐

在浮动元素旁边垂直居中

为什么这个高度为100%的页面会出现滚动条?

在元素之间添加空格

如何实现弯曲的梯形导航栏?

如何从卷轴中排除粘性元素?

R-markdown中的非顺序列表

有没有一种方法可以动态地从网格或Flexbox中取出HTML元素?

防止position:relative的child在出界时收缩

OnChange函数未在下拉列表中使用一个选项触发

使用`<;use>;`与`<;img>;`时呈现的SVG大小不同

Html视频标签:圆角像素化

如何将多个类名组合到CSS中的一个关键帧

如何检测输入字段是否没有必填且没有占位符?

实验的响应式屏幕尺寸

不完整的悬停

什么没有 margin-right 和 width:100% 溢出子元素到左边?

如何为某些行具有 rowspan 的表的每个奇数行着色

使用 bootstrap-icons 的未排序图标堆栈

动态使用时波浪号不转换为绝对路径

如何使用 html 和 css 添加超链接功能