• 动态显示选项框


    效果(如上图): 鼠标滑到“应用”上时显示下面几个图标,鼠标离开后隐藏图标。

    方法:写一个<div>用来存放这些小图标,然后再鼠标滑动的时候append到“应用”所在的div里。(这里暂时先不要用下面的方法实现,用下面的方法实现,鼠标就不能移到各个图标上,因为鼠标一离开“应用”,图标框就会自动隐藏)

    效果(如上图):点击笑脸图标则弹出各种表情选项框,点击选项框外任意地方可以隐藏选项框。

    方法: 可任意涌上一种方法实现,也可以写一个div放置选项框,然后设置这个div的position为absolute;

    Tips:

    <title>Untitled Document</title>
    <style type="text/css">


    li {
    float: left;
    }
    .clear:after {
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    }

    ul {
    position: absolute;
    }
    </style>
    </head>

    <body>
    <div>
    <ul class="clear">
    <li><a class="clear" href="#"><img src="1.jpg"></a></li>
    <li><a href="#"><img src="2.jpg"></a></li>
    <li><a href="#"><img src="3.jpg"></a></li>

    </ul>
    </div>
    </body>

    如果包含ul的div不占据空间,则可能是因为你给ul或其它的tags的position设置为了absolute

  • 相关阅读:
    Oracle死锁
    Oralce新建用户及表空间维护
    oracle作业运行中,无法停止
    ora-01652 无法通过128 (在表空间 TEMP中)扩展temp段
    Centos7搭建Apache2.4
    LAMP搭建
    Mysql数据库
    VSFTPD服务器
    windows下划分逻辑分区
    sendmail邮件服务器
  • 原文地址:https://www.cnblogs.com/liubingna/p/2942833.html
Copyright © 2020-2023  润新知