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. ＢＦＳ入门篇——RQNOJ195&&335

    PID195 / 校园迷宫☆ 从x,y走到去q,w的最小步数,限制是有的点可走,有的点不可走,BFS嘛. #include<bits/stdc++.h> using namespace s ...

  2. 洛谷——P1063 能量项链

    P1063 能量项链 题目描述 在MarsMars星球上,每个MarsMars人都随身佩带着一串能量项链.在项链上有NN颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对 ...

  3. Gym - 101611D Decoding of Varints(阅读理解题 )

    Decoding of Varints ​ 题意&思路: 首先根据红色边框部分的公式算出x,再有绿色部分得知,如果x是偶数则直接除以2,x是奇数则(x+1)/-2. PS:这题有数据会爆掉un ...

  4. exist not exist 分析

    结果集1 结果集2: 最后连接条件 执行过程: 一行一行遍历结果集1的数据,然后结果集1中的连接条件执行子查询,如果有值返回那么在看是exist  还是not exist 在决定最后的结果集是否要要不 ...

  5. 00.用 yield 实现 Python 协程

    来源:Python与数据分析 链接: https://mp.weixin.qq.com/s/GrU6C-x4K0WBNPYNJBCrMw 什么是协程 引用官方的说法: 协程是一种用户态的轻量级线程,协 ...

  6. STM32_NVIC寄存器详解

    在MDK内,与NVIC相关的寄存器,MDK为其定义了如下的结构体:  typedef struct  {        vu32   ISER[2];    //2个32位中断使能寄存器分别对应到60 ...

  7. nyoj_49_开心的小明_201403161133

    开心的小明 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 小明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天 ...

  8. hdu_hpu第八次周赛_1001 To and Fro 201310270918

    To and Fro Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Su ...

  9. [bzoj1926][Sdoi2010]粟粟的书架_二分_主席树

    粟粟的书架 bzoj-1926 Sdoi-2010 题目大意:题目链接 注释:略 想法:分成两个题 前面的我们可以二分,直接二分出来检验即可. 对于R=1的,相当一个数列,我们在上面建立主席树. 然后 ...

  10. ZooKeeper官方文档资源

    一般来说官方的文档是最权威的. 入口:http://zookeeper.apache.org/ 在右侧即可进入相应版本文档: 如果想要看主干的文章,入口如下,主干是最稳当的版本:http://zook ...