关于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>
      
  • 好了就这样吧,方式都差不多,多看看别的网站而已!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/125802.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

<多线程章节八> 单例模式中的饿汉模式与懒汉模式的讲解,以及懒汉模式中容易引起的Bug

&#x1f490;专栏导读 本篇文章收录于多线程&#xff0c;也欢迎翻阅博主的其他文章&#xff0c;可能也会让你有不一样的收获&#x1f604; &#x1f337;JavaSE &#x1f342;多线程 &#x1f33e;数据结构 文章目录 &#x1f490;专栏导读&#x1f4a1;饿汉模式&#x1f4a1;…

从 Seq2Seq 到 Attention:彻底改变序列建模

探究Attention机制和意力的起源。 简介 在这篇博文[1]中&#xff0c;将讨论注意力机制的起源&#xff0c;然后介绍第一篇将注意力用于神经机器翻译的论文。由于上下文压缩、短期记忆限制和偏差&#xff0c;具有 2 个 RNN 的 Seq2Seq 模型失败了。该模型的 BLEU 分数随着序列长度…

构造函数、析构函数、虚函数、成员函数的详细解释

详细解释 构造函数析构函数虚函数成员函数 构造函数 构造函数&#xff08;Constructor&#xff09; 是一个特殊的成员函数&#xff0c;当一个对象被创建时&#xff0c;它会自动被调用。构造函数通常用于初始化对象的成员变量。 (就是先设定了一些规矩&#xff0c;到用的时候直…

【VPX630】青翼 基于KU115 FPGA+C6678 DSP的6U VPX通用超宽带实时信号处理平台

板卡概述 VPX630是一款基于6U VPX总线架构的高速信号处理平台&#xff0c;该平台采用一片Xilinx的Kintex UltraScale系列FPGA&#xff08;XCKU115&#xff09;作为主处理器&#xff0c;完成复杂的数据采集、回放以及实时信号处理算法。采用一片带有ARM内核的高性能嵌入式处理器…

【深度学习】pytorch——快速入门

笔记为自我总结整理的学习笔记&#xff0c;若有错误欢迎指出哟~ pytorch快速入门 简介张量&#xff08;Tensor&#xff09;操作创建张量向量拷贝张量维度张量加法函数名后面带下划线 _ 的函数索引和切片Tensor和Numpy的数组之间的转换张量&#xff08;tensor&#xff09;与标量…

力扣1502. 判断能否形成等差数列(Java,排序法)

Problem: 1502. 判断能否形成等差数列 文章目录 思路解题方法复杂度Code 思路 根据简单的数学知识易得等差数列公差相等。 解题方法 1.对数列排序 2.遍历数列&#xff0c;判断相邻两数的差是否相等。 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( 1 ) O(1) O(1) Cod…

设计交换机原理图前应先理清的框图

一、系统布局图 需重点考虑“外壳、电源、风扇、主板&#xff08;包含MAC、CPU、PHY&#xff09;、指示灯、管理网口/串口、电口/光口等连接器”在整机中的大致位置&#xff0c;在系统布局图中予以体现。 二、系统框图 &#xff08;1&#xff09;电源整体框图&#xff1b; &…

centos做个登录提醒

1.编辑脚本 sudo vim /usr/local/bin/login-notify.sh例如 login-notify.sh #!/bin/bash# 检查是否有一个原始SSH命令&#xff0c;并执行它 if [[ -n "$SSH_ORIGINAL_COMMAND" ]]; thenecho "SSH_ORIGINAL_COMMAND: $SSH_ORIGINAL_COMMAND" >> /va…

三十九、CANdelaStudio实践-19服务(ReadDTCInformation)

本专栏将由浅入深的展开诊断实际开发与测试的数据库编辑,包含大量实际开发过程中的步骤、使用技巧与少量对Autosar标准的解读。希望能对大家有所帮助,与大家共同成长,早日成为一名车载诊断、通信全栈工程师。 本文介绍CANdelaStudio的19服务(ReadDTCInformation)编辑,欢迎…

基于STM32C8T6的智能蓝牙小车控制设计

**单片机设计介绍&#xff0c;1655基于STM32C8T6的智能蓝牙小车控制设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计五、 程序文档 六、 结论七、 文章目录 一 概要 基于STM32C8T6的智能蓝牙小车控制设计是基于STM32微控制器和蓝牙模块开发的一种小型智能车辆控制系统…

C#WPF工具提示(ToolTip)实例

本文演示C#WPF工具提示(ToolTip)实例 ToolTip ToolTip是当鼠标移到某个控件上后可以弹出提示的控件 属性说明 1、HasDropShadow 决定工具提示是否具有扩散的黑色阴影,使其和背后的窗口区别开来 2、Placement 使用PlacementMode枚举值决定如何放置工具提示。默认值是M…

力扣刷题-队列-滑动窗口最大值

239. 滑动窗口最大值 给定一个数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回滑动窗口中的最大值。 进阶&#xff1a; 在线性时间复杂度内解决此题&#xff1f; …

算法leetcode|86. 分隔链表(rust重拳出击)

文章目录 86. 分隔链表&#xff1a;样例 1&#xff1a;样例 2&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 86. 分隔链表&#xff1a; 给你一个链表的头节点 head 和一个特…

ubuntu 22.04 源码安装 apollo 8.0

对于其他的关于GPU的安装包需求&#xff0c;这里不再列出&#xff0c;因为我之前安装过&#xff0c;偷个懒就不写了&#xff0c;哈哈哈哈1, 安装docker 安装docker命令(这里的安装命令都是在docker官网,还有安装包)&#xff1a; 1&#xff0c; 设置docker的apt仓库 # Add Do…

IDEA 如何运行 SpringBoot 项目

步骤一&#xff1a;配置 Maven 第一步&#xff1a;用 IDEA 打开项目&#xff0c;准备配置 maven 环境 &#xff0c;当然如果本地没有提前配置好 maven&#xff0c;就用 IDEA 默认的配置即可 配置 maven 步骤 情况 1&#xff1a;如果本地没有配置过 maven&#xff0c;可以保持如…

【学习笔记】CF930E Coins Exhibition

感觉像是之前做过的题的加强版&#x1f605; 考虑容斥哪些区间不合法。直接处理比较困难&#xff0c;考虑将所有区间按右端点排序&#xff0c;并将端点离散化&#xff08;将右端点 1 1 1&#xff0c;转化为左闭右开区间&#xff09;&#xff0c;设 d p i , j , k dp_{i,j,k} …

2.1 ppq量化pytorch->onnx

前言 torchvision中加载一个模型&#xff0c;转换为 onnx 格式、导出 quantized graph. code from typing import Iterableimport torch import torchvision from torch.utils.data import DataLoaderfrom ppq import BaseGraph, QuantizationSettingFactory, TargetPlatfor…

代碼隨想錄算法訓練營|第五十五天|1143.最长公共子序列、1035.不相交的线、53. 最大子序和。刷题心得(c++)

讀題 1143.最长公共子序列 自己看到题目的第一想法 看起來跟最長重複子数組很類似&#xff0c;但是要怎麼去推遞推的狀態沒有想法 看完代码随想录之后的想法 看完之後&#xff0c;大概釐清了整體想法&#xff0c;可以想成說&#xff0c;因為我們要考慮的是不連續的子序列&…

Jetpack:025-Jetpack中的多点触控事件

文章目录 1. 概念介绍2. 使用方法2.1 缩放事件2.2 旋转事件2.3 平移事件2.4 综合事件 3. 示例代码4. 内容总结 我们在上一章回中介绍了Jetpack中滚动事件相关的内容&#xff0c;本章回中主要介绍 多点解控事件。闲话休提&#xff0c;让我们一起Talk Android Jetpack吧&#xf…

尚硅谷-kubernetes

目录 一、kubernetes概述1、kubernetes基本介绍**2、kubernetes 功能和架构** 一、kubernetes概述 1、kubernetes基本介绍 kubernetes&#xff0c;简称 K8s&#xff0c;是用 8 代替 8 个字符“ubernete”而成的缩写 kubernetes是一个开源的&#xff0c;用于管理云平台中多个…