简单的 html demo 三段式显示
时间: 2023-08-01 07:13:20 浏览: 84
好的,以下是一个简单的 HTML 三段式显示的 demo:
```html
<!DOCTYPE html>
<html>
<head>
<title>三段式显示 Demo</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.header, .main, .footer {
width: 80%;
padding: 20px;
margin: 10px;
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 5px;
}
.header {
flex: 1;
}
.main {
flex: 2;
}
.footer {
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="main">
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut turpis eget lorem dapibus bibendum.</p>
</div>
<div class="footer">
<h3>Footer</h3>
</div>
</div>
</body>
</html>
```
在这个 demo 中,我们使用了 Flexbox 布局来实现三段式显示,即页面被分为 header、main 和 footer 三个部分。我们使用了 `display: flex` 将整个页面容器设为 flex 容器,然后使用 `flex-direction: column` 将其子元素沿垂直方向排列。对于每个子元素,我们设置了 `flex` 属性来控制其在容器中的占比。同时,我们也为每个部分添加了样式来使它们看起来更美观。
阅读全文