主机评测网,专注vps、独立服务器等主机评测
最专业的主机评测网站

草根吧VPS_WordPress技巧分享_博客“NEW”、“置顶”图标样式调整为按指定角度倾斜

草根吧VPS_WordPress技巧分享_博客“NEW”、“置顶”图标样式调整为按指定角度倾斜

原版的图标样式太丑了,在修改插件前端显示样式的时候将“NEW”、“置顶”的显示调整成了按角度倾斜的样式;

演示:

草根吧VPS_WordPress技巧分享_博客“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;      background: #ff5e52;      color: #fff;      font-size: 16px;      font-weight: 500;      text-align: center;      transform: rotate(36deg);      transform-origin: 0% 0%;  }  @media (max-width:640px){      .excerpt-sticky header{text-indent:0px;position: unset;}      .sticky-icon {          position: absolute;          padding: 0;          right: -45px;          left: auto;          top: -20px;          display: block;          width: 120px;          height: 24px;          line-height: 24px;          background: #ff5e52;          color: #fff;          font-size: 16px;          font-weight: 500;          text-align: center;          transform: rotate(36deg);          transform-origin: 0% 0%;      }  }  

 

:草根吧VPS_WordPress技巧分享_博客“NEW”、“置顶”图标样式调整为按指定角度倾斜,https://vps.caogenba.com.com/725.html

赞(0) 打赏
未经允许不得转载:主机测评 » 草根吧VPS_WordPress技巧分享_博客“NEW”、“置顶”图标样式调整为按指定角度倾斜

评论 抢沙发

登录

找回密码

注册