• 电话悬浮代码



    代码

    <style type="text/css">
    *{ margin:0; padding:0; list-style:none;}
    body{ font-size:14px;}
    .main{ 0px; height:0px; position:fixed; bottom:150px; border:1px solid #b83b3b; background-color:#FFF;}
    <!--position:fixed为相对于浏览器来定位;bottm为从底部向上多少个像素-->
    <!--background-color为弹出窗口背景颜色;width为弹出窗口的大小,修改需在下面同时修改收缩的宽度-->
    .main2{ 0px; height:0px; position:relative; padding:10px;}
    .main2 ul li{ 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{ 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>


  • 相关阅读:
    【LeetCode】在排序数组中查找元素的第一个和最后一个位置
    【LeetCode】搜索旋转排序数组
    【LeetCode】组合总和
    【LeetCode】电话号码的字母组合
    【LeetCode】对称二叉树
    【LeetCode】验证二叉搜索树
    【LeetCode】分发糖果
    Go学习笔记
    mybatis
    redis
  • 原文地址:https://www.cnblogs.com/jalenFish/p/14099113.html
Copyright © 2020-2023  润新知