首页>文档>暖岛B2子主题>B2主题菜单角标美化

B2主题菜单角标美化

很多朋友都问暖岛B2主题菜单角标美化是怎么做的,B2主题自带的吗?

不是,不是这玩意是自己新增的,主要是用来着重展示个别分类。

其实也非常简单,今天暖岛分享出来。

效果图:

代码:

#nuandao .top-menu ul li.depth-0 > a .marker {
    display: inline-block;
    font-size: 12px;
    color: #fff;
    border-radius: 10px;
    padding: 2px 8px 2px 6px;
    transform: scale(0.75) translateY(-15px); 
}
#nuandao .top-menu ul li.depth-0 > a .new {
    background: linear-gradient(to right,#6454ef 0,#3021ec 100%);
}

#nuandao .top-menu ul li.depth-0 > a .hot {
    background: linear-gradient(to right,#fa9b39 0,#e1601d 100%);
}
#nuandao .top-menu ul li.depth-0 > a .recom {
    background: linear-gradient(to right,#fa39f4 0,#991de1 100%);
}

使用方法

首先将上面代码加入到子主题的style.css里面。

然后再菜单那里添加下面代码:

<em class="marker new">NEW</em>
<em class="marker hot">HOT</em>
<em class="marker recom">recom</em>

每段代码是一种角标。

你学废了吗?简单吧。

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索