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

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

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

Blogger过去发表过一篇名为“DUX主题为新发表的文章添加新图标”的文章。当时应用了gif照片的实际效果。之后我应用的DUX主题增强了置顶文章的作用,显示信息置顶文章的图标由人物控制。所以我调整了“新建”图标的样式,方便控制人物。今天升级了Erphpdown软件,在改变软件前端开发的显示信息样式时,将“已购买”的显示信息改为根据视角倾斜的那种。因此,我决定将“新建”图标和“顶部”图标改为相同的样式,因此我拥有这篇文章。先来看看Erphpdown下载信息框调整后的风格:

然后看调整“新建”图标和“置顶”图标后显示信息的实际效果,必要时立即应用。

改变之前

修改后

应用方法很ss="superseo">ss="superseo">简单,只需将以下代码复制到主题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;

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zz/743862.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-29
下一篇 2022-04-29

发表评论

登录后才能评论

评论列表(0条)

保存