给B2主题添加菜单角标

本文更新于: 2021年1月21日

在菜单里加<small>推荐</small>

然后在前台通过CSS查到我们的small,用CSS对其定位,在你的style.css底部添加以下代码:

红色

  1. .primary-menu small {
  2. display: inline-block;
  3. transform: translateY(-12px);
  4. font-size: .75rem;
  5. letter-spacing: 0.05em;
  6. background: linear-gradient(to top, #f308a0 0%, #fb0655 100%);
  7. color: #ffffff;
  8. border-radius: 1rem;
  9. padding: .15rem .275rem;
  10. line-height: 1;
  11. font-weight: bold;
  12. }
  13. 一键复制

 

黄色

  1. .primary-menu small {
  2. display: inline-block;
  3. transform: translateY(-12px);
  4. font-size: .75rem;
  5. letter-spacing: 0.05em;
  6. background: linear-gradient(to top, #efd3b0 0%, #f9e1be 100%);
  7. color: #ffffff;
  8. border-radius: 1rem;
  9. padding: .15rem .275rem;
  10. line-height: 1;
  11. font-weight: bold;
  12. }
  13. 一键复制

 

蓝色

 
  1. .primary-menu small {
  2. display: inline-block;
  3. -webkit-transform: translateY(-12px);
  4. -ms-transform: translateY(-12px);
  5. transform: translateY(-12px);
  6. font-size: .75rem;
  7. letter-spacing: 0.05em;
  8. background: #188ef4;
  9. background: -webkit-linear-gradient(legacy-direction(to right), #6454ef 0%, #316ce8 100%);
  10. background: -webkit-gradient(linear, left top, right top, from(#6454ef), to(#316ce8));
  11. background: -webkit-linear-gradient(left, #6454ef 0%, #316ce8 100%);
  12. background: -o-linear-gradient(left, #6454ef 0%, #3021ec 100%);
  13. background: linear-gradient(to right, #6454ef 0%, #3021ec 100%);
  14. color: #ffffff;
  15. border-radius: 1rem;
  16. padding: .15rem .275rem;
  17. line-height: 1;
  18. font-weight: bold;
  19. }
  20. 一键复制

 

黄色

 
  1. .primary-menu small {
  2. display: inline-block;
  3. -webkit-transform: translateY(-12px);
  4. -ms-transform: translateY(-12px);
  5. transform: translateY(-12px);
  6. font-size: .75rem;
  7. letter-spacing: 0.05em;
  8. background: #f9e1be;
  9. background: -webkit-linear-gradient(legacy-direction(to right), #efd3b0 0%, #f9e1be 100%);
  10. background: -webkit-gradient(linear, left top, right top, from(#efd3b0), to(#f9e1be));
  11. background: -webkit-linear-gradient(left, #efd3b0 0%, #f9e1be 100%);
  12. background: -o-linear-gradient(left, #efd3b0 0%, #f9e1be 100%);
  13. background: linear-gradient(to top, #efd3b0 0%, #f9e1be 100%);
  14. color: #ffffff;
  15. border-radius: 1rem;
  16. padding: .15rem .275rem;
  17. line-height: 1;
  18. font-weight: bold;
  19. }
  20. 一键复制

 

 

如果你用的是B2主题,可以直接替换为:(前面#号复制记得去掉)#.top-menu-ul small{

本文链接:Click here to view the current URL

声明:本站为个人非盈利博客,资源均网络收集且免费分享无限制无需登录。资源仅供测试学习,请于24小时内删除,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集。请支持正版!如若侵犯了您的合法权益,可联系我们处理。

给TA打赏
共{{data.count}}人
人已打赏
教程资源

U盘修复“系统找不到指定文件”

2021-1-17 12:05:01

教程

宝塔-登录美化调用微软Bing每日一图

2021-1-21 14:16:25

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索