关于CSS的几种字体悬浮的设置方法

关于CSS的几种字体悬浮的设置方法

1. 鼠标放上动态的2. 静态的（位置看上悬浮）2.1 参考QQ邮箱2.2 参考知乎

1. 鼠标放上动态的

效果如下：

代码如下：

姓名	年龄	性别	粉丝
小李	20	男	天津粉丝
小李	28	女	全国粉丝
小赵	31	男	北京粉丝

参考地址： 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;

}

```

整个网页代码如下：

姓名	年龄	性别	粉丝
小李	20	男	天津粉丝 350
小李	28	女	全国粉丝
小赵	31	男	北京粉丝

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);

}

整个页面代码：

姓名	年龄	性别	粉丝
小李	20	男	天津粉丝 350
小李	28	女	全国粉丝 999+
小赵	31	男	北京粉丝

好了就这样吧，方式都差不多，多看看别的网站而已！