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;}
  • 相关阅读:
    kafka window环境搭建
    oracle 日期格式化和数据去重
    angular $http服务详解
    Spring框架之beans源码完全解析
    计算机经典书籍100本分享
    Thinking in Java 4th(Java编程思想第四版)文档、源码、习题答案
    Spring框架之事务源码完全解析
    TCP/IP网络协议层对应的RFC文档
    Spring源码深度解析之事务
    Spring框架之websocket源码完全解析
  • 原文地址:https://www.cnblogs.com/cyppi/p/13293327.html
Copyright © 2011-2022 走看看