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

说明：

1、主要用到position定位；

2、使用border-radius画圆角；

源码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="gbk" />
  5.     <title>test</title>
  6.     <style>
  7.         .info {
  8.           background: rgba(45,171,219,.9);
  9.           position:relative;/*设置子元素相对定位*/
  10.           color: white;
  11.           text-align: center;
  12.           width:40px;
  13.           height:40px;
  14.           -webkit-border-radius: 50%;
  15.           -moz-border-radius: 50%;
  16.           border-radius:50%;
  17.           display:inline-block;
  18.         }
  19.         .info:hover{
  20.           cursor: pointer;
  21.           background: rgba(45,171,219,.6);
  22.         }     
  23.  
  24.         .info-tip{
  25.             background:rgba(250,60,0,1);
  26.             position:absolute;/*根据父元素绝对定位*/
  27.             width:10px;
  28.             height:10px;
  29.             top:0;/*在父元素的内部的顶部*/
  30.             right:0;/*在父元素的内部的右边*/
  31.             -webkit-border-radius: 50%;
  32.             -moz-border-radius: 50%;
  33.             border-radius:50%;
  34.         }
  35.     </style>
  36. </head>
  37. <body >
  38.  
  39.     <div class="info">
  40.         <span class="info-tip"></span>
  41.     </div>
  42.     <div class="info">
  43.         <span class="info-tip"></span>
  44.     </div>
  45.     <div class="info">
  46.         <span class="info-tip"></span>
  47.     </div>
  48. </body>
  49. </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. 忘记dba用户密码，利用SQLPlus重置dba密码

    打开SQL Plus 输入用户名: sys as sysdba 输入口令:可直接回车 连接到: Oracle Database 11g Enterprise Edition Release 11.2. ...

  2. PostgreSQL执行机制的初步学习

    作为开源数据库的新手,近日有兴对比了Pg和MySQL的查询计划. 通过Pg源码目录下的src\backend\executor\README文件,加上一些简单调试,就能对Pg的执行机制产生一个初步印象 ...

  3. 2017huas_ACM第三天

    暑假集训第三天. 就在刚才AC了第十题,本周做题拿到了满分. 软件工程专业没有学习C++语言,这在做题过程中给了我不少的麻烦.遇到什么不懂的,不确认的,都要上网查阅或者开了新项目自己尝试一下.耗费了不 ...

  4. Bash Template

    #/bin/bash #set -x set -e usage() { cat <<EOF Usage: `basename $` [OPTIONS] <non-option arg ...

  5. Day3 CSS 引入及基本选择器

    一 .CSS 层叠样式表,为了使网页元素的样式更加丰富,内容与样式拆分开来.HTML负责结构与内容,表现形式交给CSS. CSS注释/**/ 来注释 二.CSS基本语法与引用 CSS的语法结构 选择器 ...

  6. spring中路径的注入

    @RequestMapping("${mgt}/file") //请求的路径的统一添加,需要在mvc层配置<context:property-placeholder loca ...

  7. 【转】自动识别是手机端还是pc端只用一行代码就搞定

    <script type="text/javascript"> var mobileAgent = new Array("iphone", &quo ...

  8. Android网站

    http://blog.csdn.net/airsaid/article/details/52902299 android调用传感器的代码 http://blog.csdn.net/huangbiao ...

  9. Duplicate fragment name ERROR Jetty Maven Plugin

    http://stackoverflow.com/questions/5802096/duplicate-fragment-name-error-jetty-maven-plugin 4down vo ...

  10. flask中模板日期格式控制和jinja2中模板格式控制

    1.flask的模块语言采用的是jinja2,首先说一下jinja2中的模板格式控制的使用,即模板自定义filters的使用. python的脚本如下(采用的是格式显示日期): 1 from jinj ...