html如何分为上下两部分

2024年4月13日 互联网

使用HTML的`标签将内容包裹起来，并设置CSS样式为display: flex; flex-direction: column;`，即可实现上下两部分布局。

要将HTML分为上下两部分，可以使用<div>标签将内容包裹起来，并使用CSS样式设置上下部分的布局，以下是一个简单的示例：

html如何分为上下两部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 分上下两部分示例</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        .top {
            flex: 1;
            background-color: lightblue;
        }
        .bottom {
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="top">
            <h1>小标题1</h1>
            <p>这里是第一部分的内容。</p>
        </div>
        <div class="bottom">
            <h2>小标题2</h2>
            <table>
                <tr>
                    <th>表头1</th>
                    <th>表头2</th>
                </tr>
                <tr>
                    <td>单元格1</td>
                    <td>单元格2</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

在这个示例中，我们使用了<div>标签创建了一个名为container的容器，然后将其设置为垂直排列（flex-direction: column），接着，我们将顶部和底部部分分别放入两个子<div>标签中，并为它们设置了不同的背景颜色，我们使用CSS样式设置了.top和.bottom的高度，使它们占据整个视口高度。

最新文章