Element-UI 布局容器

红太狼 2023-10-07 20:16 27阅读 0赞

#### 阅读目录 ####

*  Container 布局容器
 *   *  入门案例

## Container 布局容器 ##

用于布局的容器组件，方便快速搭建页面的基本结构：

*  `<el-container>`：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列
 *  `<el-header>`：顶栏容器
 *  `<el-aside>`：侧边栏容器
 *  `<el-main>`：主要区域容器
 *  `<el-footer>`：底栏容器

### 入门案例 ###

![在这里插入图片描述][d0d483afcadb4dd3ab6fe8bd35137b7c.png]

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>element入门</title>
    	
    	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    	 <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    	
    	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
    </head>
    <body>
    	
    	<div id="app">
    		<el-container>
    			<el-header>
    				header
    			</el-header>
    			<el-container>
    				<el-aside width="200px">aside</el-aside>
    				<el-container>
    					<el-main>main</el-main>
    					<el-footer>
    						<el-row>
    						  <el-col :span="8"><div class="grid-content bg-purple">footer</div></el-col>
    						  <el-col :span="8"><div class="grid-content bg-purple-light">footer</div></el-col>
    						  <el-col :span="8"><div class="grid-content bg-purple">footer</div></el-col>
    						</el-row>
    					</el-footer>
    				</el-container>
    			</el-container>
    		</el-container>
    
    	</div>
    	<style>
    			.el-header, .el-footer {
          
    				background-color: #B3C0D1;
    				color: #333;
    				text-align: left;
    				line-height: 60px;
    			}
    	
    			.el-aside {
          
    				background-color: #D3DCE6;
    				color: #333;
    				text-align: center;
    				line-height: 200px;
    			}
    	
    			.el-main {
          
    				background-color: #E9EEF3;
    				color: #333;
    				text-align: center;
    				line-height: 590px;
    			}
    		</style>
    </body>
    <script>
    	 new Vue({
          
    		el:'#app'
    	  });
    </script>
    </html>

[d0d483afcadb4dd3ab6fe8bd35137b7c.png]: https://img-blog.csdnimg.cn/d0d483afcadb4dd3ab6fe8bd35137b7c.png