欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

管理系统 VUE+ElementUI （3） ElementUI布局

程序员文章站 2022-07-01 19:11:39
...

我使用ElementUI的布局容器设置页面布局

1、html页面代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <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>
</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>Footer</el-footer>
               </el-container>
          </el-container>
        </el-container>
    </div>
</body>
    <script>
        new Vue({
            el:'#app'
        });
    </script>
</html>

 

2、浏览器显示页面样式如下管理系统 VUE+ElementUI （3） ElementUI布局

 

上一篇： vue学习总结-elementUi中的table的序号

下一篇： pytorch_LSTM_写诗

推荐阅读