html+css+js实现Badge 标记
实现效果：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Badge 标记</title><link rel="stylesheet" href="./font_4689118_hfv5befzhmw/iconfont.css"><style>*{margin: 0;padding: 0;box-sizing: border-box;}ul{list-style: none;}.source{margin: 50px auto;width: 870px;height: 80px;padding: 24px;border: 1px solid #ecf5ff;}.content{display: flex;}.content .badge{margin-right: 40px;position: relative;}.badge button{cursor: pointer;width: 55px;height: 30px;color: #606266;border: 1px solid #c0c4cc;background-color: #fff;border-radius: 2px;}button:hover{border: 1px solid rgba(64, 158, 255, 0.1);background-color:rgba(64, 158, 255, 0.1);color:#409eff ;}.badge span{position: absolute;left: 45px;top: -10px;display: inline-block;width: 20px;height: 20px;line-height: 20px;border-radius: 50%;font-size: 12px;color: #fff;text-align: center;background-color: #f56c6c;}.badge:nth-child(1) span{width: 35px;border-radius: 10px;}.badge:nth-child(3) span{background-color: #409eff;}.badge:nth-child(4) span{background-color: #e6a23c;}.dropdown{position: relative;}.dropdown .header{cursor: pointer;height: 30px;line-height: 30px;font-size: 14px;color:#409eff ;}.footer{position: absolute;right: 0;padding: 12px 0;width: 100px;border: 1px solid #c0c4cc;border-radius: 3px;color: #606266;transition: all 0.3s ease;transform-origin: top;}.footer li{height: 38px;line-height: 38px;text-align: center;}.footer li:hover{cursor: pointer;background-color:rgba(64, 158, 255, 0.1);color:#409eff ;}.footer li span{display: inline-block;width: 18px;height: 18px;line-height: 18px;border-radius: 50%;font-size: 12px;color: #fff;text-align: center;background-color: #f56c6c;margin-left: 5px;}.footer li:nth-child(1) span{width:25px;border-radius: 9px;}.footer.hide{transform: scaleY(0); /* Hide the footer */}</style>
</head>
<body><div class="source"><div class="content"><div class="badge"><button>评论</button><span>12</span></div><div class="badge"><button>回复</button><span>3</span></div><div class="badge"><button>评论</button><span>1</span></div><div class="badge"><button>回复</button><span>2</span></div><div class="dropdown"><div class="header"><span>点我查看</span><span class="iconfont icon-jiantou"></span></div><ul class="footer hide"><li>评论<span>12</span></li><li>回复<span>3</span></li></ul></div></div></div><script>document.querySelector('.dropdown .header').addEventListener('click',function(){const footer = this.nextElementSibling;footer.classList.toggle('hide')})</script>
</body>
</html>相关文章：
html+css+js实现Badge 标记
实现效果： 代码实现： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Badge…...
纯css 轮播图片，鼠标移入暂停 移除继续
核心 滚动： animation: 动画名称 20s linear infinite normal;停止： animation: 动画名称 20s linear infinite paused; 完整例子： html: <div class"carousel-wrapper"><div class"carousel"><div cl…...
iOS GCD的基本使用
一:什么是GCD GCD的全程是:Grand Central Dispatch, 直白的用汉语翻译就是:厉害的中枢调度器. GCD 是iOS 的多线程技术的实现方案,但是它并不是多线程技术,它是“并发解决技术”,是苹果公司研发的,会自动管理线程(这一段定义有点拗口,简单了解就行) GCD会自动管理线程的生命…...
如何设计开发RTSP直播播放器？
技术背景 我们在对接RTSP直播播放器相关技术诉求的时候，好多开发者，除了选用成熟的RTSP播放器外，还想知其然知其所以然，对RTSP播放器的整体开发有个基础的了解，方便方案之作和技术延伸。本文抛砖引玉，做个…...
Java基础系列-一文搞懂自定义排序
java自定义排序 自定义排序的理解： 我们首先看需求：一个二维数组 [[1,3],[8,10],[15,18],[2,6]] 我们的需求是根据集合（二维数组取出来的数据） 左边小的左边这种方式排序 例如1<8 排序方式就是[1,3],[8,10] 此时我们就需…...
扫普通链接二维码打开小程序
1. 2.新增规则（注意下载文件到跟目录下，需要建个文件夹放下载的校验文件） 3.发布 ps：发布后，只能访问正式版本。体验版本如果加了 测试链接http://xxx/xsc/10 那么http://xxx/xsc/aa.....应该都能访问 例如aa101 aa…...
计算机储存与分区
Disk partitioning 盘分区是在辅助储存上创建一个或多个区域，以便可以单独管理每个区域。而这些区域称为分区（partition）。这通常是在为新盘选择分区方案后，需要做的事。 MBR and GPT 分区方案（分区表）有…...
OpenCV之换脸技术：一场面部识别的奇妙之旅
在这个数字化与智能化并进的时代，图像处理技术日益成为连接现实与虚拟世界的桥梁。其中，换脸技术作为一项颇受欢迎且富有挑战性的应用，不仅让人惊叹于技术的魔力，更在娱乐、影视制作等领域展现了无限可能。今天，我们就…...
Linux学习笔记9 文件系统的基础
一、查看文件组织结构 Linux中一切都是文件。 Linux和Win的文件系统不是一个结构，Linux存在的根目录是所有目录的起点。 所有的存储空间和设备共享一个根目录，不同的磁盘块和分区挂载在其下，成为某个子目录的子目录，甚至设备也挂…...
Android OpenGL粒子特效
在本篇，我们将开启一个新的项目，探索粒子的世界。粒子是一种基本的图形元素，它们通常被表示为一组点。通过巧妙地组合一些基础的物理效果，我们能够创造出许多令人惊叹的视觉效果。想象一下，我们可以模拟一个水滴从喷泉…...
5 -《本地部署开源大模型》在Ubuntu 22.04系统下ChatGLM3-6B高效微调实战
在Ubuntu 22.04系统下ChatGLM3-6B高效微调实战 无论是在单机单卡（一台机器上只有一块GPU）还是单机多卡（一台机器上有多块GPU）的硬件配置上启动ChatGLM3-6B模型，其前置环境配置和项目文件是相同的。如果大家对配置过程还…...
dpkg:错误:另外一个进程已经为dpkg前端锁加锁
一、 问题描述 在新装ubuntu系统时，我们常常会遇见dpkg的错误，dpkg:错误:另外一个进程已经为dpkg前端锁加锁，如下图。 二、问题解决 方法一 先执行sudo rm /var/lib/dpkg/lock-frontend然后再继续安装软件包，如果出现问题dpkg:…...
基于SSM服装定制系统的设计
管理员账户功能包括：系统首页，个人中心，用户管理，服装类型管理，服装信息管理，服装定制管理，留言反馈，系统管理 前台账号功能包括：系统首页，个人中心…...
RK3588开发笔记-usb3.0 xhci-hcd控制器挂死问题解决
目录 前言 一、问题现象 二、问题分析 三、问题排查 总结 前言 在使用 RK3588 芯片进行开发的过程中，我遇到了 USB 3.0 xHCI-HCD 控制器外接5G通讯模块偶尔挂死的问题。这个问题导致 USB 设备失去响应，且不能恢复，需要重启整个系统才能恢复使用，针对该问题进行大量测试以…...
深入解析TCP/IP协议：网络通信的基石
1. 引言 TCP/IP 协议是现代计算机网络的核心，它为互联网上的设备提供了通信的基础。在网络通信中，TCP/IP 协议栈是无处不在的，无论是个人设备的浏览器请求，还是大型分布式系统的内部通信，都依赖于它的稳定、高效与可靠…...
基于微信小程序的汽车预约维修系统(lw+演示+源码+运行）
基于微信小程序的汽车预约维修系统 摘要 随着信息技术在管理上越来越深入而广泛的应用，管理信息系统的实施在技术上已逐步成熟。本文介绍了基于微信小程序的汽车预约维修系统的开发全过程。通过分析基于微信小程序的汽车预约维修系统管理的不足，创建了…...
wifi、热点密码破解 - python
乐子脚本，有点小慢，试过多线程，系统 wifi 连接太慢了，需要时间确认，多线程的话系统根本反应不过来。 也就可以试试破解别人的热点，一般都是 123456 这样的傻鸟口令 # coding:utf-8 import pywifi from pyw…...
bean的实例化2024年10月17日
跟不上为基础 1.你的java学习路线 2. 3.课程 注解的装配 contoller调用service用的是注解装配...
告别ELK，APO提供基于ClickHouse开箱即用的高效日志方案——APO 0.6.0发布
ELK一直是日志领域的主流产品，但是ElasticSearch的成本很高，查询效果随着数据量的增加越来越慢。业界已经有很多公司，比如滴滴、B站、Uber、Cloudflare都已经使用ClickHose作为ElasticSearch的替代品，都取得了不错的效果ÿ…...
Excel使用技巧：定位Ctrl+G +公式+原位填充 Ctrl+Enter快速填充数据（处理合并单元格）
Excel的正确用法： Excel是个数据库，不要随意合并单元格。 数据输入的时候一定要按照行列输入，中间不要留空，不然就没有关联。 定位CtrlG 公式原位填充 CtrlEnter快速填充数据 如果把合并的单元格 取消合并，只有第一…...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...
synchronized 学习
学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...
JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案
JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停 1. 安全点（Safepoint）阻塞 现象：JVM暂停但无GC日志，日志显示No GCs detected。原因：JVM等待所有线程进入安全点（如…...
python执行测试用例，allure报乱码且未成功生成报告
allure执行测试用例时显示乱码：‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
短视频矩阵系统文案创作功能开发实践，定制化开发
在短视频行业迅猛发展的当下，企业和个人创作者为了扩大影响力、提升传播效果，纷纷采用短视频矩阵运营策略，同时管理多个平台、多个账号的内容发布。然而，频繁的文案创作需求让运营者疲于应对，如何高效产出高质量文案成…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述：海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而，目前该领域仍面临一个挑战，即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...