站长视角
用户至上

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

香港110M(含10M CN2)大带宽独服限量促销,香港E3-8G-1T硬盘-3IP,月付仅799!

之前博客发布过一篇名为“DUX主题为新发布的文章添加 NEW 图标”的文章,最开始的时候使用的是 gif 图片实现的效果,后来我所使用的 DUX 主题增加了置顶文章的功能,显示置顶文章的图标是纯文字的于是我也将“NEW”图标的样式调整为了纯文字的形式。今天更新了下 Erphpdown 插件,在修改插件前端显示样式的时候将“已购买”的显示调整成了按角度倾斜的样式,于是决定将“NEW”图标与“置顶”图标也改成同样的样式,于是便有了这篇文章。先看下 Erphpdown 下载信息框调整后的样式:

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

然后再看下此次调整“NEW”图标与“置顶”图标之后的显示效果,有需要的可以直接拿去使用。

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

修改前

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

修改后

使用方式很简单,将以下代码复制到主题 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) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权, 转载请注明出处。
文章名称:《博客“NEW”、“置顶”图标样式调整为按指定角度倾斜》
文章链接:https://cnidc.co/10949.html
【声明】:国外主机测评仅分享信息,不参与任何交易,也非中介,所有内容仅代表个人观点,均不作直接、间接、法定、约定的保证,读者购买风险自担。一旦您访问国外主机测评,即表示您已经知晓并接受了此声明通告。
【关于安全】:任何 IDC商家都有倒闭和跑路的可能,备份永远是最佳选择,服务器也是机器,不勤备份是对自己极不负责的表现,请保持良好的备份习惯。
标签:
广告位招租,欢迎骚扰
香港110M(含10M CN2)大带宽独服限量促销,香港E3-8G-1T硬盘-3IP,月付仅799!

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专注国外VPS_云服务器_独立服务器_国外主机_外贸主机

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏