Css弹性布局网页模板
时间: 2023-08-29 14:12:46 浏览: 54
以下是一个基于CSS弹性布局的简单网页模板:
```html
<!DOCTYPE html>
<html>
<head>
<title>弹性布局网页模板</title>
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav {
background-color: #555;
color: #fff;
padding: 10px;
display: flex;
flex-wrap: wrap;
}
nav a {
color: #fff;
margin-right: 10px;
text-decoration: none;
}
main {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: #eee;
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>网页标题</h1>
</header>
<nav>
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
<a href="#">链接5</a>
</nav>
<main>
<h2>网页主体内容</h2>
<p>这里是一些文字说明</p>
</main>
<footer>
<p>版权信息</p>
</footer>
</body>
</html>
```
在这个模板中,`body` 元素使用了 `display: flex`,使其成为一个弹性容器。`flex-direction: column` 则指定了弹性容器的主轴方向为垂直方向。`min-height: 100vh` 则是为了让弹性容器至少占满整个视口高度。
`header`、`nav`、`main` 和 `footer` 元素都被放置在弹性容器中,使用了弹性布局来实现自适应布局。其中,`nav` 元素使用了 `flex-wrap: wrap` 来实现在弹性容器宽度不足时自动换行。
这个模板只是一个简单的示例,可以根据实际需求进行修改和扩展。