WordPress用css样式实现疯抢优惠券广告,兼容移动版

昨天在陌小雨博客里面看到左侧旁边有一个疯抢优汇卷的广告,样式锃亮,且非常有实用价值,便想着看能不能扒到代码,便使用了火狐浏览器进行了扒代码,功夫不负有心人,在博客也实现了这个广告。也非常锃亮。

首先:

将以下这段css层叠样式放在wordpress主题的style.css样式表里,知更鸟主题用户直接放在自定义样式里即可。

.tmall_youhui_left {
position: fixed;
left: 50%;
margin-left: -740px;
bottom: 190px;
z-index: 10;
width: 137px;
height: 325px;
}
@media screen and (max-width:1490px) {
.tmall_youhui_left{display:none}
}
@media screen and (max-width:768px) {
.tmall_youhui_left{position: fixed;right: 5px;width: 80px;height: 80px;text-align: center;cursor: pointer;z-index: 99;left: initial;bottom: 70px;top: inherit;display: block;}
}

 

接着

将以下代码插入头部header.php里,也可放到尾部footer.php里,具体看实际效果

<div class="tmall_youhui_left"><a target="_blank" href="http://shop.liulinblog.com"><img style="max-width:100%;max-height:100%;" src="http://7xpvhd.com1.z0.glb.clouddn.com/wp-content/uploads/youhuijuan.gif"></a></div>

演示查看本站左侧下图标,启用SSL证书的同学,可以把gif图片本地化后,上传调用

相关素材下载:

淘宝优惠券gif动图素材下载
淘宝优惠券gif动图素材下载
淘宝优惠券gif动图素材下载
淘宝优惠券gif动图素材下载

 

 

 

 

 

 


 

关注互联网创业 干货|工具|教程|资源
木木资源博客 » WordPress用css样式实现疯抢优惠券广告,兼容移动版

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

提供最优质的资源集合

大学生必备 职场必备