【超详细保姆教程】手把手教你如何修改el-tab的默认样式，把el-tab的label变成我们想要的

最新推荐文章于 2025-03-04 23:48:08 发布
最新推荐文章于 2025-03-04 23:48:08 发布
阅读量5.2k 收藏 31
点赞数 19
分类专栏： 前端 文章标签： css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Youweretrouble/article/details/138182002
版权

目录

前言

做前端实习也有一段时间了，昨天晚上在学校上项目工程管理这门课的时候，提到一个高频模块的概念，简单来说就是我们在生活中需要拥有模块化思想，把自己的生活和工作中经常要用到的东西总结出一个标准化的流程和步骤，这样下次再用的时候能事半功倍，极大地提高效率。

这一点对于前端来说尤为重要，因为前端的样式和逻辑在不同的界面经常会有很多重复的东西，就比如说今天的el-tab，在element-plus 官网 Tabs标签页上会有最简单的一些样式，但是很多时候其实对于我们的开发来说是不够的，因此我今天就来总结一下，怎么去修改默认样式，自定义成自己想要的。

实现效果

官方的样式

在这里插入图片描述

修改后的结果

在这里插入图片描述

步骤

1、去掉分割线和下划线

首先要把el-tab的type去掉，然后利用：deep穿刺，把el-tab的各种线给去掉，这个时候就只显示文字了。

/* 去掉长分割线 */
:deep(.el-tabs__nav-wrap::after) {
   
  position: static !important;
}

/* 去掉下划线 */
:
最低0.47元/天 解锁文章
el-table样式美化
skysys的研究小屋
01-29 4169
<!-- 列表展示 --> <el-table :data="tableData" v-loading="loading2" border class="mg-btm-20 member-table" :header-cell-style="{ background: '#EBECF0', color: '#555' }" :.
el-tabs渐变背景色动画效果样式
weixin_43337481的博客
11-20 349
【代码】el-tabs渐变背景色动画效果样式。
el-tabs样式修改
前端程序媛_Ying博客
04-25 899
【代码】el-tab样式修改。
修改el-tabs样式问题
m0_65835778的博客
02-17 800
el-tabs样式修改
前端学习--tab修改文字大小和table修改样式
最新发布
m0_65284383的博客
03-04 225
使用插槽（slot）自定义标签页的标题区域。
ElementPlus的el-tabs组件自定义标签头、去掉长分割线、去掉下划线、修改下划线的样式、修改标签头的字体颜色（选中状态和未选中状态）、修改鼠标悬浮时标签头的样式
聂可以的博客
04-12 6324
ElementPlus的el-tabs组件自定义标签头、去掉长分割线、去掉下划线、修改下划线的样式、修改标签头的字体颜色（选中状态和未选中状态）、修改鼠标悬浮时标签头的样式
elementui的el-tabs标签页样式修改
qq_52335038的博客
08-24 5450
【代码】elementui的el-tabs标签页样式修改。
el-tabs的CSS样式修改
AM1n98的博客
05-27 961
两层tab：即政企版/公众版为第一层tab，日活跃用户统计/月活跃用户统计为第二层tab。
ElementUI：el-tabs标签页样式修改
一些平时在开发过程中遇到的常见问题，分享给大家
11-30 917
elementui tabs一些常用修改
el-tabs样式调整 ，切换时，下划线不变形
qq_37187520的博客
10-12 985
【代码】【无标题】
2023闲鱼无货源超详细保姆级教程-视频教程网盘链接提取码下载.txt
12-18
本课程将深入探讨2023年闲鱼无货源情况，为您提供超详细的解决方案。我们将详细介绍如何寻找替代货源、建立稳定的供应链以及利用社交媒体拓展客户群。这是一份保姆级的教程，确保您能迅速适应并获得成功。 视频大小...
mysql安装教程（保姆级）-mysql-8.0.32-winx64
03-01
mysql安装教程（保姆级）---mysql-8.0.32-winx64 mysql安装教程（保姆级）---mysql-8.0.32-winx64 mysql安装教程（保姆级）---mysql-8.0.32-winx64 mysql安装教程（保姆级）---mysql-8.0.32-winx64 mysql安装教程...
AI deepseek 权威指南 保姆级教程 北京大学&清华大学 - DeepSeek全套教程文档
02-26
AI deepseek 权威指南 保姆级教程 北京大学&清华大学 - DeepSeek全套教程文档包含五套系列教程 AI deepseek 权威指南 保姆级教程 北京大学&清华大学 - DeepSeek全套教程文档包含五套系列教程 AI deepseek 权威指南 ...
虚拟机 VMware - 安装详细步骤(保姆级教程)
09-13
虚拟机 VMware - 安装详细步骤(保姆级教程)虚拟机 VMware - 安装详细步骤(保姆级教程)虚拟机 VMware - 安装详细步骤(保姆级教程)虚拟机 VMware - 安装详细步骤(保姆级教程)虚拟机 VMware - 安装详细步骤(保姆级教程)...
修改el-tabs下划线的样式
我愿化作繁星
11-27 1644
下划线长度根据标签内容自动调整。
el-tabs 样式修改
我的博客
09-18 498
【代码】el-tabs 样式修改。
el-tabs修改
qq_34179819的博客
08-10 1626
而且el-tabs组件能给到的只有el-tabs和el-tab-pane，直接将:style="{}"动态样式作用在el-tab-pane上又不行。想必也发现了另外一个神奇的事情，原生的el-tabs栏目的宽度是根据字体大小也就是font-size去设置的。此时，在代码中也是根据font-size去设置栏目的宽度，示例中使用4.8去调节，可以修改这个数字去修改栏目的宽度。现有的element的组件库已经能满足大部分项目中的需求，但是当出现一些奇奇怪怪的需求时，我们就需要对element组件进行修改。
ElementUI修改el-tabs标签页组件样式
dd_lcdw的博客
12-28 1896
【代码】ElementUI修改el-tabs标签页组件样式。
手把手教你搭建属于自己的pyqt5-yolov5目标检测平台(保姆级教程)
05-31
感谢您的提问！以下是手把手教您搭建属于自己的PyQt5-YOLOv5目标检测平台的保姆级教程： 1. 安装Anaconda 首先，您需要下载并安装Anaconda，Anaconda是一个 Python 数据科学平台，包含了许多常用的数据科学包，如Numpy、Pandas等。 2. 创建一个虚拟环境 在安装了Anaconda之后，您需要创建一个虚拟环境，以便隔离开发环境和系统环境。您可以在命令行中输入以下命令来创建一个名为yolov5的虚拟环境： ``` conda create -n yolov5 python=3.8 ``` 其中，“yolov5”是您的虚拟环境的名称，您可以根据自己的需要进行更改。 3. 激活虚拟环境 创建完虚拟环境之后，您需要激活它，以便在环境中进行开发。在命令行中输入以下命令来激活yolov5环境： ``` conda activate yolov5 ``` 4. 安装PyQt5和YOLOv5 在激活了虚拟环境之后，您需要安装PyQt5和YOLOv5。您可以在命令行中输入以下命令来安装它们： ``` pip install PyQt5 pip install yolov5 ``` 5. 创建PyQt5界面 在安装了PyQt5之后，您可以使用Qt Designer创建一个PyQt5界面。Qt Designer是一个可视化的界面设计工具，可以让您轻松地创建PyQt5界面。 6. 使用YOLOv5进行目标检测 在安装了YOLOv5之后，您可以使用它进行目标检测。您可以在Python脚本中使用以下代码： ```python import torch from yolov5.models.experimental import attempt_load from yolov5.utils.torch_utils import select_device device = select_device(&#39;cpu&#39;) model = attempt_load(&#39;yolov5s.pt&#39;, map_location=device) img = torch.zeros((1, 3, 640, 640), device=device) pred = model(img) print(pred) ``` 其中，“yolov5s.pt”是YOLOv5的预训练模型，您可以在YOLOv5的GitHub页面上下载它。 7. 将PyQt5界面与YOLOv5集成 最后，您需要将PyQt5界面与YOLOv5集成起来，以便您可以在界面上使用YOLOv5进行目标检测。您可以在Python脚本中使用以下代码： ```python import sys from PyQt5.QtWidgets import QApplication, QMainWindow from PyQt5.QtGui import QPixmap from yolov5.models.experimental import attempt_load from yolov5.utils.torch_utils import select_device class MainWindow(QMainWindow): def __init__(self): super().__init__() self.setWindowTitle(&#39;PyQt5-YOLOv5目标检测平台&#39;) self.setGeometry(100, 100, 800, 600) self.label = QLabel(self) self.label.setGeometry(50, 50, 640, 480) self.show() if __name__ == &#39;__main__&#39;: app = QApplication(sys.argv) window = MainWindow() sys.exit(app.exec_()) ``` 这段代码创建了一个名为“PyQt5-YOLOv5目标检测平台”的窗口，并在窗口上添加了一个标签。您可以使用这个标签来显示检测到的目标。 以上就是手把手教您搭建属于自己的PyQt5-YOLOv5目标检测平台的保姆级教程。希望对您有所帮助！
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值