CSS文字右上角加小红点作为消息提示

飞流银河

于 2023-12-15 09:13:53 发布

阅读量902

点赞数 6

分类专栏：前端文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_40444253/article/details/135008747

版权

前端专栏收录该内容

54 篇文章 0 订阅

订阅专栏

<span>hello world <span class="dot">&nbsp;</span></span>

<style>
  .dot{
    vertical-align:text-top;display:inline-block;margin-left:4px;background-color:red;border-radius:50%;width:8px;height:8px;
  }
</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

飞流银河

关注关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

一文入门 —— CSS

余识-

01-06

1800

本文主要内容为一文快速入门前端三大基石之一的CSS

talk.css:little这个小红点上所有CSS的聚会

05-09

对话CSS 这个小红点上所有CSS的聚会，姊妹聚会。我们有一个行为准则 :backhand_index_pointing_up: 。 :spiral_calendar: 时间表2020 地位事件日期会场评论 :smiling_face_with_sunglasses: 2020年1月8日（星期三）微软本月的颜色是aliceblue :smiling_face_with_sunglasses: 2020年2月5日（星期三）在线的本月的颜色是paleturquoise :smiling_face_with_sunglasses: 2020年3月4日（星期三）在线的本月的颜色是sienna :smiling_face_with_sunglasses: 2020年4月1日（星期三）在线的本月的颜色是mediumslateblue :smiling_face_with_sunglasses: 2020年5月6日（星期三）在线的本月的颜色是cornflowerblue :smiling_face_with_sunglasses:

参与评论您还未登录，请先登录后发表或查看评论

小程序数字红点提示，1-99+

weixin_45483535的博客

05-11

612

核心思想：给圆点设置最小宽度（min-width），圆角设置与高度相等（border-radius）。 <view class="red_point flex-align-center"> <text>{{messagePointNumber}}</text> </view> .red_point { position: absolute; top: 0; left: 4.167vh; border-radius: 4.286vh; m

css 样式 小红点提醒

qq_42897782的博客

07-13

2867

很多网站，会有未读信息的提醒（如下图：）这里的样式主要用到定位文档链接：https://www.w3school.com.cn/cssref/pr_class_position.asp <div class="posttitle1"> <div class="posttitle1l"> <img src="../../../../../../r/cms/www/xasrcwFront/images/resumeicon.png...

提示小红点样式

飞火龙在天的博客

11-25

8053

小红点样式： .con_bot a .span_position{ position:absolute; border-radius:50%; background-color:#ff2122; color:#fff; font-size:0.3rem; width:0.4rem; height:0.4rem; line-height:0.4rem; top:-0.1rem;

css 红点

liucai1018的博客

07-27

1139

html: <i class="reTip" v-if="shortcut.iconIndex === 2 && isShowRedDot"></i> css:位置不对调一下位置即可 .reTip{ display:block; background:#f00; border-radius:50%; width:0.6rem; height:0.6rem; top:-0.2rem; right:-0.2rem; position:absolu

css:容器右上角出现红色原点信息提示（提示有多少条目）

沧笙踏歌的博客

06-24

2872

第一种 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-...

htm+css字的右上角用于提示的红点怎么实现

weixin_34348111的博客

03-13

3409

2019独角兽企业重金招聘Python工程师标准>>> ...

css实现必填小红点

weiqiang915的博客

12-16

1648

css实现必填小红点 /**必填红点 */ .required:after { content: '*'; color: red; position: absolute; margin-left: 4px; font-weight: bold; line-height: 1.8em; top: 6px;

You_vane的博客

06-18

4263

效果图如下：刚开始的时候再VantUI库里找了大半天没找到，看来不能偷懒了，只能自己做了。

67.小纸条列表组件开发 uni-badge

03-24

- `isDot`: 是否只显示一个小红点，若设为 `true`，则忽略 `value`。 - `hidden`: 是否隐藏徽标。 **4. 自定义组件开发** 开发小纸条列表组件，首先需要理解 Vue 的组件体系，包括模板、数据、方法、生命周期钩子等...

聊天框体实现：对话聊天框

bugstack虫洞栈

09-22

2937

一、前言在上一章节我们实现了对话框体的 UI 部分，可以选中对话好友并可以删除操作。那么接下来我开始实现对话框选中后的内容区域展现，也就是用户之间信息发送和展现。从整体上看这是一个联动的过程，点击左侧的对话框用户，右侧就有相应内容的填充。那么右侧被填充对话列表 ListView 需要与每一个对话用户关联，点击聊天用户的时候，是通过反复切换填充的过程。在没有实现这部分功能之前，你也可以先主动思考下...

HTML怎么通过CSS画一个红点？

shuxianshrng的博客

09-28

786

相信很多朋友都遇到过这样的问题，那就是想在某个位置加个红点，但是不知道怎么实现，今天小编就给大家分享一下。好了，赶紧复制过去测试一下吧！

html图片滚动红点_HTML+CSS入门 CSS头像右上角的红点

weixin_35888497的博客

12-24

388

本篇教程介绍了HTML+CSS入门 CSS头像右上角的红点，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<说明：1、主要用到position定位；2、使用border-radius画圆角；源码：html>test.info{background:rgba(45,171,219,.9);position:relative;/*设置子元素相对定位*/color:w...

css3 红点

nzz_1214

12-02

655

css代码： .red_point{ position: absolute; left: 4px; top: 7px; width: 8px; height: 8px; background-color: red; bo...

CSS自适应实现图标右上角消息数字提示

最新发布

weixin_64729620的博客

11-02

954

* 该元素不能对鼠标事件做出反应 *//* 小球跟随鼠标的速度越小越快 */// 鼠标指针移动到元素上时触发。// 鼠标指针移出元素时触发。// 监听事件：鼠标被移动。

一个按钮一个div实现小红点数字提示

06-02

可以利用CSS中的position属性和伪元素来实现一个按钮一个div的小红点数字提示。具体实现方法如下： 1. 首先需要在HTML中添加一个按钮和一个div，分别用于触发事件和显示小红点数字提示。 ``` <button>按钮</button> <div class="red-dot"></div> ``` 2. 在CSS中给按钮添加position:relative属性，使其成为相对定位元素。 ``` button { position: relative; } ``` 3. 利用伪元素:before或:after来添加一个圆形元素作为小红点。在这里我们使用div元素来实现小红点，因此需要给它设置position:absolute属性，这样才能根据按钮位置定位。 ``` .red-dot { position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background-color: red; display: none; } ``` 这段CSS代码会在div元素的右上角添加一个半径为5px的红色圆形元素，并将其隐藏。 4. 在按钮上添加一个click事件，当点击按钮时，显示小红点数字提示。例如： ``` button.addEventListener("click", function() { document.querySelector(".red-dot").style.display = "block"; }); ``` 这段JavaScript代码会在点击按钮时显示小红点数字提示。 5. 在伪元素中添加一个数字元素，并利用position:absolute属性将其定位在圆形元素中心。例如： ``` .red-dot::before { position: absolute; content: "1"; display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 50%; background-color: red; color: white; font-size: 12px; top: -7.5px; left: -7.5px; } ``` 这段CSS代码会在圆形元素中心添加一个数字“1”。这样就可以利用一个按钮一个div实现小红点数字提示了。