vue layout 布局 给出完整代码
时间: 2023-07-26 16:40:34 浏览: 59
以下是一个简单的 Vue 布局布置代码示例:
```html
<template>
<div>
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>内容标题</h2>
<p>这是一些内容。</p>
</section>
<section>
<h2>更多内容标题</h2>
<p>这是更多内容。</p>
</section>
</main>
<footer>
版权信息
</footer>
</div>
</template>
<style>
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background-color: #eee;
}
nav ul {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
margin-right: 1rem;
}
main {
padding: 1rem;
}
section {
margin-bottom: 2rem;
border-bottom: 1px solid #eee;
}
footer {
padding: 1rem;
background-color: #eee;
}
</style>
```
此代码演示了一个基本的网页布局,包括页眉、导航、内容和页脚。使用 Flexbox 进行布局,具有响应式设计。