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. webpack-dev-middleware 与 webpack-hot-middlware

    dev-middleware:  live reload的实现: 思考一下我們要如何更新(live reload)呢? 當然是需要取得 webpack 編好的資料啊,於是就需要在從 request 到 ...

  2. 洛谷——P1122 最大子树和

    P1122 最大子树和 树形DP,$f[u]$表示以u为根的子树的最大美丽指数 $f[u]+=max(0,f[v])$ 树形DP的基本结构,先搜再DP,这题感觉有点儿贪心的性质,选就要选美丽值> ...

  3. 13.multi_match实现dis_max+tie_breaker

    主要知识点: 基于multi_match语法实现dis_max+tie_breaker     1.best_fields+tie_breaker GET /forum/article/_search ...

  4. 百度编辑器ueditor1.4.3配置记录

    我从官网下载的php文件,但是图片上传不能用,后来查找资料,打开ueditor下的php/controller.php,(其他环境选对应的文件夹)把时区设置按如下改个字母大小写,再打开该文件就正确返回 ...

  5. python json结构

    =====================================================json==============================import reques ...

  6. 洛谷 1003 NOIP2011 D1T1 铺地毯

    [题解] 因为只询问一个点,所以记录地毯信息,倒着找第一个符合条件的地毯就是在最上面的. #include<cstdio> #include<algorithm> #defin ...

  7. Codeforces 939D - Love Rescue

    传送门:http://codeforces.com/contest/939/problem/D 本题是一个数据结构问题——并查集(Disjoint Set). 给出两个长度相同,且仅由小写字母组成的字 ...

  8. sgu 176 有源汇有上下界的最小流模板题

    /*参考博文:http://hi.baidu.com/dragon_eric123/item/82e259200ece744046996282 有上下界的有源最小流 */ #include<st ...

  9. zoj 3693

    #include<stdio.h> #include<string.h>//进位问题如3.985    应该进位3.99 int main() {     int n,k,i; ...

  10. A. Treasure Hunt Codeforces 线性代数

    A. Treasure Hunt time limit per test 1 second memory limit per test 256 megabytes input standard inp ...