使用html和css在导航栏下定位侧栏和文章

使用此html代码：

    <header>
        <ul>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
        </ul>
    </header>

    <main>
        <nav>
            <ul>
                <li> <a href="#">...</a> </li>
                <li> <a href="#">...</a> </li>
                <li> <a href="#">...</a> </li>
                <li> <a href="#">...</a> </li>
                <li> <a href="#">...</a> </li>
            </ul>
        </nav>

        <article>
            <section>
                <ul>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                </ul>
            </section>

            <section>
                <ul>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                </ul>
            </section>

            <section>
                <ul>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                </ul>
            </section>

            <section>
                <ul>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                </ul>
            </section>

            <section>
                <ul>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                </ul>
            </section>
        </article>
    </main>

    <footer>
        <ul>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
        </ul>
    </footer>

我正在尝试编写一个css来完成以下任务：

• 顶部有一个固定导航栏（已正常）
• 带有侧边栏和“物品”区域的主区域（需要固定位置和零件对齐）
• 文章区域需要放在侧边栏的右侧，但现在它已经显示在它的底部
• 页脚下面显示了一些奇怪的横幅（仅当鼠标光标未悬停时），如图所示：

---

任何人都可以给出一些解决方法的提示？

这可能就是你想要的吗？我仅在css中更改此选项：

main {
  margin-top: 32px;

  /* below lines was added */
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

footer {
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: white;
  text-align: center;

  /* below line was added */
  height: 50px;
}

这是。我在这个解决方案中使用了flexbox——这是一个很好的教程——不过，您也可以使用更好的工具进行布局：

---

建议：在html中使用class属性，然后在css中使用该类名-在css中直接使用html标记名不是好的做法-如果可能的话避免它

第一个建议：在html中使用

class

属性，然后在css中使用类名-在css中使用html标记名不是好的做法-如果可能的话避免它