WP子比主题添加最新通知模块教程

WP子比主题添加最新通知模块教程-西瑾娱乐网- 专注网络资源分享
WP子比主题添加最新通知模块教程
此内容为免费阅读,请登录后查看
0
免费阅读
WP子比主题添加最新通知模块教程

效果图

WP子比主题添加最新通知模块教程

1、添加CSS代码

子比主题设置—>自定义代码—>自定义 CSS 样式,添加以下 CSS 代码:

.zhankr-zx {
  position: relative;
  margin-bottom: 18px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  line-height: 1;
}

.zhankr-zx:before {
  margin-right: 10px;
}

.zhankr-zx:after {
  margin-left: 10px
}

.zhankr-zx:before, .zhankr-zx:after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
  border-radius: 50%;
}

.zhankr-zx span {
  font-family: Futura;
  background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 49px;
  letter-spacing: 5px;
  display: inline-block;
  font-weight: 700;
}

.zhankr-zx .zhankr-zx-n {
  font-size: 20px;
}

.zhankr-zx .zhankr-zx-n strong {
  display: block;
  font-size: 20px;
  background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
  -webkit-background-clip: text;
  color: transparent;
}

.HhcatboxDes {
  position: absolute;
  opacity: 0;
  z-index: 1;
  align-items: center;
  display: flex;
  font-size: 16px;
  height: 180px;
  justify-content: center;
  width: 100%;
  color: #fff;
  font-weight: 600;
  background: #f95491;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  -webkit-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.HhCooltitle {
  margin-top: 10px
  }

2、添加代码

在后台–>外观–>小工具–>自定义HTML,把自定义HTML放到合适的位置,然后把下面代码复制粘贴进去,即可在前台显示。

<div class="zhankr-zx">
<span>NEWS</span>
<div class="zhankr-zx-n">
<strong>最新</strong>
<strong>通知</strong>
</div>
</div>
<div class="zhankr-zx-n">
<center>
<strong>如果您邮箱是QQ邮箱,注册或登录时邮箱收不到验证码</strong><br>
<strong>可能是近期官方邮件发送过多,请查看QQ邮箱-垃圾箱</strong>
</center>
</div>
    温馨提示:本文最后更新于2022-08-07 23:35:38,某些文章具有时效性,若有错误或已失效,请在下方留言或联系西瑾站长

    感谢您的来访,获取更多精彩文章请收藏本站。

    © 版权声明
    THE END
    喜欢就支持一下吧
    点赞5 分享
    评论 抢沙发
    头像
    欢迎您留下宝贵的见解!
    提交
    头像

    昵称

    图形验证码
    取消
    昵称表情代码图片