Container布局
时间: 2023-07-08 21:54:37 浏览: 102
Container 是一个基础组件,用于布局网页内容。它是一个容器,包含了整个页面的主要内容,通常包括头部、导航栏、侧边栏、主体内容和底部等部分。Container 组件通过设置内部元素的宽度、最大宽度和边距等属性来实现网页布局的灵活性和自适应性。
Container 组件的代码示例:
```html
<template>
<div class="container">
<!-- 头部内容 -->
<header>
...
</header>
<!-- 导航栏内容 -->
<nav>
...
</nav>
<!-- 侧边栏内容 -->
<aside>
...
</aside>
<!-- 主体内容 -->
<main>
...
</main>
<!-- 底部内容 -->
<footer>
...
</footer>
</div>
</template>
<style>
.container {
max-width: 1200px; /* 容器最大宽度 */
margin: 0 auto; /* 居中显示 */
padding: 20px; /* 容器内边距 */
}
</style>
```
在这个示例中,Container 组件包含了头部、导航栏、侧边栏、主体内容和底部等部分,并且通过设置 max-width 和 margin 属性来控制容器的宽度和居中显示。同时,容器内部还设置了 padding 属性来控制容器内元素的间距。这样,通过调整容器的宽度和内部元素的布局,就可以实现各种不同的页面布局效果。