网页中的小徽章越发多了。下面教大家如何做个小徽章。这是唯品会的雪碧图，作为我们的背景图片。
header.png
- 做一个图片背景
制作一个购物袋的背景图标。
<div class="buy-icon"></div>
.buy-icon {
display: inline-block;
width: 15px;
height: 20px;
background-image: url(../img/header.png);
background-repeat: no-repeat;
background-position: 0 -60px;
}
- 在
buy-icon的div中加上一个小徽标
制作一个小徽章。颜色、背景和大小如下：
<div class="buy-icon"><div class="badge"><div></div>
.badge {
background: #f10180;
color: #fff;
text-align: center;
font-size: 12px;
border-radius: 40%;
}
- 将小徽章向右上角移动
这是关键的一步，在.badge中加入margin使小徽章向右上角移动。
margin-top:-20%;
margin-left:40%;
三步完成小徽章简单吧。
