自定义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. HttpClient 发送图片

    var httpClient = new HttpClient(); using (FileStream fs = new FileStream("C:\\1.jpg", File ...

  2. js求字符长度

    </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  3. Smarty的配置与高级缓存技术

    转之--http://www.cnblogs.com/-run/archive/2012/06/04/2532801.html Smarty 是一个出色的PHP模板引擎,它分离了逻辑代码和user i ...

  4. （转）ThinkPHP3.0 使用分组后路径访问无效的解决方法!

    注意,清除Runtime,就是清除缓存,很重要,妹的,调试了一下午,总是加上Home目录分组就找不到页面,直接放到action下就行,原来是缓存搞得鬼,另外要在入口文件开启‘APP_DEBUG’ 在T ...

  5. Razor视图引擎基础语法

    在VS2010中新建一个MVC3项目可以看出与以往的MVC2发生了很明显的变化 1.ASP.NET MVC3必要的运行环境为.NET 4.0 (想在3.5用MVC3,没门!) 2.默认MVC3模板项目 ...

  6. Android系统下的动态Dex加载与app速度优化

    1 问题 在Android系统中,一个App的所有代码都在一个Dex文件里面.Dex是一个类似Jar的存储了多有Java编译字节码的归档文件.因为Android系统使用Dalvik虚拟机,所以需要把 ...

  7. singleTask TaskAffinity allowTaskReparenting

    关于singleTask TaskAffinity allowTaskReparenting 一.Activity的LaunchMode 1.standard 2.singleTop:FLAG_ACT ...

  8. expdp 备份数据库

    操作系统层面创建目录 [root@Oracle10g ~]# mkdir -p /home/oracle/db_back/ 2. 修改目录的所属用户.所属组 [root@Oracle10g ~]# c ...

  9. 64位操作系统下IIS报“试图加载格式不正确的程序”错误

    缘由:在64位操作系统下IIS发布32位的项目,报“项目依赖的dll无法读取,试图加载格式不正确的程序”错误. 原因:程序集之间的通讯要么全是64位环境下的,要么全是32位环境下的.不能混编访问.不然 ...

  10. Linux下面/usr/local和opt目录

    1./opt This directory is reserved for all the software and add-on packages that are not part of the ...