专栏首页灵儿的笔记电话悬浮代码

电话悬浮代码

代码

<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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 侧边多彩磁铁导航

    今天给大家分享一个代码,侧边多彩磁铁导航【注意:这个代码在QQ和微信自带的浏览器不会有效果,但不影响美观】 不要用电脑打开,你会看不到效果。

    小小鱼儿小小林
  • 页面底部悬浮广告或关注公众号代码

    <style> .margingT { margin-bottom: 60px; } .bottomAD { ...

    小小鱼儿小小林
  • 非常小巧的一键到达顶部的代码

    小小鱼儿小小林
  • 55 个提高你 CSS 开发效率的必备片段

    这篇文章会记录我们平时常用到的 CSS 片段,使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的,墙裂建议点赞收藏再看,方便日后查找?

    enoyo
  • 如何用css控制伪元素,再也不用多写个div

    杭州前端工程师
  • html+css学习笔记002-盒子模型

    怕的不是我们不懂英文 怕的不是我们不懂操作电脑 怕的更不是我们不懂基础程序语言

    Mr. 柳上原
  • CSS3新特性?

    新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)} 弹性盒模型 display: flex; 多列布局 c...

    我不是费圆
  • 第9天:CSS精灵图

    “CSS精灵”,英语css sprite,所以也叫做“CSS雪碧”技术。是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背...

    半指温柔乐
  • 高质量编码-轨迹管理平台(CSS样式)

    样式仿照百度地图鹰眼轨迹服务早期版本的web端轨迹管理台,地图和UI都使用了夜色风格。

    MiaoGIS
  • 什么? CSS 阴影竟然还有这种骚操作 ?

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧(https://www.cnblogs....

    苏南

扫码关注云+社区

领取腾讯云代金券