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

Element UI框架学习篇(一)

news 2026/5/12 15:54:29

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

使用 llama.cpp + MTP 分支实现 1.5 倍 Token 输出加速实战指南

使用 llama.cpp MTP 分支实现 1.5 倍 Token 输出加速实战指南 摘要&#xff1a;本文详细介绍如何通过 llama.cpp 的 MTP&#xff08;Multi-Token Prediction&#xff09;PR 分支&#xff0c;配合 Qwen3.6-27B-MTP GGUF 量化模型&#xff0c;实现推理时每秒输出 token 数量翻倍…...

编程新知 2026/5/12 15:18:29

从零手写CNN：理解卷积网络的生物学原理与工程逻辑

1. 项目概述&#xff1a;从人眼到机器之眼&#xff0c;一次真实的视觉理解之旅你有没有盯着一张照片发过呆&#xff1f;比如朋友刚发来的旅行照——蓝天、雪山、一只歪头的雪豹。你几乎是一瞬间就认出了“雪豹”&#xff0c;甚至能判断它“在看镜头”“毛很厚”“可能刚睡醒”。…...

编程新知 2026/5/12 13:16:22

为AI编程助手构建持久化项目记忆库：告别上下文遗忘，提升团队协作效率

1. 项目概述&#xff1a;为AI编程助手构建持久化项目记忆库如果你和我一样&#xff0c;每天都要和Claude Code、Cursor这些AI编程助手打交道&#xff0c;肯定遇到过这个烦人的问题&#xff1a;每次新开一个对话&#xff0c;AI就像得了失忆症&#xff0c;完全不记得你刚才在做什…...

编程新知 2026/5/12 12:44:24

SkillPilot：AI编程助手技能一键管理与安全部署实战

1. 项目概述与核心价值最近在折腾AI编程助手的时候&#xff0c;发现了一个挺有意思的痛点&#xff1a;虽然Claude Code、Cursor这些工具都支持通过SKILL.md文件来扩展功能&#xff0c;但每次想找个新技能&#xff0c;都得手动去GitHub上翻找、下载、配置&#xff0c;还得担心代…...

编程新知 2026/5/12 11:05:14

便民服务渠道智慧整合融通方案

便民服务渠道智慧整合融通方案 目录 第1章项目概述 7 1.1项目背景 7 1.2项目建设目标 7 1.2.1总体目标 8 1.2.2具体目标 8 1.3项目建设范围 9 1.3.1渠道整合范围 9 1.3.2业务覆盖范围 10 1.3.3系统建设范围 10 1.4项目建设意义 11 1.4.1对群众的意义 11 1.4.2对政府的意义 11 …...

编程新知 2026/5/12 10:04:24

Go语言单例模式如何实现_Go语言单例模式教程【通俗】

sync.Once是最安全的单例初始化方式&#xff0c;天然解决并发首次调用竞态问题&#xff0c;只执行一次闭包&#xff1b;须作包级或结构体字段&#xff0c;避免局部变量失效&#xff1b;panic后会持续失败&#xff0c;需自行兜底。Go 里 sync.Once 是最安全的单例初始化方式直接…...

编程新知 2026/5/12 6:46:09

2026年市面上的培训机构管理系统对比，谁才是性价比之王

教务是培训机构的 “心脏”&#xff0c;而排课是教务最核心、最耗时、最容易出错的环节。传统人工排课&#xff1a;打开 Excel&#xff0c;手动填教师、教室、学员、时间&#xff0c;反复核对冲突&#xff0c;排一周课表要 1–3 天&#xff0c;还经常出现&#xff1a;老师时间撞…...

编程新知 2026/5/12 6:38:01

19 - 语言模型为何是AGI的开端？——从“知识压缩”到“智能涌现”的第一性原理

本专题系列文章共 21 篇，前 5 篇限时免费阅读 01 - 眩晕时代的定海神针：大模型落地的“第一性原理”与算力丰裕悖论 02 - 95%的AI投资打了水漂：五大错配如何扼杀你的“第二增长曲线” 03 - 从电力到AI：标准化已死，个性化永生——大模型时代的三大商业终局 04 - 你的护城…...

编程新知 2026/5/12 4:22:56

Mac上如何用DistroAV插件实现无线多机位直播：NDI技术完整指南

Mac上如何用DistroAV插件实现无线多机位直播&#xff1a;NDI技术完整指南 【免费下载链接】obs-ndi DistroAV (formerly OBS-NDI): NDI integration for OBS Studio 项目地址: https://gitcode.com/gh_mirrors/ob/obs-ndi 还在为Mac上的OBS直播设置烦恼吗&#xff1f;想…...

编程新知 2026/5/12 2:59:23

VRM-VRChat双向转换引擎：打破虚拟角色平台壁垒的技术解决方案

VRM-VRChat双向转换引擎&#xff1a;打破虚拟角色平台壁垒的技术解决方案 【免费下载链接】VRMConverterForVRChat 项目地址: https://gitcode.com/gh_mirrors/vr/VRMConverterForVRChat VRM格式转换、VRChat SDK3兼容、Unity编辑器扩展、虚拟角色迁移、跨平台角色转换…...

编程新知 2026/5/12 2:28:10