项目地址
demo

前言

本司突然多了个需求，要在消息按钮右上角加个类似手机应用小圆点消息提示。就下面这货。

正文

第一想法就是定高，靠内容撑宽度。最小宽度和高度一致。

        .tip {min-width: 20px;height: 20px;background: red;box-sizing: border-box;//必须是border-box，自行体会color: white;font-size: 10px;text-align: center;line-height: 20px;padding: 0 5px;border-radius: 10px;display: inline-block;//肯定是inline-block，因为行内元素宽度auto呀}

后记

为什么会记录这个呢，因为我居然还想了下，实在不应该。意味着css居然还不是熟的能随意，自勉！！！

红色小圆点消息提示实现相关推荐

超简单使用html定义一个红色小圆点
超简单使用html定义一个红色小圆点两种方法两种方法 <!DOCTYPE html> <html lang="en"> <head>< ...
微信小程序-消息提示框实例
做Android的时候对toast是很熟悉的.微信小程序开发中toast也是重要的消息提示方式. 提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: ...
如何使用html定义一个红色小圆点
在做工厂设备实时监视的时候,经常会根据设备启停,设置状态为绿色小点和红色小点: <!DOCTYPE html> <html lang="en"><he ...
Android滑动页面底部小圆点,Android ViewPager无限循环实现底部小圆点动态滑动
页面拖动到最后一页再向下滑动回复到第一页,第一页向前滑动回到最后一页同时,底部红色小圆点随着页面的滑动距离比例随时改变位置布局: xmlns:android="http://sch ...
BannerLayoutSimple 支持图片无限轮播的 BannerLayout,支持自定义小圆点位置以及显示位置等等，反正支持的挺多的，源码也有注释
BannerLayoutSimple 项目地址: 7449/BannerLayoutSimple 简介:支持图片无限轮播的 BannerLayout,支持自定义小圆点位置以及显示位置等等,反正支持的挺 ...
Vue项目中实现消息提示/报警/未读消息（铃铛加小圆点闪烁效果）
在项目开发过程中,可能需要实现以下场景:未读消息提示.报警信息.消息通知等,这些功能往往是在页面的右上角设置一个铃铛,在铃铛或者图标的右上角显示消息数并做呼吸灯效果显示下面分享一下这类效果的实现方法 ...
php 小程序活动弹幕,小程序：弹幕效果的消息提示
在小程序,邀请好友加入,或者好友离开,希望有个自右向左飘过去的消息提示,要求就是一个个的在同一行. 参考:https://blog.csdn.net/weixin_43254829/article/d ...
iOS: 教你给UI控件添加Badge(消息提醒小圆点)
PPBadgeView 1.前言最近项目的一个需求是在UIView, UITabBarItem, UIBarButtonItem 这三种类型的控件上添加消息提醒小圆点(Badge),一开始找了一个星 ...
微信小程序实例：开发showToast消息提示接口
相信在学习小程序文档或者已经创建项目的开发员们,都很清楚小程序的wx.showToast接口只提供了两种icon[success和loading]展示形式,那假如我想要的是不要图标只要存粹的文字提醒呢 ...

红色小圆点消息提示实现

前言

正文

后记

红色小圆点消息提示实现相关推荐

最新文章

热门文章