1.效果

2.源码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <style type="text/css">

        #confirm{

            position: absolute;

            z-index: 1;

            display: inline-block;

            border: 1px solid black;

            background-color: gray;

            width: 50px;

            height:40px;

            border-radius: 10px;

            -webkit-box-shadow: 3px 3px 3px #adadad;

            -moz-box-shadow: 3px 3px 3px #adadad;

            box-shadow: 3px 3px 3px #adadad;

            text-align: center;

            line-height: 40px;

            color: red;

        }

        #triangle{

            position: absolute;

            z-index: 2;

            top: 44px;

            left: 26px;

            display: inline-block;

            border-bottom:1px solid black;

            border-right:1px solid black;

            background-color: gray;

            width: 10px;

            height:10px;

            -webkit-transform: rotateZ(45deg);

            -moz-transform: rotateZ(45deg);

            -ms-transform: rotateZ(45deg);

            -o-transform: rotateZ(45deg);

            transform: rotateZ(45deg);

            -webkit-box-shadow: 3px 3px 3px #adadad;

            -moz-box-shadow: 3px 3px 3px #adadad;

            box-shadow: 3px 3px 3px #adadad;

        }

    </style>

</head>

<body>

<div id="confirm">提示</div>

<div id="triangle"></div>

</body>

</html>

CSS自定义消息提示的更多相关文章

  1. 纯CSS tooltip 提示

    一般的tooltip,使用超链接的title,或者是css+javascript生成. 如果页面布局合理,样式结构清晰,可以使用纯CSS的提示. demo如下: a.tooltip { positio ...

  2. html+css创建提示框

    看到下面的效果了吗? 本来我们站点是用下面的图片做的背景, 但是后期当更改完框中的提示内容,并且更新内容较多的时候,发现内容溢出了,如下图: 但是背景图片不能自动拉伸,还得重新做一张背景图,这样就导致 ...

  3. 在jsp页面下, 让eclipse完全支持HTML/JS/CSS智能提示(转)

      我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用ecl ...

  4. css悬浮提示框

    效果图: code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. eclipse设置html js css自动提示

    eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclipse自带的插件,无需另外安装插件,具体步骤如下 1.打开eclipse→Window ...

  6. 在jsp页面下, 让eclipse完全支持HTML/JS/CSS智能提示

    我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...

  7. GoogleMapsV3-----基础地图(自定义消息提示OverlayView) (转)

    <html> <head> <title> </title> <title></title>    <style type ...

  8. ios 自定义消息提示框

    自定义提示框,3秒钟后自动消失.如上图显示效果. 提示框加载代码: - (void)viewDidLoad { [super viewDidLoad]; //将view背景颜色变更为黄色 self.v ...

  9. css 鼠标提示样式预览表[转]

    语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | no ...

随机推荐

  1. 逆元Inv（模板+应用）

    逆元: 如果满足公式,则有a 是 b的逆元同时b也是a的逆元. 逆元的应用: 设c为b在对m取余的意义下的逆元: 在求解公式 (a / b) % m的时候,如果b可能会非常的大,所以会出现爆精度的问题 ...

  2. 24.通过ngram分词机制实现index-time搜索推荐

    一.ngram和index-time搜索推荐原理     1.什么是ngram     假设有一个单词:quick,在5种长度下的ngram情况如下: ngram length=1,q u i c k ...

  3. python编码小记

    Python编码小记 标签(空格分隔): 编程 python 1.list类型remove()操作 列表对象执行remove()函数后,会自动退出循环,所以如果想利用一个单独的for循环删除列表中多个 ...

  4. insert into varchar2(8000)

    在看12c的文档的时候发现varcahr2最大长度是4000 byte VARCHAR2 Data Type The VARCHAR2 data type specifies a variable-l ...

  5. 基数排序之多keyword排序运用队列

    源码例如以下: #include <stdlib.h> #include <stdio.h> typedef struct QUEUEnode* link; struct QU ...

  6. Sahara中的数据模型

    声明: 本博客欢迎转载.但请保留原作者信息,并请注明出处! 作者:郭德清 团队:华为杭州OpenStack团队 本文主要是介绍下Sahara中一些常见的数据模型. 1.Config 用于描写叙述配置信 ...

  7. C语言之文件操作07——读取文件数据并计算均值方差标准差

    //文件 /* =============================================================== 题目:从文本文件"high.txt" ...

  8. OpenCV 学习（计算图像的直方图）

    OpenCV 计算图像的直方图 计算图像的直方图是图像处理领域一个非经常见的基本操作. OpenCV 中提供了 calcHist 函数来计算图像直方图.只是这个函数说实话挺难用的,研究了好久才掌握了些 ...

  9. [深入理解Android卷一全文-第十章]深入理解MediaScanner

    由于<深入理解Android 卷一>和<深入理解Android卷二>不再出版,而知识的传播不应该由于纸质媒介的问题而中断.所以我将在CSDN博客中全文转发这两本书的全部内容. ...

  10. Oracle GoldenGate从oracle db 到非oracle db的初始化数据同步的方法

    非oracle db以 sqlserver为样例说明: 我的思路 A :oracle db 生产  B: oracle db 中间机 C: sqlserver db 目的端 A-> B-> ...