（1）引入elementui.js文件—在普通的html页面中使用
<!-- 两者顺序不能变化，因为elementui是基于vue的 -->
<link rel="stylesheet" href="../../index.css">
<script src="../../vue.js"></script>
<script src="../../elementUI.js"></script>
(2)编写html和css
el-row属性：
布局1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 两者顺序不能变化，因为elementui是基于vue的 -->
<script src="../../vue.js"></script>
<script src="../../elementUI.js"></script>
<link rel="stylesheet" href="../../index.css">
<style>
body{
margin: 0%;
padding: 0%;
}
/* 顶栏的样式 */
.el-header{
background: #f55f5f;
color: aliceblue;
text-align: center;
}
/* 侧边栏样式 */
.el-aside{
height: 480px;
background-color: rgb(117, 152, 226);
color: aliceblue;
float: left;
}
/* 内容栏样式 */
.el-main{
height: 480px;
background-color: rgb(122, 240, 185);
color: aliceblue;
border: 5px solid #ccc;
}
/* 列的样式 */
.el-col{
height: 160px;
}
.col1{
background-color: rgb(237, 250, 177);
color: aliceblue;
}
.col2{
background-color: rgb(230, 164, 250);
color: aliceblue;
}
.col3{
background-color: rgb(141, 123, 241);
color: aliceblue;
}
.el-footer{
background-color: rgb(153, 146, 146);
color: aliceblue;
}
</style>
</head>
<body>
<div id="app">
<!-- 定义一个容器 -->
<el-container>
<!-- 定义一个顶栏 -->
<el-header height='60px'>
<!-- 用普通的标签设置标题 -->
<h2>elementUI布局的顶栏</h2>
</el-header>
<!-- 嵌套的容器 -->
<el-container>
<!-- 定义一个侧边的导航栏 -->
<el-aside width='150px'>侧边栏</el-aside>
<!-- 定义内容栏 -->
<el-main>
<!-- 定义第一行，栅格布局 -->
<el-row>
<!-- 一行中有两个大小相同的列 -->
<el-col :span='12' class='col1'>第一行第一列</el-col>
<el-col :span='12' class='col2'>第一行第二列</el-col>
</el-row>
<el-row>
<el-col :span='24' class='col3'>第二行</el-col>
</el-row>
</el-main>
</el-container>
<el-footer height='30px'>©蒋若依</el-footer>
</el-container>
</div>
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
布局2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../index.css">
<script src="../../vue.js"></script>
<script src="../../elementUI.js"></script>
<style>
.el-header{
background-color: rgb(241, 128, 128);
color: aliceblue;
text-align: center;
font-size: 20px;
line-height: 60px;
}
.el-aside{
width: 200px;
background-color: rgb(126, 231, 182);
color: aliceblue;
text-align: center;
font-size: 20px;
line-height: 550px;
}
.el-main{
background: coral;
color: aliceblue;
text-align: center;
font-size: 20px;
line-height: 500px;
}
.el-footer{
background-color: rgb(225, 173, 230);
}
</style>
</head>
<body>
<div id="app">
<el-container style="width: auto; height: 650px;">
<el-header>Header</el-header>
<el-container>
<el-aside>侧边栏</el-aside>
<el-container>
<el-main>main</el-main>
<el-footer>footer</el-footer>
</el-container>
</el-container>
</el-container>
</div>
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
布局3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../index.css">
<script src="../../vue.js"></script>
<script src="../../elementUI.js"></script>
<style>
.el-aside{
width: 200px;
height:600px;
background-color: rgb(126, 128, 230);
color: aliceblue;
font-size: 24px;
text-align: center;
}
.el-header{
background-color: rgb(241, 128, 128);
color: aliceblue;
text-align: center;
font-size: 20px;
line-height: 60px;
}
.el-main{
/* height: 300px; */
background: coral;
color: aliceblue;
text-align: center;
font-size: 20px;
}
.el-footer{
height: 60px;
background-color: rgb(225, 173, 230);
color: aliceblue;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</div>
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
