<html>
<head>
<style>
.number{
width: 100px;
height: 100px;
background-color: red;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.number1{
width: 28px;
height: 28px;
background-color: red;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
margin-top: -100px;
margin-left: 80px;
z-index: 10000000;
position: absolute;
}
.number1 span{
padding-top: 4px;
text-align: center;
vertical-align: bottom;
display: block;
color: #fff;
font-weight: bold;
font-size:14px;
}
</style>
</head>
<body>
<div class="number"></div>
<div style="float:left;margin:15px;">
<image src="./info.png"/>
<div class="number1">
<span>1</span>
</div>
</div>
<div style="float:left;margin:15px;">
<image src="./info.png"/>
<div class="number1">
<span>9</span>
</div>
</div>
<div style="float:left;margin:15px;">
<image src="./info.png"/>
<div class="number1">
<span>20</span>
</div>
</div>
<div style="float:left;margin:15px;">
<image src="./info.png"/>
<div class="number1">
<span>99+</span>
</div>
</div>
</body>
</html>
![]()
![]()
