用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" rel="nofollow" href="https://www.qqooo.cn/goto.php?=aHR0cDovL21hbGwubXhvb28uY24=" target="_blank"><img style="max-width:100%;max-height:100%;" src="http://7xpvhd.com1.z0.glb.clouddn.com/wp-content/uploads/youhuijuan.gif"></a></div>

之后可以下载下面两个gif动态图,也是不错的素材,现在大部分网站都是使用这种的:

用css实现购物优惠券广告样式,自适应设备

QQ淘优品素材

用css实现购物优惠券广告样式,自适应设备

疯抢优惠券广告素材

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《用css实现购物优惠券广告样式,自适应设备》
文章链接:https://www.qqooo.cn/html/1375.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
本站资源均来源于网络,若侵犯您的权益,请来信 Feelym@88.com 删除!