前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >电话悬浮代码

电话悬浮代码

作者头像
小小鱼儿小小林
发布2020-06-23 16:48:21
1.1K0
发布2020-06-23 16:48:21
举报
文章被收录于专栏:灵儿的笔记

代码

<style type="text/css"> *{ margin:0; padding:0; list-style:none;} body{ font-size:14px;} .main{ width:0px; height:0px; position:fixed; bottom:150px; border:1px solid #b83b3b; background-color:#FFF;} <!--position:fixed为相对于浏览器来定位;bottm为从底部向上多少个像素--> <!--background-color为弹出窗口背景颜色;width为弹出窗口的大小,修改需在下面同时修改收缩的宽度--> .main2{ width:0px; height:0px; position:relative; padding:10px;} .main2 ul li{ width:100%; height:30px; line-height:30px; text-align:left;} <!--改变line-height和height即可改变行间距--> .main2 ul li a{ color:#000; text-decoration:none;} <!--color为菜单的文字;background-color为文字背景颜色--> .main2 ul li a:hover{ text-decoration:underline; color:#000;} .bar{ width:100px; height:105px; position:absolute; left:-100px; top:-1px; background:url(http://pic.kuaizhan.com/g2/M00/28/2D/wKjmqlXAH3aALlzfAAAcqLZkqM40852415) no-repeat; display:block;} <!--将right:-25改成left:-25,并在在下面也将left改成right--> <!--url()后面为产品目录图片的位置;宽度为100px;高度为99px--> </style> <body> <div class="main"> <div class="main2"><a href="tel:10086" class="bar"></a></div> </div> </body>

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/09/26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档