添加特色广告代码到WordPress文章(原始教程代码)

2022-08-08 0 389

主题添加教程:

将下面的代码添加到主题的 css 文件,dux 添加到 mian.css

.feedback {   height: 80px;   margin: 0px -20px 0px -20px;   color: #fff;   overflow: hidden;   margin-bottom: 10px;  }    .fb-primary {   background-color: #50b7ff;  }    .fb-danger {   background-color: #ff5f53;  }    .fb-warning {   background-color: #f9c13e;  }    .fb-info {   background-color: #1ac5e2;  }    .fb-purple {   background-color: #b771e8;  }    .feedback span {   font-size: 28px;   float: left;   padding: 0px 0px 0px 20px;   line-height: 80px;  }    .feedback a {   margin: 22px 20px 0px 0px;   float: right;   position: relative;   height: 36px;   line-height: 36px;   border: 1px solid #fff;   display: inline-block;   font-size: 16px;   padding: 0 26px;   color: #fff;   text-decoration: none;  }    .feedback a:hover {   background-color: #fff;   color: #000000;   text-decoration: none  }    @media (max-width: 640px) {   .feedback span {    font-size: 12px;    float: left;    padding: 0px 0px 0px 20px;    line-height: 50px;   }     .feedback a {    margin: 12px 20px 0px 0px;    float: right;    position: relative;    height: 26px;    line-height: 26px;    border: 1px solid #fff;    display: inline-block;    font-size: 12px;    padding: 0 18px;   }     .feedback {    height: 50px;   }  }

 

前台调用样式(参考上方 css 演示):

<div class="feedback fb-danger">  <span>Vieu 主题 v2 系列 专注于工体美学</span>  <a href="链接地址" rel="external nofollow" >使用教程</a>  </div>

 

大功告成!

本文章已结束,如转载请注明:汇站网 » 添加特色广告代码到 WordPress 文章(原始教程代码)

收藏 (0)

微信支付 微信扫一扫

支付宝支付 支付宝扫一扫

打赏二维码
点赞 (0)

站长资源下载中心-找源码上汇站

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

联系官方客服

为您解决烦忧 - 24小时在线 专业服务