CSS头像右上角的讨厌红点

最新推荐文章于 2021-07-13 11:28:41 发布
最新推荐文章于 2021-07-13 11:28:41 发布
阅读量304 收藏
点赞数
原文链接：http://www.cnblogs.com/xmqa/p/8674997.html
版权

就是这个讨厌的红点，如图：

说明：

1、主要用到position定位；

2、使用border-radius画圆角；

源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk" />
    <title>test</title>
    <style>
        .info {
          background: rgba(45,171,219,.9);
          position:relative;/*设置子元素相对定位*/
          color: white;
          text-align: center;
          width:40px;
          height:40px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius:50%;
          display:inline-block;
        }
        .info:hover{
          cursor: pointer;
          background: rgba(45,171,219,.6);
        }     
        
        .info-tip{
            background:rgba(250,60,0,1);
            position:absolute;/*根据父元素绝对定位*/
            width:10px;
            height:10px;
            top:0;/*在父元素的内部的顶部*/
            right:0;/*在父元素的内部的右边*/
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius:50%;
        }
    </style>
</head>
<body >
    
    <div class="info">
        <span class="info-tip"></span>
    </div>
    <div class="info">
        <span class="info-tip"></span>
    </div>
    <div class="info">
        <span class="info-tip"></span>
    </div>
</body>
</html>

 

转载于:https://www.cnblogs.com/xmqa/p/8674997.html

weixin_30826761
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片右上角小红点
b1336332013的博客
07-12 1562
关于在UIimageView和UIButton右上方添加一个小红点好用的方法 在网上找了很多的方法，积累了一些今后可能用的一些封装好的功能，在这里记录一下，第一次写，感觉很好用，很多快捷编辑的方法，话不多说，上代码。 `UIButton+ZFBadge.h` #import <UIKit/UIKit.h> @interface UIButton (ZFBadge) //-- 角标...
提示小红点样式
飞火龙在天的博客
11-25 8035
小红点样式： .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;
html图片滚动红点_HTML+CSS入门 CSS头像右上角的红点
weixin_35888497的博客
12-24 382
本篇教程介绍了HTML+CSS入门 CSS头像右上角的红点，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<说明：1、主要用到position定位；2、使用border-radius画圆角；源码：html>test.info{background:rgba(45,171,219,.9);position:relative;/*设置子元素相对定位*/color:w...
css:容器右上角出现红色原点信息提示（提示有多少条目）
沧笙踏歌的博客
06-24 2857
第一种 <!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 3398
2019独角兽企业重金招聘Python工程师标准>>> ...
html图片右上角代码,html+css实现图片右上角加删除叉、图片删除按钮
weixin_33966205的博客
06-04 1960
html+css实现图片右上角加删除叉、图片删除按钮发布人：管理员 发布时间：2020-12-26 08:54:33 返 回这篇文章主要介绍了html+css 实现图片右上角加删除叉、图片删除按钮,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下为了纪录下，以后可能用到，有需要的道友也可以用用。不BB，上效果图先...
CSS仿微信头像右上角消息数字提示
前端视听
03-20 1260
今天写个简单的小demo，关于CSS实现头像右上角消息数字提示，样式如下如图所示，在微信和扣扣消息里面比较常见。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &lt...
css实现文本右下角展示查看更多
weixin_44167314的博客
04-01 4337
css实现文本右下角展示查看更多 效果图： 实现原理： 通过before/after伪类实现，第一行展示before的内容，第二行展示after，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> ...
CSS td 右下角 左上角显示
Youth means limitless possibilities.
01-06 2576
<html> <head> <title>table td左对齐 右对齐</title> <style type="text/css"> .main-tb{border-spacing: 0;border-collapse: collapse;} .main-tb td{text-align:center;vertical-align:...
css 上下左右居中（9种）
热门推荐
忘川
08-23 3万+
Technique Browser Support Responsive Overflow resize:both Variable Height Major Caveats Absolute Centering Modern &amp; IE8+ Yes Scroll, can overflow container Yes Y...
css 样式 小红点提醒
qq_42897782的博客
07-13 2833
很多网站，会有未读信息的提醒（如下图：） 这里的样式主要用到定位 文档链接：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...
css3之未读消息小红点
萧逸才的博客
04-09 1万+
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .red-point{ position: relative; } .red-p
在头像（图片）右上角加上红色的数字
lowB程序员
08-28 2627
注意：本文需要安装PIL库，由于本人的计算机是Windows7 64位的系统，需要下载一个64位的PIL库，官网上找了好久也没找到64位的，我们可以从其他的网站上获取，链接地址为http://www.qttc.net/static/file/PIL-fork-1.1.7.win-amd64-py2.7.exe
CSS3 实现未读消息小红点
Wonder233的学习博客
06-07 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;style&gt; .red-point{
使用CSS给图片加上角标记
南京小龙虾的博客
04-25 2941
实现后的效果，图片左上角有了标记信息 主要是通过定位和伪类实现 左上角代码 <html> <div class="wrap"> <img width="200" height="200" src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></img> <!-- 标记信息 --> <p class="mark"> .
在div的右上角显示红点提示（开发小记）
Master_Tang的博客
04-28 2061
CSS样式： .sss { width: 15px; height: 15px; color: #fff; float: right; margin-right: -3px; margin-top: -3px; background-color: #f00; border-radius: 50%; } html样式： <div class="centerall21012" @click.once="toJudPro" ali
ListView 中的item随意拖动.zip
09-12
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
Todo应用-基于MySQL和Hibernate实现.zip
最新发布
09-12
这是一个基于Spring Boot、Hibernate、Rest Controller、MySQL和Maven技术的待办事项（Todo）项目。该项目是一个使用Spring Boot的简单待办事项列表应用程序，采用Spring JPA和MySQL进行数据存储，使用Spring MVC进行渲染。项目结构清晰，包含配置MySQL数据库、构建和运行样本等步骤。开发者可以通过修改配置文件来适应自己的MySQL实例，并通过本地服务器运行应用。该项目为待办事项管理提供了一个基本的Web解决方案。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
开家可乐店bcm4文件
09-12
此文件请下载源码编辑器后再使用，否则无法打开，请尽量不要更改源代码，因为此文件更改代码后可能功能不同，版本号：v2.1
css切除右上角和右下角
07-27
要切除一个元素的右上角和右下角，你可以使用 CSS 的 `border-radius` 属性来控制元素的圆角。通过设置合适的值，你可以实现只有左上角和左下角有圆角的效果。下面是一个示例代码： ```css .element { border-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值