电话悬浮代码

简介: 电话悬浮代码

代码

<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>
相关文章
|
7月前
|
存储 前端开发 JavaScript
实现鼠标悬停显示书名、作者和价格的悬浮提示框功能
实现鼠标悬停显示书名、作者和价格的悬浮提示框功能
|
4月前
|
C#
|
6月前
|
前端开发 JavaScript
CSS动画(个人资料卡片)
CSS动画(个人资料卡片)
|
7月前
做一个发送短信的倒计时按钮(很常用)
做一个发送短信的倒计时按钮(很常用)
41 0
|
移动开发
手机h5页面唤起打电话、发短信功能
手机h5页面唤起打电话、发短信功能
|
iOS开发 开发者
iOS开发 - placeholder默认灰色在同系统同型号手机上显示不一致(灰和黑)
iOS开发 - placeholder默认灰色在同系统同型号手机上显示不一致(灰和黑)
201 0
iOS开发 - placeholder默认灰色在同系统同型号手机上显示不一致(灰和黑)
|
监控 Android开发 iOS开发
与流氓弹窗斗争之路
与流氓弹窗斗争之路
130 0
与流氓弹窗斗争之路
|
移动开发
ReactNative自定义车牌号输入框及键盘实现
ReactNative自定义车牌号输入框及键盘实现
578 0
ReactNative自定义车牌号输入框及键盘实现
|
Android开发
Android开发案例 点击按钮出现 简易的消息提示框
Android开发案例 点击按钮出现 简易的消息提示框
279 0
Android开发案例 点击按钮出现 简易的消息提示框
带货直播源码,实现验证码倒计时按钮
带货直播源码,实现验证码倒计时按钮
183 0