首页 网络技术
  1. 正文

用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://mall.mxooo.cn"><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实现购物优惠券广告样式,自适应设备

疯抢优惠券广告素材

本文标题:用css实现购物优惠券广告样式,自适应设备
本文链接:http://www.qqooo.cn/post/1375.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 feelym@88.com 处理,谢谢!