WordPress文章内添加特色广告代码 原创教程代码

class=”feedback fb-primary”唯爱网络
class=”feedback fb-danger”唯爱网络
class=”feedback fb-warning”唯爱网络
class=”feedback fb-info”唯爱网络
class=”feedback fb-purple” 唯爱网络

主题添加教程

将下面的代码添加到主题的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="http://www.vizyw.com/4213.html">使用教程</a>  </div>
《免费共享资源》本网站内容收集于互联网,不承担任何由于内容的合法性及健康性所引起的争议和法律责任。
免费共享资源网 » WordPress文章内添加特色广告代码 原创教程代码

发表评论

提供最优质的资源集合

立即查看 了解详情