20220722_使用Element UI写html页面

VIP文章 PeterWarne

已于 2022-07-22 00:26:54 修改

阅读量1.2k

点赞数

分类专栏： JavaWeb 文章标签： ui html vue.js elementui

于 2022-07-22 00:26:34 首次发布

本文链接：https://blog.csdn.net/clarkgable/article/details/125923657

版权

Element官网component资源点击这里
结构图，element-ui自行下载复制到一致路径
请添加图片描述

第一个html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <el-row>
        <el-button>Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
    </el-row>

    <el-row>
        <el-button plain>Plain</el-button>
        <el-button type="primary" plain>Primary</el-button>
        <el-button type="success" plain>Success</el-button>
        <el-button type="info" plain>Info</el-button>
        <el-button type="warning" plain>Warning</el-button>
        <el-button type="danger" plain>Danger</el-button>
    </el-row>

    <el-row>
        <el-button round>Round</el-button>
        <el-button type="primary" round>Primary</el-button>
        <el-button type="success" round>Success</el-button>
        <el-button type="info" round>Info</el-button>
        <el-button type="warning" round>Warning</el-button>
        <el-button type="danger" round>Danger</el-button>
    </el-row>

    <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </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>```

请添加图片描述
第二个

<!DOCTYPE html>
<html lang="en">
<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">