当前位置： 首页 > news >正文

Element UI框架学习篇(一)

news 2026/3/26 17:44:30

Element UI框架学习篇(一)

1.准备工作

1.1 下载好ElementUI所需要的文件

ElementUI官网

1.2 插件的安装

1.2.1 更改标签的时实现自动修改

在这里插入图片描述

1.2.2 element UI提示插件

在这里插入图片描述

1.3 使用ElementUI需要引入的文件

<link rel="stylesheet" href="../elementUI/elementUI.min.css">
<!-- 先导vue.js再导入elementUI 因为elementUI是基于vue开发的页面美化插件-->
<script src="../js/vue.js"></script>
<script src="../elementUI/elementUI.min.js"></script>

2 栅格布局

2.1 一行一格

2.1.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"><link rel="stylesheet" href="../elementUI/elementUI.min.css"><!-- 先导vue.js再导入elementUI --><script src="../js/vue.js"></script><script src="../elementUI/elementUI.min.js"></script><title>Document</title><style>.a{background-color: red;}body{margin:0;}</style>
</head>
<body><div id="app"><!-- 一行一格 占据整行的  24就为占据整行--><el-row><el-col :span="24" class="a"><!-- <div class="a">第一行</div> -->第一行</el-col></el-row></div><script>new Vue({el:"#app",})</script>
</body>
</html>

2.1.2 运行截图

在这里插入图片描述

2.2 一行多格

2.2.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"><link rel="stylesheet" href="../elementUI/elementUI.min.css"><!-- 先导vue.js再导入elementUI --><script src="../js/vue.js"></script><script src="../elementUI/elementUI.min.js"></script><title>Document</title><style>.a{background-color: red;}.b{background-color: blue;}.c{background-color: green;}.d{background-color: skyblue;}body{margin:0;}</style>
</head>
<body><div id="app"><el-row><el-col :span="5" class="b">2-1</el-col><el-col :span="14" class="d">2-2</el-col><el-col :span="5" class="c">2-3</el-col></el-row></div><script>new Vue({el:"#app",})</script>
</body>
</html>

2.2.2 运行截图

在这里插入图片描述

2.3 水平居中

2.3.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"><link rel="stylesheet" href="../elementUI/elementUI.min.css"><!-- 先导vue.js再导入elementUI --><script src="../js/vue.js"></script><script src="../elementUI/elementUI.min.js"></script><title>Document</title><style>.a{background-color: red;}.b{background-color: blue;}.c{background-color: green;}.d{background-color: skyblue;}body{margin:0;}</style>
</head>
<body><div id="app"><!-- 水平居中 (总长度-占据长度)/2 --><el-row><el-col :span="4" class="a" :offset="10">3-1</el-col></el-row></div><script>new Vue({el:"#app",})</script>
</body>
</html>

2.3.2 运行截图

在这里插入图片描述

2.4 响应式布局

2.4.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"><link rel="stylesheet" href="../elementUI/elementUI.min.css"><!-- 先导vue.js再导入elementUI --><script src="../js/vue.js"></script><script src="../elementUI/elementUI.min.js"></script><title>Document</title><style>.a{background-color: red;}.b{background-color: blue;}.c{background-color: green;}.d{background-color: skyblue;}body{margin:0;}</style>
</head>
<body><div id="app"><!-- 响应式布局 sm和lg只有一个能有效--><el-row><el-col class="a" :sm="14" :lg="20">5-1</el-col><el-col class="c" :sm="10" :lg="4">5-2</el-col></el-row><el-row><el-col class="b" :sm="20" :lg="4">6-1</el-col><!-- 可以sm=0操作一下 --><el-col class="d" :sm="4" :lg="20">6-2</el-col></el-row></div><script>new Vue({el:"#app",})</script>
</body>
</html>

2.4.2 运行截图

a 当宽度大于≥768px时

在这里插入图片描述

b 当宽度大于≥1200px时

在这里插入图片描述

相关文章：

Element UI框架学习篇(一)

Element UI框架学习篇(一) 1.准备工作 1.1 下载好ElementUI所需要的文件 ElementUI官网 1.2 插件的安装 1.2.1 更改标签的时实现自动修改 1.2.2 element UI提示插件 1.3 使用ElementUI需要引入的文件 <link rel"stylesheet" href"../elementUI/element…...

编程日记 2023/2/10 1:46:08

【算法】【C语言】

差分算法力扣1094题目描述学习代码思考力扣1094 题目描述 车上最初有 capacity 个空座位。车 只能 向一个方向行驶&#xff08;也就是说&#xff0c;不允许掉头或改变方向&#xff09; 给定整数 capacity 和一个数组 trips , trip[i] [numPassengersi, fromi, toi] 表示第 …...

编程日记 2023/2/10 1:44:59

【✨十五天搞定电工基础】基本放大电路

本章要求1. 理解放大电路的放大作用和共发射极放大电路的性能特点&#xff1b; 2. 掌握静态工作点的估算方法和放大电路的微变等效电路分析法&#xff1b; 3. 了解放大电路输入、输出电阻和电压放大倍数的计算方法&#xff0c;了解放大电路的频率特性、 互补功率放大…...

编程日记 2023/2/10 1:43:49

MyBatis 入门教程详解

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程日记 2023/2/10 1:42:39

shiro、springboot、vue、elementUI CDN模式前后端分离的权限管理demo 附源码

shiro、springboot、vue、elementUI CDN模式前后端分离的权限管理demo 附源码 源码下载地址 https://github.com/Aizhuxueliang/springboot_shiro.git 前提你电脑的安装好这些工具&#xff1a;jdk8、idea、maven、git、mysql&#xff1b; shiro的主要概念 Shiro是一个强大…...

编程日记 2023/2/10 1:41:27

智能优化算法——粒子群优化算法（PSO）（小白也能看懂）

前言&#xff1a; 暑假期间&#xff0c;因科研需要&#xff0c;经常在论文中看到各种优化算法&#xff0c;所以自己学习了一些智能优化的算法&#xff0c;做了一些相关的纸质性笔记&#xff0c;寒假一看感觉又有点遗忘了&#xff0c;并且笔记不方便随时查看&#xff0c;所以希…...

编程日记 2023/2/10 1:40:19

Lesson 6.4 逻辑回归手动调参实验

文章目录一、数据准备与评估器构造1. 数据准备2. 构建机器学习流二、评估器训练与过拟合实验三、评估器的手动调参在补充了一系列关于正则化的基础理论以及 sklearn 中逻辑回归评估器的参数解释之后&#xff0c;接下来&#xff0c;我们尝试借助 sklearn 中的逻辑回归评估器&…...

编程日记 2023/2/10 1:39:10

Oracle数据库入门大全

oracle数据库 Oracle 数据库、实例、用户、表空间、表之间的关系 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pSv0SArH-1675906973035)(vx_images/573695710268888.png 676x)] 数据库 数据库是数据集合。Oracle是一种数据库管理系统&#xff…...

编程日记 2023/2/10 1:38:02

C语言操作符详解(下)

提示&#xff1a;本篇内容是C语言操作符详解下篇 文章目录前言八、条件表达式九、逗号表达式十、 下标引用、函数调用和结构成员1. [ ] 下标引用操作符2. ( ) 函数调用操作符3.结构成员访问操作符十一、表达式求值1. 隐式类型转换举例说明1举例说明2举例说明32.算数转换3.操作…...

编程日记 2023/2/10 1:36:55

【五六七人口普查】我国省市两级家庭户住房状况

人口数据是我们在各项研究中最常使用的数据&#xff01;之前我们分享过第七次人口普查&#xff08;简称七普&#xff09;的数据&#xff01;很多小伙伴拿到数据后都反馈数据非常好用&#xff0c;同时很多小伙伴咨询有没有前面几次人口普查的数据&#xff0c;这样方便做人口变化…...

编程日记 2023/2/10 1:35:48

大数据框架之Hadoop：入门（二）从Hadoop框架讨论大数据生态

第2章 从Hadoop框架讨论大数据生态 2.1 Hadoop是什么 Hadoop是一个由Apache基金会所开发的分布式系统基础架构。主要解决&#xff0c;海量数据的存储和海量数据的分析计算问题。广义上来说&#xff0c;Hadoop通常是指一个更广泛的概念-Hadoop生态圈。 2.2 Hadoop发展历史 1&…...

编程日记 2023/2/10 1:34:41

负载均衡反向代理下的webshell上传+apache漏洞

目录一、负载均衡反向代理下的webshell上传1、nginx 负载均衡2、搭建环境3、负载均衡下的 WebShell连接的难点总结难点一、需要在每一台节点的相同位置都上传相同内容的 WebShell难点二、无法预测下次的请求交给哪台机器去执行。难点三、下载文件时&#xff0c;可能会出现飘逸&…...

编程日记 2023/2/10 1:33:33

打造安全可信的通信服务，阿里云云通信发布《短信服务安全白皮书》

随着数字化经济的发展&#xff0c;信息保护和数据安全成为企业、个人关注的焦点。近日&#xff0c;阿里云云通信发布《短信服务安全白皮书》&#xff0c;该白皮书包含安全责任共担、安全合规、安全架构三大板块&#xff0c;呈现了阿里云云通信在信息安全保护方面的技术能力、安…...

编程日记 2023/2/10 1:32:22

Python项目实战——外汇牌价（附源码）

前言 几乎每个人都在使用银行卡&#xff0c;今天我们就来爬取某行外汇牌价&#xff0c;获取我们想要的数据。 环境使用 python 3.9pycharm 模块使用 requests 模块介绍 requestsrequests是一个很实用的Python HTTP客户端库&#xff0c;爬虫和测试服务器响应数据时经常会用到&…...

编程日记 2023/2/10 1:31:10

String、StringBuffer、StringBuilder有什么区别？

第5讲 | String、StringBuffer、StringBuilder有什么区别&#xff1f; 今天我会聊聊日常使用的字符串&#xff0c;别看它似乎很简单&#xff0c;但其实字符串几乎在所有编程语言里都是个特殊的存在&#xff0c;因为不管是数量还是体积&#xff0c;字符串都是大多数应用中的重要…...

编程日记 2023/2/10 1:30:03

python基于django+vue的高铁地铁火车订票管理系统

目录 1 绪论 1 1.1课题背景 1 1.2课题研究现状 1 1.3初步设计方法与实施方案 2 1.4本文研究内容 2 2 系统开发环境 4 2.1 使用工具简介 4 2.2 环境配置 4 2.4 MySQL数据库 5 2.5 框架介绍 5 3 系统分析 6 3.1系统可行性分析 6 3.1.1经济可行性 6 3.1.2技术可行性 6 3.1.3运行可…...

编程日记 2023/2/10 1:28:57

全栈自动化测试技术笔记(一)：前期调研怎么做

昨天下午在家整理书架&#xff0c;把很多看完的书清理打包好&#xff0c;预约了公益捐赠机构上门回收。 整理的过程中无意翻出了几年前的工作记事本&#xff0c;里面记录了很多我刚开始做自动化和性能测试时的笔记。 虽然站在现在的角度来看&#xff0c;那个时候无论是技术细…...

编程日记 2023/2/10 1:27:49

专家培养计划

1、先知道一百个关键词 进入一个行业&#xff0c;如果能快速掌握其行业关键词&#xff0c;你会发现&#xff0c;你和专家的距离在迅速缩短。 若不然&#xff0c;可能同事间的日常交流&#xff0c;你都会听得云里雾里&#xff0c;不知所云。 比如做零售&#xff0c;就要了解零售…...

编程日记 2023/2/10 1:26:42

583. 两个字符串的删除操作 72. 编辑距离

583. 两个字符串的删除操作 dp[i][j]:以i-1结尾的word1和j-1结尾的word2 变成相同字符串最少的步骤为dp[i][j] 初始化dp[i][0],dp[0][j]为空字符串和第一个字符匹配的最少步骤&#xff0c;即i/j&#xff0c;删除对应的字符个数。dp[i][0]i,dp[0][j]j; 遍历两个字符串。 若word1…...

编程日记 2023/2/10 1:25:32

[多线程进阶] 常见锁策略

专栏简介: JavaEE从入门到进阶 题目来源: leetcode,牛客,剑指offer. 创作目标: 记录学习JavaEE学习历程 希望在提升自己的同时,帮助他人,,与大家一起共同进步,互相成长. 学历代表过去,能力代表现在,学习能力代表未来! 目录: 1. 常见的锁策略 1.1 乐观锁 vs 悲观锁 1.2 读写…...

编程日记 2023/2/10 1:24:23

HCIA复习作业

一、 实验拓扑二、 实验需求1.学校内HTTP客户端可以正常通过域名www.baidu.com访问百度的服务器 2.学校网络内部基于192.168.1.0/24划分&#xff0c;PC1可以访问3.3.3.0/24网段&#xff0c;PC2不允许 3.学校内部使用静态路由&#xff0c;R1和R2之间浮动静态路由 4.运营商使用动…...

编程新知 2026/3/26 17:43:48

OmenSuperHub：惠普游戏本性能控制终极指南 - 开源替代方案全面解析

OmenSuperHub&#xff1a;惠普游戏本性能控制终极指南 - 开源替代方案全面解析 【免费下载链接】OmenSuperHub 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub 还在为惠普Omen Gaming Hub的臃肿体积和隐私担忧而烦恼吗&#xff1f;OmenSuperHub为你提供了一…...

编程新知 2026/3/26 17:19:31

提升Blender渲染效率：立方盒反射烘培与材质优化指南

提升Blender渲染效率&#xff1a;立方盒反射烘培与材质优化指南 在3D创作领域&#xff0c;渲染效率与质量始终是设计师面临的核心挑战。Blender作为开源三维软件的代表&#xff0c;其渲染引擎的灵活性与强大功能为艺术家提供了无限可能&#xff0c;但同时也对硬件资源提出了较高…...

编程新知 2026/3/26 16:51:18

HashCheck：Windows系统下终极文件完整性验证解决方案

HashCheck&#xff1a;Windows系统下终极文件完整性验证解决方案 【免费下载链接】HashCheck HashCheck Shell Extension for Windows with added SHA2, SHA3, and multithreading; originally from code.kliu.org 项目地址: https://gitcode.com/gh_mirrors/ha/HashCheck …...

编程新知 2026/3/26 16:10:54

深入解析DW_I2C驱动中的中断处理机制：从FIFO到数据传输实战

深入解析DW_I2C驱动中的中断处理机制&#xff1a;从FIFO到数据传输实战 在嵌入式Linux开发中&#xff0c;I2C总线作为连接各类传感器的关键通道&#xff0c;其驱动性能直接影响系统响应速度和稳定性。DW_I2C&#xff08;DesignWare I2C&#xff09;作为业界广泛采用的IP核&…...

编程新知 2026/3/26 15:42:21

阿里云轻量应用服务器上5分钟搞定EMQ X MQTT集群搭建（附性能调优技巧）

阿里云轻量应用服务器上5分钟构建高可用EMQ X MQTT集群 物联网应用的爆发式增长让MQTT协议成为设备连接的首选方案。对于需要处理海量设备连接的企业开发者而言&#xff0c;单节点MQTT服务器早已无法满足高并发和容灾需求。本文将带你在阿里云轻量应用服务器上快速部署EMQ X集群…...

编程新知 2026/3/26 14:51:53

SQL入门学习笔记

一、一些必备“常识” 数据库是指任何相关信息得集合&#xff0c;可以用不同的方式存储。&#xff08;如&#xff1a;电话簿&#xff0c;购物清单&#xff09; 两种主要的数据库类型&#xff1a;关系型数据库(SQL)例如mysql,postgresql(pg)与非关系型数据库(NoSQL)例如mogodb…...

编程新知 2026/3/26 13:40:59

大模型Transformer架构学习

基础知识&#xff1a; 损失函数&#xff1a;梯度下降单次训练过程过拟合数据增强&#xff1a;增加训练数据&#xff0c;对原始数据加噪&#xff0c;翻转&#xff0c;旋转 正则化&#xff1a;防止该函数过分变化&#xff0c;让损失函数加上该参数&#xff0c;调整损失函数时会抑…...

编程新知 2026/3/26 13:24:57

从猫狗识别到工业质检：深入理解PyTorch中的sample_weight，让模型更‘关注’关键样本

从猫狗识别到工业质检&#xff1a;深入理解PyTorch中的sample_weight&#xff0c;让模型更‘关注’关键样本 在工业质检和医疗影像分析中&#xff0c;某些样本的误判代价可能比其他样本高出一个数量级。想象一下&#xff0c;在半导体缺陷检测中漏判一个微小裂纹&#xff0c;或在…...

编程新知 2026/3/26 12:38:39

深度解析：Umi-OCR Rapid版本HTTP服务参数配置的3个关键步骤

深度解析&#xff1a;Umi-OCR Rapid版本HTTP服务参数配置的3个关键步骤 【免费下载链接】Umi-OCR Umi-OCR: 这是一个免费、开源、可批量处理的离线OCR软件&#xff0c;适用于Windows系统&#xff0c;支持截图OCR、批量OCR、二维码识别等功能。 项目地址: https://gitcode.com…...

编程新知 2026/3/26 11:53:59