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

本篇教程介绍了HTML+CSS入门 CSS头像右上角的红点，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

说明：

1、主要用到position定位；

2、使用border-radius画圆角；

源码：

html>

test

.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%;

}

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！

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

html中怎么写小箭头,HTML+CSS入门 CSS用伪类制作小箭头
本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 本文对轮播图左右按钮的处理方法一改往常,不是简单地用btn.pr ...
html的公共样式,HTML+CSS入门 CSS公共样式
本篇教程介绍了HTML+CSS入门 CSS公共样式,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < @charset "utf-8"; *{margin ...
html font-family设置无效,HTML+CSS入门 CSS设置中文字体(font-family:黑体)后样式失效问题如何解决...
本篇教程介绍了HTML+CSS入门 CSS设置中文字体(font-family:"黑体")后样式失效问题如何解决,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. ...
用Python实现在微信头像右上角加上红底白字的数字，类似于微信未读信息数量那种提示效果
本文为原创文本,转载请注明出处~ 本人最近开始学习Python编程.昨天本人用Python写了一个比较有意思的小程序.可以在微信头像右上角加上红底白字的数字,类似于微信未读信息数量那种提示效果.更换处 ...
CSS仿微信头像右上角消息数字提示
今天写个简单的小demo,关于CSS实现头像右上角消息数字提示,样式如下如图所示,在微信和扣扣消息里面比较常见. <!DOCTYPE html> <html><head& ...
浅谈对html css的理解,HTML+CSS入门 CSS选择器、属性和值浅谈
body { font-size: 0.8em; color: navy; } 上面的意思是为body选择器设置font-size字体大小和color字体颜色. 所以基本的,当它作用与HTML页面时, ...
html常用布局和写法,HTML+CSS入门 css常用布局多行多列解析
CSS布局常用的方法:float : none | left | right 取值: none : 默认值.对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边它是怎样工 ...
CSS入门（css 基本教程）
CSS入门 CSS简介 v 概念 Cascading Style Sheets ,层叠样式表 v 功能 v 基本语法 CSS的定义是由三个部分构成:选择符(se ...
胖虎都看得懂的CSS入门
CSS入门 CSS是什么摘自维基百科层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...

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

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

最新文章

热门文章