web前端快速入门（十）element

最新推荐文章于 2024-05-22 18:10:50 发布

大黄烽

最新推荐文章于 2024-05-22 18:10:50 发布

阅读量2.1k

点赞数

分类专栏： JavaWeb 文章标签： web vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_45139640/article/details/123863495

版权

JavaWeb 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

文章目录

一、Element概述、快速入门、布局
二、常用组件：表格、表单、对话框、分页工具条

一、Element概述、快速入门、布局

概述：
在这里插入图片描述

快速入门：
在这里插入图片描述
布局：

二、常用组件：表格、表单、对话框、分页工具条

通过实例实现以下页面：
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        .el-row {
            margin-bottom: 20px;
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <!--添加一行  8个格子-->
    <el-row>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
  new Vue({
    el:"#app"
  });
</script>

</body>
</html>

在这里插入图片描述

大黄烽

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
web前端快速入门（十）element

文章目录一、Element概述、快速入门、布局二、常用组件：表格、表单、对话框、分页工具条一、Element概述、快速入门、布局概述：快速入门：布局：二、常用组件：表格、表单、对话框、分页工具条通过实例实现以下页面：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>title</title> &
复制链接

扫一扫