網(wǎng)頁(yè)中的小徽章越發(fā)多了。下面教大家如何做個(gè)小徽章。這是唯品會(huì)的雪碧圖，作為我們的背景圖片。
header.png
- 做一個(gè)圖片背景
制作一個(gè)購(gòu)物袋的背景圖標(biāo)。
<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中加上一個(gè)小徽標(biāo)
制作一個(gè)小徽章。顏色、背景和大小如下：
<div class="buy-icon"><div class="badge"><div></div>
.badge {
background: #f10180;
color: #fff;
text-align: center;
font-size: 12px;
border-radius: 40%;
}
- 將小徽章向右上角移動(dòng)
這是關(guān)鍵的一步，在.badge中加入margin使小徽章向右上角移動(dòng)。
margin-top:-20%;
margin-left:40%;
三步完成小徽章簡(jiǎn)單吧。
