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快速填充数据 如果把合并的单元格 取消合并，只有第一…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
Zustand 状态管理库：极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）
引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...
uniapp 字符包含的相关方法
在uniapp中，如果你想检查一个字符串是否包含另一个子字符串，你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的，但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行： rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案
在大数据时代，海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构，在处理大规模数据抓取任务时展现出强大的能力。然而，随着业务规模的不断扩大和数据抓取需求的日益复杂，传统…...
uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）
UniApp 集成腾讯云 IM 富媒体消息全攻略（地理位置/文件） 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型，核心实现方式： 标准消息类型：直接使用 SDK 内置类型（文件、图片等）自…...
虚幻基础：角色旋转
能帮到你的话，就给个赞吧 😘 文章目录 移动组件使用控制器所需旋转：组件 使用 控制器旋转将旋转朝向运动：组件 使用 移动方向旋转 控制器旋转和移动旋转 缺点移动旋转：必须移动才能旋转，不移动不旋转控制器…...
Docker、Wsl 打包迁移环境
电脑需要开启wsl2 可以使用wsl -v 查看当前的版本 wsl -v WSL 版本： 2.2.4.0 内核版本： 5.15.153.1-2 WSLg 版本： 1.0.61 MSRDC 版本： 1.2.5326 Direct3D 版本： 1.611.1-81528511 DXCore 版本： 10.0.2609…...