关闭

Css制作小图标

标签: css置顶最新小图标
189人阅读 评论(0) 收藏 举报
分类:

在日常的前端中,经常使用一些小图标,如置顶
但是对于一个不会平面设计的人来说,这样是一件很费劲的事情,那么可以使用css实现类似的图标
如:

    .tag-red {
        color: #fff;
        display: inline-block;
        font-size: 10px;
        font-weight: 400;
        height: 17px;
        line-height: 17px;
        margin-right: 0;
        padding: 0 3px;
        text-align: center;
        background-color: #d33556;
    }

        .tag-blue {
        color: #fff;
        display: inline-block;
        font-size: 10px;
        font-weight: 300;
        height: 17px;
        line-height: 17px;
        padding: 0 3px;
        text-align: center;
        background-color: #258ee7;
    }
         <a class="tag-red" href="#" target="_blank">置顶</a>
         <a class="tag-blue" href="#" target="_blank">置顶</a>

效果如下:
这里写图片描述

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    最新评论