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. oracle的递归运算(树运算) 无限树形

    oracle的递归运算(树运算)start with org_id ='1'connect by prior parent_id=son_id 1.前言   oracle的递归运算,在我们web页面的 ...

  2. 数据结构与算法(4) -- list、queue以及stack

    今天主要给大家介绍几种数据结构,这几种数据结构在实现原理上较为类似,我习惯称之为类list的容器.具体有list.stack以及queue. list的节点Node 首先介绍下node,也就是组成li ...

  3. 18/10/19 周五欢乐赛题解(c++版)

    注意本题解并没有去追求最优解,只是用比较暴力的方法求解.D题听说要改说明不是位数30位,目前除了D题可能有问题之外其他代码已经全部正确. A.查找字串 用string BF(暴力求解即可) 代码 #i ...

  4. Cookie, LocalStorage 与 SessionStorage说明

     一.Cookie    Cookie 大小限制为4KB左右,不适合大量数据的存储.因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高.它的主要用途有保存登录信息,比如你 ...

  5. 【5】Django项目配置settings.py详解

    夫唯不争,故天下莫能与之争 --老子<道德经> 本节内容 1.项目配置文件settings.py介绍 2.数据库配置[MySQL] 3.创建模型对象并和数据库同步 4.python官方提供 ...

  6. 【codeforces 767C】Garland

    [题目链接]:http://codeforces.com/contest/767/problem/C [题意] 一棵树; 树上的每个节点都有一个权值; 让你把一棵树切掉两条边; 然后把这棵树分成了3个 ...

  7. Sencha Touch中 xclass和xtype区别

    1.xclass 就是 Ext.create(xclass) 和 xtype一样的性质,不一定非要是自己创建的. 2.xtype是xclass的简称. 3.使用xtype前,你要new的对象,先要re ...

  8. Spring MVC 一次简单的 CRUD

    基本环境搭建 1.数据库 和 实体类 的名字相同,实体类 属性名即 数据库 字段名. 2.创建 实体类 对应 dao 类,持久层框架 mybatis 正处于学习中,这里就用原始的 jdbc 操作了. ...

  9. gh-ost 号称是不需要触发器（Triggerless）支持的在线更改表结构的工具

    https://segmentfault.com/a/1190000006158503?utm_source=tuicool&utm_medium=referral

  10. ubuntu上java的开发环境 jdk 的安装

    jre下载路径: https://java.com/zh_CN/download/manual.jsp jdk下载路径:http://www.oracle.com/technetwork/java/j ...