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. swift-UINavigationController纯代码自定义导航控制器及底部工具栏的使用

    step1:自定义一个类  NTViewController,该类继承UITabBarController: // // NTViewController.swift // Housekeeper / ...

  2. Luogu P2068 统计和

    P2068 统计和 题目描述 给定一个长度为n(n<=100000),初始值都为0的序列,x(x<=10000)次的修改某些位置上的数字,每次加上一个数,然后提出y (y<=1000 ...

  3. pyhon中的内存优化机制

    一.变量的内存地址 python中变量的内存地址可以用id()来查看 >>> a = " >>> id(a) 2502558915696 二.pyhon中 ...

  4. [转]十五天精通WCF——第五天 你需要了解的三个小技巧

    一: 服务是端点的集合 当你在开发wcf的时候,你或许已经注意到了一个service可以公布多个endpoint,确实是这样,在wcf中有一句很经典的话,叫做“服务是端点的集合",就 比如说 ...

  5. natural join 以及 v$statname ， v$sessstat

    oracle natural join是一个比较方便的用法.如果两个表的某些字段名称相同,类型相同,natural join就会把他们做等值连接.比如下面我们知道这两个视图的结构如下: SQL> ...

  6. MVC.Net5：添加Tinymce的图片上传功能

    Tinymce是目前几个主流的Web文本编辑器之一,不过它的图片上传功能是要收费的,而其它几个免费的上传图片的插件支持的都是PHP.那么就只能自己动手写一个了(源代码下载). 准备工作如下:1.   ...

  7. springmvc 时间返回格式化

    如果是@ResponseBody,可以通过@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss")设置返回的样式: 如果是不是@ResponseBody ...

  8. 猫猫学iOS之UILabel设置圆角不成功所做调控更改

    原创文章.欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 如图问题 如图是我要做的效果 然而当我写好代码后,设置号label的layer圆角后 ...

  9. 大型项目开发: 隔离 (《大规模C++程序设计》书摘)

    书中第六章 隔离. 主要在撰述什么须要定义在头文件?什么应当移到编译单元中? 核心仍然是先区分接口定义与实现细节.实现细节的改变会导致客户代码的又一次编译,从逻辑上也表示与客户代码间可能存在着强耦合. ...

  10. Java时间转换

    package com.fh.util; import java.sql.Timestamp; import java.text.DateFormat; import java.text.ParseE ...