精美图片加文字广告代码分享 - 5i资源网-专注于更新最优的资源-QQ技术教程-网赚项目

精美图片加文字广告代码分享

标签:

美化代码

欢迎浏览5i云资源网www.5iyun.cn

这是一个广告代码

适用于各种网页广告,电脑手机均显示。

利于各位站长网站变现

代码样式十分美观,提高网站页面美观程度

将下方代码插入至你想插入的地方即可。

Q号,跳转链接等自行修改成自己的即可!

<!--图片广告区域开始-->
<div style="background-color:#fff;box-shadow:0px 0px 10px #dedede;padding:5px;margin-top:5px;margin-bottom:5px;">
<a class="adplan" data-id="15" style="display:block;width:100%;margin-bottom:10px;" rel="nofollow" target="_blank" href="http://www.5iyun.cn" title="广告联系q:2911396166|过期时间:永久"> <img src="http://www.xyuzy.com/gge/gg.png" style="max-height:70px;width:100%;border-radius:4px;" width="644" height="70" title="" align="" alt="" /></a> <!--图片广告区域结束-->
<!--顶部双排广告第二行-->
<style>
#nr{
font-size:20px;
margin: 0;
background: -webkit-linear-gradient(left,
#ffffff,
#ff0000 6.25%,
#ff7d00 12.5%,
#ffff00 18.75%,
#00ff00 25%,
#00ffff 31.25%,
#0000ff 37.5%,
#ff00ff 43.75%,
#ffff00 50%,
#ff0000 56.25%,
#ff7d00 62.5%,
#ffff00 68.75%,
#00ff00 75%,
#00ffff 81.25%,
#0000ff 87.5%,
#ff00ff 93.75%,
#ffff00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
animation: masked-animation 2s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100%, 0;
}
}
</style>
<div style="background-color:#333;border-radius:25px;box-shadow:0px 0px 5px #f200ff;padding:5px;margin-top:10px;margin-bottom:0px;">
<marquee>
<b id="nr">公告:欢迎来到5i资源网!站长QQ:2911396166 </b> </marquee>
</div>
<!--顶部双排广告第二行-->
<style>
.txtguanggao{width: 100%;overflow: hidden;display: block;box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}.txtguanggao a{width: 24.5%;float: left;border-radius: 2px;line-height: 35.35px;height: 35.35px;text-align: center;font-size: 14px;color: #fff;display: inline-block;background-color: rgb(255, 153, 159);margin: 2.5px;transition-duration: .3s;}.txtguanggao a:nth-child(1) {background-color: #dc3545;}.txtguanggao a:nth-child(2) {background-color: #007bff;}.txtguanggao a:nth-child(3) {background-color: #28a745;}.txtguanggao a:nth-child(4) {background-color: #ffc107;}.txtguanggao a:nth-child(5) {background-color: #28a745;}.txtguanggao a:nth-child(6) {background-color: #ffc107;}.txtguanggao a:nth-child(7) {background-color: #dc3545;}.txtguanggao a:nth-child(8){background-color: #007bff;}.txtguanggao a:hover{background:#FF2805;color:#FFF}@media screen and (max-width: 1000px) {.txtguanggao a{width: 47.96%;float: left;border-radius: 2px;line-height: 35.35px;height: 35.35px;text-align: center;font-size: 14px;color: #fff;display: inline-block;background-color: rgb(255, 153, 159);margin: 2.5px;transition-duration: .3s;}}
</style>
<div class="txtguanggao">
<a href="" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
<a href="" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
<a href="" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
<a href="" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
<a href="" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
<a href="" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
<a href="" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
<a href="" target="_blank" rel="nofollow" class="dh">文字广告火爆招租</a>
</div>
</div>
<!--文字广告结束-->


【广告位】我是一个文字广告位.戳我了解
分享到:
打赏
看完了?觉得好的话就点个赞吧~不用登陆也能点哦~您的点赞就是对创作者的最大支持


看完有想说的?可以在下方免登录评论哦~

未经允许不得转载:

作者: 5i云, 转载或复制请以 超链接形式 并注明出处 5i资源网
原文地址: 《精美图片加文字广告代码分享》 发布于2020-12-13

评论

  1. #1
    a 5i云 游客 Lv.2

    不错的代码,谢谢站长,拿走了!

    • 5i云 站长已认证

      回复了a   5i云:不用

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

精美图片加文字广告代码分享

长按图片转发给朋友

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

支付宝扫一扫打赏

微信扫一扫打赏