洛杉矶MC机房 高速低价18元起

博客“NEW”、“置顶”图标样式调整为按指定角度倾斜

提示:如果官网是英文页面,建议使用谷歌浏览器能同步翻译页面。点击下载【谷歌浏览器最新绿色便携版】
注意:部分文章发布时间较长,可能存在未知因素,购买时建议在本站搜索商家名称,先充分了解商家动态。
交流:唯一投稿QQ80059284、唯一投稿邮箱:admin@bkvps.com、网友交流QQ群号640669696。

之前博客发布过一篇名为“DUX主题为新发布的文章添加 NEW 图标”的文章,最开始的时候使用的是 gif 图片实现的效果,后来我所使用的 DUX 主题增加了置顶文章的功能,显示置顶文章的图标是纯文字的于是我也将“NEW”图标的样式调整为了纯文字的形式。今天更新了下 Erphpdown 插件,在修改插件前端显示样式的时候将“已购买”的显示调整成了按角度倾斜的样式,于是决定将“NEW”图标与“置顶”图标也改成同样的样式,于是便有了这篇文章。先看下 Erphpdown 下载信息框调整后的样式:然后再看下此次调整“NEW”图标与“置顶”图标之后的显示效果,有需要的可以直接拿去使用。修改前修改后使用方式很简单,将以下代码复制到主题 main.css 文件中即可:/** 修正摘要列表定位方式 */.excerpt { position: relative;}/** NEW 图标文字版样式 **/.excerpt .new-icon{ position: absolute; right: -45px; top: -20px; display: block; width: 120px; height: 24px; line-height: 24px; background: #4caf50; color: #fff; font-size: 16px; font-weight: 500; text-align: center; transform: rotate(36deg); transform-origin: 0% 0%;}/** 置顶图标文字版样式 **/.sticky-icon { position: absolute; padding: 0; right: -45px; top: -20px; display: block; width: 120px; height: 24px; line-height: 24px;

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:贝壳主机网 » 博客“NEW”、“置顶”图标样式调整为按指定角度倾斜

分享到: 生成海报
香港/美国/国内高速VPS
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活