手机移动端顶部和底部悬浮代码

2020-02-12 19:03:43  阅读 617 次 评论 0 条

很多人在挂广告的时候 面临一个问题 挂底部悬浮,但没有代码,小编给你一个WAP底部悬浮代码

效果展示图

使用方法:直接把下面的代码复制到wap端模板里foot文件就可以用了,记得更换图片和链接

<style>

@media screen and (max-device-width:800px){ /**WAP**/

.top_fixed{ position:fixed; top:0px; width:100%; z-index:9999;}

.top_fixed div{ width:30px; height:30px; text-align:center; line-height:30px; background:#CCC; right:0; top:-30px; position:absolute; cursor:pointer;}

.top_fixed div:hover{ background:#F66; color:#FFF}

.top_fixed a img{ height:90px; width:100%;}

.bottom_fixed{ position:fixed; bottom:0px; width:100%; z-index:9999;}

.bottom_fixed div{ width:30px; height:30px; text-align:center; line-height:30px; background:#CCC; right:0; top:-30px; position:absolute; cursor:pointer;}

.bottom_fixed div:hover{ background:#F66; color:#FFF}

.bottom_fixed a img{ height:90px; width:100%;}

}

@media screen and (min-width:800px){ /**PC**/

.top_fixed{ display:none; position:fixed; top:0px; left:50%; margin-left:-475px; z-index:9999;}

.top_fixed div{ width:24px; height:24px; text-align:center; line-height:24px; background:#CCC; right:0; top:-24px; position:absolute; cursor:pointer}

.top_fixed div:hover{ background:#F66; color:#FFF}

.top_fixed a img{ height:75px; width:950px;}

.bottom_fixed{ display:none; position:fixed; bottom:0px; left:50%; margin-left:-475px; z-index:9999;}

.bottom_fixed div{ width:24px; height:24px; text-align:center; line-height:24px; background:#CCC; right:0; top:-24px; position:absolute; cursor:pointer}

.bottom_fixed div:hover{ background:#F66; color:#FFF}

.bottom_fixed a img{ height:75px; width:950px;}

}

</style>

<div class="top_fixed"><!--WAP顶部悬浮-->

<a href="图片链接地址" rel="nofollow" target="_blank"><img src="图片地址"></a>

</div>

<div class="bottom_fixed"><!--WAP底部悬浮-->

<a href="图片链接地址" rel="nofollow" target="_blank"><img src="图片地址"></a>

</div>


本文地址:https://www.yms7.com/post/7048.html
版权声明:本文为原创文章,版权归 yms 所有,欢迎分享本文,转载请保留出处!

发表评论取消回复


表情

还没有留言,还不快点抢沙发?