转~~~ DIV+CSS实现三角形提示框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon"href="resources/img/logo-color.png"type="image/x-icon">
<title>测试</title>
<style>
.out-div {
color: #FFFFFF;
font-size: 16px;
line-height: 40px;
display: inline-block;
height: 40px;
width: 200px;
text-align: center;
border-radius: 5px;
margin-left: 32px;
vertical-align: top;
background-color: maroon
} .arrow {
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-right: 10px solid;
border-bottom: 10px solid transparent;
position: absolute;
margin-left: -10px;
margin-top: 10px;
border-right-color: maroon
} </style>
</head>
<body>
<div class="out-div">
<div class="arrow"></div>
<span>这是一个提示框</span>
</div>
</body>
</html>
参考地址 : https://xianfei689.github.io/hg-demo/pc/toast/toast.html
转~~~ DIV+CSS实现三角形提示框的更多相关文章
- 纯CSS实现tooltip提示框,CSS箭头及形状
本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- 纯CSS制作冒泡提示框
来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...
- div+css实现圆形div以及带箭头提示框效果
.img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...
- css制作tips提示框,气泡框,制作三角形
有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...
- 用css实现云状提示框
经常会用到云状提示框,如图: 基本框架是这样,以三角在左侧为例: <div class="container"> <div class="content ...
- 纯css来实现提示框
用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...
- css画一个提示框
用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- CSS写的提示框(兼容火狐IE等各大浏览器)
项目上使用jQuery的Tooltip组件,在谷歌上正常,在火狐和IE下没有效果,所以根据谷歌的提示框单独用CSS写了个提示框,比较好的兼容了火狐和IE,且效果一样 原Tooltip代码: $('#d ...
随机推荐
- jquery点击获取子元素ID值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【学习笔记】python 简单创建新建一个网络客户端,并返回相关的信息
#导入socket包 import socket #使用socket.socket创建socket连接 #AF_INET表示通信类型,与IPv4对应 #SOCK_STREAM对应TCP通信 print ...
- 006-Map、Tuple、Zip实战解析
006-Map.Tuple.Zip实战解析 实战代码 Map实战 本身是映射,映射关系在实际中应用非常广泛,比如:配置信息都是Key-Value形式 键值对不存在下边关系 是一个immutable(不 ...
- 有关C# struct的一个误区
参考:http://blog.csdn.net/onlyou930/article/details/5568319 下面写一个新的例子: using System; using System.Coll ...
- Linux 终端常用快捷键
Tab 自动补全 Ctrl+L 清屏 Ctrl+A 移动到头 Ctrl+E 移动到尾 Ctrl+左键头 左移一个单词 Ctrl+右箭头 右移一个单词 Ctrl+U 删除左边所有字符 Ctrl+K 删除 ...
- 开源一个网络图片浏览器HooPhotoBrowser
在公司开发项目中需要弹出展示从网络上下载的图片,并提供滑动展示功能.目前采用同事开发的图片浏览器,后期有时间想优化一下.所以重温了下以前开发的类似微博的项目中的图片浏览器代码,并抽取出来封装成了现在这 ...
- Hive的API的说明
之前通过命令行的界面可以操作Hive,可是在实际的生产环境中,往往都是需要写API的,因此对Hive的API简单的列举了一下.并对Hive进行了一个简单的封装.具体的封装可以参考github网站主页: ...
- MATLAB中白噪声的产生
rand产生的是[0,1]上的均匀分布的随机序列randn产生均值为0,方差为1的高斯随机序列,也就是白噪声序列 rand产生的是均匀分布白噪声序列randn产生的是正态分布的白噪声序列 MATLAB ...
- PYTHON 链接 Oracle
一. cx_Oracle Python 连接Oracle 数据库,需要使用cx_Oracle 包. 该包的下载地址:http://cx-Oracle.sourceforge.net/ 下载的时候,注 ...
- Ubuntu 64位下搭建ADT的种种问题
我使用的adt版本为 adt-bundle-linux-x86_64-20140702.zip 1. Eclipse启动时提示 adb 无法加载动态链接库 libstdc++.so.6 以及 lib ...