你如何在Html中创建页面部分

Question

如何使用水平部分进行页面布局，但是在同一页面上？我希望我的页面有一个正文，然后是另一个部分的页脚（正好在页面下方）就像这个Example中的那个！

如果您注意到，您看到的第一页包含背景，那么当您向下滚动时，有多个部分但没有背景。请问这是如何实现的？如果你能举出例子我会很高兴非常感谢你！

Answer 1

您将需要使用HTML和CSS。

这是a jsFiddle

HTML

<header class="container global-header">
    Header
</header>

<section class="container about">
    About
</section>

<section class="container contact">
    Contact
</section>

<footer class="container global-footer">
    Footer
</footer>

CSS

* {
    box-sizing: border-box;
    /* look this up */
}

body {
    margin: 0;
}

/* style what the sections have in common */
.container {
    width: 100%;
    float: left;
    border: 1px solid black;
    text-align: center;
}

/* target specific sections */
.global-header {
    background-color: red;
}

.about {
    background-color: gray;
}