实现自定义的手型气泡提示

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">  

    .test{

      	background: #CE5010 none repeat scroll 0% 0%;

				position: relative;

				border-radius: 20px;

				margin: 60px;

				height: 2em;

				text-align: center;

				float: left;

				color: white;

				padding-left: 10px;

				padding-right: 10px;

				padding-top: 5px;

				font-size: 12px;

    }  

    .test span.bot{

    		width: 0;

        height: 0;

        font-size: 0;

        overflow: hidden;

        position: absolute;

       border-style: solid;

			left: 0px;

			border-color: transparent transparent transparent rgb(206, 80, 16);

			top: 18px;

			border-width: 12px;

    }  

    </style>

</head>  

<body>

    <div class="test">

        <span class="bot"></span>

        CSS"边框法"实现气泡对话框效果，需要两个辅助span

    </div>  

</body>  ""

<html>

　　

实现效果如下：

aaarticlea/png;base64,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" alt="" />

CSS实现自定义手型气泡提示的更多相关文章

  1. CSS鼠标效果手型效果

    Example:CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a> Exam ...

  2. 气泡提示 纯CSS

    tooltip(气泡提示) 依赖 脚本文件:CalvinTip.js 样式文件:toolTip.css 参数 elems HTMLNode 必须 气泡提示的元素 options Object 可选 多 ...

  3. vue 指令---气泡提示(手撸实战)

    菜鸟学习之路//L6zt github 自己在造组件轮子,也就是瞎搞.自己写了个slider组件,想加个气泡提示.为了复用和省事特此写了个指令来解决.预览地址项目地址 github 我叫给它胡博 cs ...

  4. CSS样式--移动划过超链接鼠标变手型详解

    用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这 ...

  5. css实现气泡提示框三角及css中drop-shadow的使用

    css 做一个弹出气泡,样式怎么设计? 难点: 要实现白色三角型,可以在伪元素before和after上设置一个黑.一个白三角形,白三角形会挡住黑的,从而实现. &::before, & ...

  6. Tippy.js - 免费开源且高度可定制的气泡提示独立组件

    推荐一个非常优秀的 web 气泡提示独立UI组件. 介绍 Tippy.js 是一款用于Web的完整工具提示,弹出菜单,下拉菜单和菜单解决方案.适用于鼠标,键盘和触摸输入. 特点 超轻量的纯 javas ...

  7. 【C#】组件发布：MessageTip，轻快型消息提示窗

    -------------201610212046更新------------- 更新至2.0版,基本完全重写,重点: 改为基于原生LayeredWindow窗体和UpdateLayeredWindo ...

  8. Notepad++ 配置 支持jquery、html、css、javascript、php代码提示

    原文:Notepad++ 配置 支持jquery.html.css.javascript.php代码提示 官网下载:http://notepad-plus-plus.org/ 获取插件的方法:打开软件 ...

  9. jquery.validate.unobtrusive.js实现气泡提示mvc错误

    改写jquery.validate.unobtrusive.js实现气泡提示mvc错误 个人对于这个js.css不是很擅长,所以这个气泡提醒的样式网上找了下,用了这个http://www.cnblog ...

随机推荐

  1. java 本地目录文件删除 ***最爱那水货

    /** * @note 删除目录下的所有文件 * @param path * @return */ public static boolean delAllFile(String path){ boo ...

  2. CGI与Servlet的比较

    转自:http://www.maxhis.info/java/cgi-vs-servlet/ 谢! 概括来说,CGI和Servlet可以完成相同的功能. 一:CGI(Common Gateway In ...

  3. Python的sorted函数应用

    sorted()函数也是一个高阶函数,它还可以接收一个key函数来实现自定义的排序 L = [('Bob', 75), ('Adam', 92), ('Bart', 66), ('Lisa', 88) ...

  4. SpringMVC 邮件发送

    <!--邮件发送实现类--> <bean id="javaMailSender" class="org.springframework.mail.jav ...

  5. java 编译时的初始化顺序

    有的时候,java的初始化会对我的工作照成很大影响,所以简单介绍一下, 首先介绍简单的变量的初始化:在类的内部,变量定义的先后顺序决定了初始化的顺序,即使变量定义散布于方法定义之间,它也会先于构造器和 ...

  6. Linux更改主机名--适用于Centos

    1.显示主机名: [root@bogon:~]# hostnamezhh64 2.临时修改主机名: [root@bogon:~]# hostname zzofs[root@bogon:~]# host ...

  7. Nibbler – 免费的网站测试和指标评分工具

    Nibbler 是一款免费的工具,用于测试网站的各个方面指标.输入任意网站的地址,Nibbler 会给你一份报告,列出网站的10个关键领域的分数,包括可访问性,用户体验,搜索引擎优化,社交媒体和技术等 ...

  8. Angularjs 的 ngInfiniteScroll 的使用方法

    Angularjs 的 ngInfiniteScroll 的使用方法 一.介绍 ngInfiniteScroll 是一个 AngularJS 的扩展指令,实现了网页的无限滚动的功能,也就是相当于页面滚 ...

  9. JavaScript事件对象

    一． 事件对象 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. 1.鼠标按钮 非 IE(W3C)中的 button 属性 0 表示主鼠标按钮(常规一般是鼠标左键) 1 表示中间的 ...

  10. 刷新ALV定位到当前记录行

    如果使用"REFRESH_TABLE_DISPLAY"刷新ALV后,记录会跳到第一行,以下代码可以使记录仍然定位在当前行 DATA ls_stable TYPE lvc_s_stb ...