关于CSS的几种字体悬浮的设置方法
关于CSS的几种字体悬浮的设置方法
- 1. 鼠标放上动态的
- 2. 静态的（位置看上悬浮）
- 2.1 参考QQ邮箱
- 2.2 参考知乎
1. 鼠标放上动态的
-
效果如下：
-
代码如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{background-color: cadetblue;height: 150px;width: 300px;}th,td{border: 1px solid;text-align: center;}.test{position: relative;}.test:before{content: "1314"; /*如果不给数据就是清空伪元素内容*/position: absolute; /*设置为绝对定位*/opacity: 0; /*初始透明度为0 ,注意：如果是非0就会一直悬浮，如果是0的话，鼠标放上去悬浮*/background-color: rebeccapurple; /*设置背景颜色*/color: #d5d5e1; /*设置文字颜色*/transform: translateY(-10px); /*向上移动10像素*/transition: all 0.2s ease-in-out; /*设置过渡效果*/padding: 10px; /*设置内边距*/top: -50%; /*将其移出父容器*//* left: 0; 在左侧 */right: -25px; /*在右侧*//* width: 100%; 与父容器同宽 */width: 20px;height: 10px;}.test:hover:before{opacity: 10; /*鼠标悬浮时透明度为1*/transform: translateY(0); /*移动位置为0*/}</style> </head> <body><table cellspacing="0"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th><th>粉丝</th></tr></thead><tbody><tr><td><div>小李</div></td><td>20</td><td>男</td><td>天津粉丝<span class="test"></span></td></tr><tr><td><div>小李</div></td><td>28</td><td>女</td><td>全国粉丝</td></tr><tr><td>小赵</td><td>31</td><td>男</td><td>北京粉丝</td></tr></tbody></table></body> </html> -
参考地址：
css如何设置悬浮文字. -
备注：这个用法有点像掘金上的，可以参考一下掘金上的，如下：
2. 静态的（位置看上悬浮）
- 是的，接下来就是告诉你对于小白前端怎么扒各大网站上的样式代码😂，一起看吧……
2.1 参考QQ邮箱
-
首先，先登录自己的QQ邮箱看效果：
这个点是图片，没有也没关系，借鉴的是实现方式！ -
下面实现的效果有点丑，不过也算是位置悬浮了吧，效果如下：
-
核心代码如下：
```html.my_hover_number {width: 40px;height: 20px;display: inline-block;/* background: url(/zh_CN/htmledition/images/newicon/mail4788ca.png) -112px -192px no-repeat; */background-color: blueviolet;margin-left: 1px;vertical-align: top;position: relative;top: -10px;}``` -
整个网页代码如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{background-color: cadetblue;height: 150px;width: 300px;}th,td{border: 1px solid;text-align: center;}.my_hover_number {width: 40px;height: 20px;display: inline-block;/* background: url(/zh_CN/htmledition/images/newicon/mail4788ca.png) -112px -192px no-repeat; */background-color: blueviolet;margin-left: 1px;vertical-align: top;position: relative;top: -10px;}</style> </head> <body><table cellspacing="0"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th><th>粉丝</th></tr></thead><tbody><tr><td><div>小李</div></td><td>20</td><td>男</td><td>天津粉丝<span class="my_hover_number">350</span></td></tr><tr><td><div>小李</div></td><td>28</td><td>女</td><td>全国粉丝</td></tr><tr><td>小赵</td><td>31</td><td>男</td><td>北京粉丝</td></tr></tbody></table></body> </html>
2.2 参考知乎
-
首先，先登录自己的知识账号，看知乎网站的效果：
-
复制过来代码看自己的效果（只复制
99+的样式）：
-
代码如下：
- 核心样式代码：
.jiu_jiu{box-sizing: border-box;margin: 0px;min-width: 0px;color: rgb(255, 255, 255);background-color: rgb(241, 64, 60);padding-left: 4px;padding-right: 4px;position: relative;/* bottom: 65%; *//* left: 42%; */top: -60%;width: 30%;left: 70%;font-size: 11px;border-radius: 20px;border: 2px solid rgb(255, 255, 255);transform: scale(0.8); } - 整个页面代码：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{background-color: cadetblue;height: 150px;width: 300px;}th,td{border: 1px solid;text-align: center;}.my_hover_number {width: 40px;height: 20px;display: inline-block;/* background: url(/zh_CN/htmledition/images/newicon/mail4788ca.png) -112px -192px no-repeat; */background-color: blueviolet;margin-left: 1px;vertical-align: top;position: relative;top: -10px;}.jiu_jiu{box-sizing: border-box;margin: 0px;min-width: 0px;color: rgb(255, 255, 255);background-color: rgb(241, 64, 60);padding-left: 4px;padding-right: 4px;position: relative;/* bottom: 65%; *//* left: 42%; */top: -60%;width: 30%;left: 70%;font-size: 11px;border-radius: 20px;border: 2px solid rgb(255, 255, 255);transform: scale(0.8);}</style> </head> <body><table cellspacing="0"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th><th>粉丝</th></tr></thead><tbody><tr><td><div>小李</div></td><td>20</td><td>男</td><td>天津粉丝<span class="my_hover_number">350</span></td></tr><tr><td><div>小李</div></td><td>28</td><td>女</td><td>全国粉丝<div class="jiu_jiu">999+</div></td></tr><tr><td>小赵</td><td>31</td><td>男</td><td>北京粉丝</td></tr></tbody></table></body> </html>
- 核心样式代码：
-
好了就这样吧，方式都差不多，多看看别的网站而已！
相关文章：
关于CSS的几种字体悬浮的设置方法
关于CSS的几种字体悬浮的设置方法 1. 鼠标放上动态的2. 静态的（位置看上悬浮）2.1 参考QQ邮箱2.2 参考知乎 1. 鼠标放上动态的 效果如下： 代码如下： <!DOCTYPE html> <html lang"en"> <head><met…...
心脏骤停急救赋能
文章目录 0. 背景知识1. 遇到有人突然倒地怎么办1.1 应急反应系统1.2 高质量CPR1.2.1 胸外按压1.2.2 人工呼吸 1.3 AED除颤1.3.1 AED用法 1.4 高级心肺复苏1.5 入院治疗1.6 康复 0. 背景知识 中国每30s就有人倒地，他们可能是工作压力大的年轻人（工程师群…...
Android 13.0 根据app包名授予app监听系统通知权限
1.概述 在13.0的系统rom产品定制化开发中，在一些产品rom定制化开发中，系统内置的第三方app需要开启系统通知权限，然后可以在app中，监听系统所有通知，来做个通知中心的功能，所以需要授权获取系统通知的权限，然后来顺利的监听系统通知。来做系统通知的功能，接下来来实现…...
校园招聘系统
校园管理系统 公共模块学生端游客端企业联系人端校内管理员端超级管理员端企业端 公共模块 登录 用户可以通过验证码、账号密码进行登录。 个人中心 学生端 学生主要为查看招聘信息以及投递等。 首页 简历详情投递 双选会公司详情 公告通知 学生端主要为这些等等…...
SpringBoot-SpringCache缓存
文章目录 Spring Cache 介绍常用注解 Spring Cache 介绍 Spring Cache 是一个框架，实现了基于注解的缓存功能，只需要简单地加一个注解，就能实现缓存功能。 Spring Cache 提供了一层抽象，底层可以切换不同的缓存实现，…...
服务器带宽忽然暴增，不停的触发告警
问题： 线上环境，服务器的外网下行带宽达到某个阈值，触发告警，查了下服务器的带宽监控信息，是从某个时间开始突然串上去的，然后监控图形非常有规律，都是每秒达到顶峰后，又立马下去了…...
Linux学习笔记之二（环境变量）
Linux learning note 1、环境变量1.1、修好PATH环境变量 1、环境变量 环境变量(environment variables)即系统运行的一些环境参数。主要的环境变量有以下这些： PATH：决定了系统查找可执行文件的目录范围。HOME：指定当前用户的主目录路径。U…...
设计模式——备忘录模式（Memento Pattern）
文章目录 一、备忘录模式定义二、例子2.1 菜鸟例子2.1.1 定义副本类2.1.2 定义对象2.1.3 定义CareTaker 类2.1.3 使用 2.2 JDK —— Date 三、其他设计模式 一、备忘录模式定义 类型： 行为型模式 目的： 保存一个对象的某个状态，以便在适当的…...
C++ 代码实例：多项式除法简单计算工具
文章目录 前言代码仓库代码说明核心片段 结果总结参考资料作者的话 前言 C 代码实例：多项式除法简单计算工具。 代码仓库 yezhening/Programming-examples: 编程实例 (github.com)Programming-examples: 编程实例 (gitee.com) 代码 说明 由于代码篇幅较多&#…...
MySql表自修改报错：You can‘t specify target table ‘student‘ for update in FROM clause
文章目录 一、发现问题二、场景1：在where条件中查询了修改表的数据三、场景2：在set语句中查询了修改表的数据 一、发现问题 在一次准备处理历史数据sql时，出现这么一个问题：You cant specify target table 表名 for update in FR…...
LeetCode 热题100——链表专题
一、俩数相加 2.俩数相加（题目链接） 思路：这题题目首先要看懂，以示例1为例 即 342465807，而产生的新链表为7->0->8. 可以看成简单的从左向右，低位到高位的加法运算，4610，逢…...
植物花粉深度学习图片数据集大合集
最近收集了一波有关于植物花粉的图片数据集，可以用于相关深度学习模型的搭建，废话不多说，上数据集！！！ 1、23种花粉类型805张花粉图像数据集 关于此数据：花粉种类和类型的分类是法医抱粉学、考…...
面试算法48：序列化和反序列化二叉树
题目 请设计一个算法将二叉树序列化成一个字符串，并能将该字符串反序列化出原来二叉树的算法。 分析 先考虑如何将二叉树序列化为一个字符串。需要逐个遍历二叉树的每个节点，每遍历到一个节点就将节点的值序列化到字符串中。以前序遍历的顺序遍历二叉…...
【Python基础】Python编程入门自学笔记，基础大全，一篇到底！
📢：如果你也对机器人、人工智能感兴趣，看来我们志同道合✨ 📢：不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 📢：文章若有幸对你有帮助，可点赞 👍…...
windows自动登陆
新建文本粘贴下面代码，另存为注册表文件 Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Driver Signing] "Policy"hex:00[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Winlogon]"DefaultUserN…...
5G及其后的5G非地面网络：趋势和研究挑战-HARQ部分
NTN组件纳入5G架构第一步 在NTN SI中定义了一组架构选项。就NT部分而言，已确定了两大类：星载（即基于卫星的通信平台）和机载（即HAPS）设备 并行管理HARQ最大进程数 NHARQRTT(NTX−1)2μ NTX：传输…...
【WPF系列】- XAML语法规范
【WPF系列】- XAML语法规范 文章目录 【WPF系列】- XAML语法规范一、概述二、对象元素语法三、特性语法（属性）四、特性值的处理五、枚举特性值六、属性和事件成员名称引用七、属性元素语法八、集合语法九、XAML 内容属性XAML 内容属性值必须是连续的 十、…...
antv/g6之图布局及切换布局
一般图布局 目前为止，g6的一般图布局已经有13种了，如下: Random Layout：随机布局；Force2 Layout：G6 4.7.0 后支持力导向布局，与 gForce 相比性能更强；GForce Layout：G6 4.0 支持的…...
Wordpress plugin removes ‘/category‘
plugin removes /category from your category permalinks Remove Category URL – WordPress plugin | WordPress.org...
【大数据基础平台】星环TDH社区集群版本部署
🦄 个人主页——🎐开着拖拉机回家_大数据运维-CSDN博客 🎐✨🍁 🪁🍁🪁🍁🪁🍁🪁🍁 🪁🍁🪁…...
【Java】汉诺塔
汉诺塔 汉诺塔（Tower of Hanoi）（河内塔）：把圆盘从下面开始按大小顺序重新摆放到另一根柱子上，并且小圆盘上不能放大圆盘，在三根柱子之间一次只能移动一个圆盘。 汉诺塔规则 disk表示圆盘数一次只…...
Java实现对Html文本的处理
1.引入jsoup <dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version>1.8.3</version> </dependency> 2. html示例 示例代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1…...
Vue项目创建与启动（2023超详细的图文教程）
目录 一、下载node.js 二、下载vue-cli与webpack插件 三、项目初始化(项目配置详细信息) 四、项目启动 五、Vue项目工程结构（扩展知识） 一、下载node.js 1.检测是否已经安装过node.js 打开控制台,输入 npm -v如果有会显示对应版本 如果没有会显示…...
EtherCAT主站读取从站EEPROM抓包分析
0 工具准备 1.EtherCAT主站 2.EtherCAT从站（本文使用步进电机驱动器） 3.Wireshark1 抓包分析 1.1 报文总览 本文让主站去读取从站1字地址为0的EEPROM数据内容，主站读取从站EEPROM数据内容使用Wireshark抓包如下： 1.2 EEPROM读…...
Elasticsearch 8.X 如何生成 TB 级的测试数据 ?
1、实战问题 我只想插入大量的测试数据，不是想测试性能，有没有自动办法生成TB级别的测试数据？有工具？还是说有测试数据集之类的东西？——问题来源于 Elasticsearch 中文社区https://elasticsearch.cn/question/13129 2…...
汽车标定技术(四)--问题分析:多周期测量时上位机显示异常
目录 1.问题现象 2.数据流分析 3.代码分析 3.1 AllocDAQ 3.2 AllocOdt 3.3 AllocOdtEntry 4.根因分析及解决方法 4.1 根因分析 4.2 解决方案 1.问题现象 在手撸XCP代码时， DAQ的实现是一大头痛的事情。最初单周期实现还好一点，特别是…...
Flink SQL时间属性和窗口介绍
（1）概述 时间属性（time attributes），其实就是每个表模式结构（schema）的一部分。它可以在创建表的 DDL 里直接定义为一个字段，也可以在 DataStream 转换成表时定义。 一旦定义了时间…...
Tomcat免安装版修改标题名称和进程
tomcat免安装版启动后闪退问题 问题描述 在官网下载的tomcat免安装版的你安装完环境后发现启动闪退，tomcat启动依赖环境是JDK，所以需要tomcat对应版本的JDK支持。 tomcat8官网下载地址：https://tomcat.apache.org/ JDK环境官网下载地址&…...
vim搜索、替换tab
bibtex 中的缩进可能不一致，强迫症犯了想将： 缩进空格改 tab；行首的多个 tab 改为单个 参考 [1]，空格换 tab 可以： :set noexpandtab :%retab!行首的多个 tab 换单个： :%s/^\t\/\t/gReferences Replac…...
一文读懂ARM安全性架构和可信系统构建要素
一文读懂ARM安全性架构和可信系统构建要素 所谓可信系统（trusted system），即能够用于保护密码和加密密钥等资产（assets）免受一系列的可信攻击，防止其被复制、损坏或不可用（unavailable…...