前端技巧集：三步制作小徽章


网页中的小徽章越发多了。下面教大家如何做个小徽章。这是唯品会的雪碧图，作为我们的背景图片。

header.png
  1. 做一个图片背景
    制作一个购物袋的背景图标。
<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;
}
  1. 在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%;
}
  1. 将小徽章向右上角移动
    这是关键的一步，在.badge中加入margin使小徽章向右上角移动。
    margin-top:-20%;
    margin-left:40%;

三步完成小徽章简单吧。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容