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快速填充数据 如果把合并的单元格 取消合并，只有第一…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。 地震勘探中，有效波和干扰波是相对的。例如，在反射波…...
ES6从入门到精通：前言
ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了：一行…...
无法与IP建立连接，未能下载VSCode服务器
如题，在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...
MMaDA: Multimodal Large Diffusion Language Models
CODE ： https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA，它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中，从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备（如专用硬件设备），从而消除了直接物理连接的需要。USB over IP的…...
)
Angular微前端架构：Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例，其中使用的是 Module Federation 和 npx-build-plus 实现了主应用（Shell）与子应用（Remote）的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...