自定义html提示框比较令人困惑的就是编写三角形的样式；以前的实现方式是在标签内使用span标签来实现。不过现在有了css提供的两个为类:before,:after之后，可以不用再内置span标签了；

下面是本人的一个简单例子：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>提示框的三角形原理</title>

		<style type="text/css">

			#tips {

				display: inline-block;

				position: relative;

				padding: 0px 15px;

				border-radius: 5px;

				border: 1px solid #DDD;

			}

			#tips:after,

			#tips:before {

				content: "";

				position: absolute;

				left: 10px;

				bottom: -16px;

				border: 8px solid transparent;

				border-top: 8px solid #DDD;

			}

			#tips:after {

				border-top: 8px solid #FFF;

				bottom: -15px;

			}

		</style>

	</head>

	<body>

		<div id="tips">

			<p>我是没有人</p>

		</div>

	</body>

</html>

html自定义提示框的更多相关文章

  1. 在ASP.NET中引用自定义提示框

    在html网页中自定义提示框 正文: 在一般的B/S架构中项目,与用户的交互信息是非常重要的.在一般的情况下,设计人员都在把用户信息呈现在html中,用div和span去弹出相关信息.对于一般的情况而 ...

  2. vue2.0 自定义 提示框（Toast）组件

    1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...

  3. vue 自定义 提示框（Toast）组件

    1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...

  4. 使提示框居中显示&自定义提示框

    ToastActivity.java文件: 1 public class ToastActivity extends AppCompatActivity { 2 private Button mbtn ...

  5. 从service弹出系统级自定义提示框，可在任意页面弹出

    添加权限 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> // 显示 ...

  6. 在echarts中自定义提示框内容

    1.期望效果 以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容. 如下图,鼠标滑过每个数据项时, 第1张是默认提示框: 第2张是处理成 ...

  7. Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义提示框

    [自行修改 "引号"] 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到char ...

  8. Echarts修改提示框及自定义提示框内容

    1:首先先定义自定义的json数据 var msg = [{ 'tell':'110', 'ContentMessage':"我今天去吃大餐" },{ 'tell':'111', ...

  9. 手写一个关于title属性自定义提示框解决浏览器（IE）不兼容问题

    <html> <head> <meta charset="utf-8"> <title>无标题页</title> < ...

随机推荐

  1. dns-prefetch—DNS预解析技术

    今天在看一个网站的源代码时 发现了 <link rel="dns-prefetch" href="//static.tuweia.cn/"> 对dn ...

  2. （转）织梦cms首页添加digg顶一下的修改方法

    现在把文章内容页拔的顶拔出来.分享一下让各位需要的朋友参考使用(特别注意:红色的是修改的地方)第一步:把顶踩的js和ajax提取出来,放在想要使用的页面用(比如:首页)以下是内容页顶踩用的js.提取出 ...

  3. 创建cocos项目

    创建cocos项目 进入终端输入命令: cocos new HelloCpp -p com.cocos.org -l cpp -d /Users/emerys/documents/cocos 参数说明 ...

  4. idea 多模块项目依赖父工程class找不到问题

    比如,我们有这么个过程,项目结构如下: a --b --c a是总结点,b是子节点,c是父节点 b依赖父节点class,通过maven构建时通常我们会在子节点中添加父节点依赖,如: <depen ...

  5. 通过dbcp链接池对数据库操作报 Cannot create PoolableConnectionFactory (Could not create connection to database server. Attempted reconnect 3 times. Giving up.)--解决方案

    org.springframework.transaction.CannotCreateTransactionException: Could not open JDBC Connection for ...

  6. birt 运行环境搭建（部署到tomcat）

    最近一直在研究eclipse的birt,各种坑~~~~(>_<)~~~~. Requirements:tomcat version:7.0,birt-runtime-4.6.0-20160 ...

  7. winform下调用webservice，传参List<string>

    用c#做了一个webservice,其中一个接口是public bool AddReturns(List<string> SQLStringList). 然后在另一个c#做的winform ...

  8. asp.net Server.HtmlEncode和HtmlDecode

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">< ...

  9. php xcache 配置 使用 （转载）

    xcache的使用与配置 一.安装Xcache # wget http://xcache.lighttpd.net/pub/Releases/1.3.0/xcache-1.3.0.tar.gz # t ...

  10. UVA 1594 Ducci Sequence（两极问题）

           Ducci Sequence Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu   D ...