摘要:本篇教程介绍了HTML+CSS入门 CSS头像右上角的红点,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
本篇教程介绍了HTML+CSS入门 CSS头像右上角的红点,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
说明:
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>
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号