今天发现放在文章内的京东的推广广告不显示了

然后又去京东联盟去重新获取了链接,也不显示 。

只能自己获取链接,然后下载了商品图片 ,自己整活了

首先,我们获取需要推广的链接 :例如 xxx.com

然后,将图片上传到网站的媒体中心 ,获取图片的链接:例如xxx.jpg

最后使用HTML代码

<a href="https://xxx.com" target="_blank">
        <img src="/xxx/xxx.jpg" alt="图片">
    </a>

这样就可以显示了

然后我们可以给他加上角标

 <a href="https://xxx.com"
       target="_blank" style="position: relative; display: inline-block;">
        <img src="/xxx/xxx.jpg" alt="图片">
        <span style="position: absolute; top: 0; right: 0; background-color: #f00; color: #fff; padding: 2px 5px; font-size: 12px; font-weight: bold; border-radius: 5px;">AD广告</span> <!-- 添加角标 -->
    </a>
这样就可以了 ,显示样式如下:
自定义HTML广告,并显示角标-米宝教室

将颜色灰色的渐变色 ,增加左上角和左下角的圆角效果:

继续优化代码

<div style="position: relative; display: inline-block;">
    <a href="xxx.com" target="_blank">
        <img src="/xxx/xxx.jpg" alt="广告">
    </a>
    <div style="position: absolute; background: linear-gradient(to bottom, #333, #555, #777, #999, #bbb); color: #ffffff; padding: 4px 8px; top: 0; right: 0; font-size: 12px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;">广告</div>
</div>

效果图

自定义HTML广告,并显示角标-米宝教室