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

说明：

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>

CSS头像右上角的讨厌红点的更多相关文章

  1. python小项目之头像右上角加数字

    pillow介绍 一.Image类的属性:1.Format   2.Mode   3.Size    4.Palette    5.Info 二.类的函数:1.New   2.Open   3.Ble ...

  2. CSS卡片右上角标记样式设计

    template <div class="each-one-in-list"> <div class="show-icon">进行中&l ...

  3. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  4. CSS颜色代码

    颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF).从 0 到 25 ...

  5. CSS颜色代码 颜色值 颜色名字大全(转载)

    CSS颜色代码 颜色值 颜色名字大全 转载处http://flyjj.com/css-colour-code.html 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) ...

  6. CSS中的颜色问题

    css颜色: CSS 颜色 颜色是通过对红.绿和蓝光的组合来显示的 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十 ...

  7. CSS颜色代码 颜色值 颜色名字大全

    颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF).从 0 到 25 ...

  8. css单位分析、颜色设置与调色板

    CSS单位分析 px:单位代表像素,1px代表一个像素点. %:设置子元素为父容器的占比. em:代表该元素中一个字体所占字符,常用在文字首行缩进.其具有继承性. rem:始终代表html中的字符所在 ...

  9. Django 博客项目02 Form验证+ 上传头像(预览)+Ajax用户注册

    头像预览 $("#avatar_file").change(function(){ // 获取上传的文件对象 var file=$(this)[0].files[0]; // 读取 ...

随机推荐

  1. struts2 源码地址

    http://archive.apache.org/dist/struts/

  2. Xaml中的转义字符

    字符 转义字符 备注 & (ampersand) & 这个没什么特别的,几乎所有的地方都需要使用转义字符 > (greater-than character) > 在属性( ...

  3. Farseer.net轻量级开源框架 中级篇：BasePage、BaseController、BaseHandler、BaseMasterPage、BaseControls基类使用

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 中级篇: UrlRewriter 地址重写 下一篇:Farseer.net轻量级开源框架 中 ...

  4. 基于ANGULAR.JS的下一代WEB应用开发-01-yeoman

    Angularjs 个人认为这是一款很好的框架!它将我们从AJAX应用的开发中解救了出来!嗯....废话就说道这里下面我们开始把! 首先我们必须了解一些核心的概念: 客户端模版 MVC 数据绑定 依赖 ...

  5. iTOP-4412开发板全新升级支持4G全网通模块

    开发板支持4G,GPS,CAN,485,WIFI蓝牙,重力加速度计,陀螺仪等模块. 核心板参数 尺寸:6cm*7cm 高度:连同连接器在内0.26cm CPU:Exynos4412,四核Cortex- ...

  6. Functor、Applicative 和 Monad x

    首先,我们来看一下 Functor typeclass 的定义: 1 2 class Functor f where fmap :: (a -> b) -> f a -> f b F ...

  7. 安卓 Android 简单数据库（增删改查）

    <Button android:id="@+id/delete_btn" android:layout_width="wrap_content" andr ...

  8. python文件的读写的模式

    <1>打开文件 在python,使用open函数,可以打开一个已经存在的文件,或者创建一个新文件 open(文件名,访问模式) 示例如下: f = open('test.txt', 'w' ...

  9. oracle将一个字段拆分成多个值 (regexp_substr函数)

    select regexp_substr(p.attributename, '[^,]+',1,level) c1from tablename p connect by level <= len ...

  10. Centos6.5下 执行“ll”提示“-bash: ll: command not found”

    ll 是 ls -l的别名,之所所以 ll出现错误是因为没有定义别名. 如果要实现ll 命令,可以做如下操作: 编辑 ~./bashrc 添加 ls -l 的别名为 ll即可 [root@Centos ...