zoukankan      html  css  js  c++  java
  • 常用的消息提示框(css3+html)

    demo如下所示:

    <div class="area">
            <!-- 向上 start-->
            <div class="popup-wrap up-box">
                <div class="popup-con">
                    这是一段文字测试这是一段文字测试
                    这是一段文字测试这是一段文字测试
                    这是一段文字测试这是一段文字测试
                </div>
            </div>
            <!-- 向上 end-->
            <!-- 向上 start-->
            <div class="popup-wrap down-box">
                <div class="popup-con">
                    这是一段文字测试这是一段文字测试
                    这是一段文字测试这是一段文字测试
                    这是一段文字测试这是一段文字测试
                </div>
            </div>
            <!-- 向上 end-->
        </div>

    css如下:

    .area{position: relative;}
    /*up-box*/
    .popup-wrap.up-box{width: 300px;position: absolute;background: #fff;box-shadow: 0 1px 2px 2px #ccc;top: 30px;left: 0;border-radius: 6px;}
    .up-box .popup-con{width: 100%;height: 100%;position: relative;padding: 10px;box-sizing: border-box;font-size: 13px;color: #666;line-height: 24px;}
    .up-box .popup-con:before{width: 10px; height: 10px;background: #fff;content:'';position: absolute;
    top: -5px;left: 50%;margin-left: -5px;transform: rotate(45deg);box-shadow: 0 1px 2px 2px #ccc;}
    .up-box .popup-con:after{width: 100%;height: 10px;background: #fff;position: absolute;z-index: 10;top: 0;left: 0;content:'';
    border-radius: 6px;display: block;}
    /*down-box*/
    .popup-wrap.down-box{width: 300px;position: absolute;background: #fff;box-shadow: 0 1px 2px 2px #ccc;top: 30px;left: 400px;border-radius: 6px;}
    .down-box .popup-con{width: 100%;height: 100%;position: relative;padding: 10px;box-sizing: border-box;font-size: 13px;color: #666;line-height: 24px;}
    .down-box .popup-con:before{width: 10px; height: 10px;background: #fff;content:'';position: absolute;
    bottom: -5px;left: 50%;margin-left: -5px;transform: rotate(45deg);box-shadow: 0 1px 2px 2px #ccc;}
    .down-box .popup-con:after{width: 100%;height: 10px;background: #fff;position: absolute;z-index: 10;bottom: 0;left: 0;content:'';
    border-radius: 6px;display: block;}
  • 相关阅读:
    Java Properties 类读配置文件保持顺序
    mysql在增加列前进行判断该列是否存在
    java中用jdom创建xml文档/将数据写入XML中
    JavaFX 简介
    ActiveMQ详细入门使用教程
    Jquery Pagination分页插件使用
    Jquery选择器总结
    自己4月份面试的一些总结
    Java面试题全集(下)转载
    Java面试题全集(上)转载
  • 原文地址:https://www.cnblogs.com/cyppi/p/13293327.html
Copyright © 2011-2022 走看看