ElementUI之组件layout三种布局方式

（1）引入elementui.js文件—在普通的html页面中使用<link rel="stylesheet" href="../../index.css"><script src="../../vue.js"></script><script src="../../ele

不可爱仙女

11779人浏览 · 2021-02-27 13:55:54

不可爱仙女 · 2021-02-27 13:55:54 发布

（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'>&copy;蒋若依</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>

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^