今天发现放在文章内的京东的推广广告不显示了
然后又去京东联盟去重新获取了链接,也不显示 。
只能自己获取链接,然后下载了商品图片 ,自己整活了
首先,我们获取需要推广的链接 :例如 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>
这样就可以了 ,显示样式如下:
将颜色灰色的渐变色 ,增加左上角和左下角的圆角效果:
继续优化代码:
<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>
效果图
评论 (0)