wordpress美化-7B2主题添加菜单角标

释放双眼,带上耳机,听听看~!

样式如下:

方法如下:

在你的菜单中添加如下代码:

<small>推荐</small>

在你的style.css底部添加以下代码:

红色

.top-menu-ul small{ display: inline-block; transform: translateY(-12px); font-size: .75rem; letter-spacing: 0.05em; background: linear-gradient(to top, #f308a0 0%, #fb0655 100%); color: #ffffff; border-radius: 1rem; padding: .15rem .275rem; line-height: 1; font-weight: bold; }

黄色

.top-menu-ul small{ display: inline-block; transform: translateY(-12px); font-size: .75rem; letter-spacing: 0.05em; background: linear-gradient(to top, #efd3b0 0%, #f9e1be 100%); color: #ffffff; border-radius: 1rem; padding: .15rem .275rem; line-height: 1; font-weight: bold; }

蓝色

.top-menu-ul small{ display: inline-block; -webkit-transform: translateY(-12px); -ms-transform: translateY(-12px); transform: translateY(-12px); font-size: .75rem; letter-spacing: 0.05em; background: #188ef4; background: -webkit-linear-gradient(legacy-direction(to right), #6454ef 0%, #316ce8 100%); background: -webkit-gradient(linear, left top, right top, from(#6454ef), to(#316ce8)); background: -webkit-linear-gradient(left, #6454ef 0%, #316ce8 100%); background: -o-linear-gradient(left, #6454ef 0%, #3021ec 100%); background: linear-gradient(to right, #6454ef 0%, #3021ec 100%); color: #ffffff; border-radius: 1rem; padding: .15rem .275rem; line-height: 1; font-weight: bold; }

黄色

.top-menu-ul small{ display: inline-block; -webkit-transform: translateY(-12px); -ms-transform: translateY(-12px); transform: translateY(-12px); font-size: .75rem; letter-spacing: 0.05em; background: #f9e1be; background: -webkit-linear-gradient(legacy-direction(to right), #efd3b0 0%, #f9e1be 100%); background: -webkit-gradient(linear, left top, right top, from(#efd3b0), to(#f9e1be)); background: -webkit-linear-gradient(left, #efd3b0 0%, #f9e1be 100%); background: -o-linear-gradient(left, #efd3b0 0%, #f9e1be 100%); background: linear-gradient(to top, #efd3b0 0%, #f9e1be 100%); color: #ffffff; border-radius: 1rem; padding: .15rem .275rem; line-height: 1; font-weight: bold; }

人已赞赏
建站教程

柒比贰7b2主题修改引入彩色阿里图标库

2020-6-8 20:39:43

建站教程

WordPress美化-复制弹出提示框

2020-6-9 20:13:36

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