你好我是提示框 tip 纯css写就 -

19号A01

浏览: 17345 次
性别:
来自: 山东

最近访客更多访客>>

grassland619

winjune

allengui

sp42

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3)

社区版块

存档分类

你好我是提示框 tip 纯css写就

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小三角</title>
<style type="text/css">
.tip{
	border:1px solid #ccc;
	background:#ccc;
	height:50px;
	width:300px;
	color:#fff;
	overflow:hidden;
	zoom:1;
	position:relative;
	}
.box{
	height:0;
	width:0;
	border:1px solid #ccc;
	border-width:10px 10px  0 10px; border-color:#ccc #fff;
	position:relative;
	left:40px;
	}
em{
	display:block;
	position:absolute;
	top:20px;
	left:500px;
	width:24px;
	height:17px;
	line-height:17px;
	background:#000;
	color:#fff;
	font-style:normal;
	text-align:center;
	z-index:2;
	-moz-border-radius:2px;/*低版本Firefox浏览器 圆角*/
	-webkit-border-radius:2px;/*低版本Chorme和Safari浏览器 圆角*/
	border-radius:2px;/*其他浏览器 圆角*/
	behavior:url(tool_iecss3.htc);/*IE浏览器 圆角*/
	}
em{	background: none repeat scroll 0 0 #000000;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    display: block;
    font-style: normal;
    height: 47px;
	line-height:22px;
    line-height: 17px;
    position: absolute;
    right: 20px;
    text-align:center;
    top:20px;
    width:60px;
	font-size:12px;
    z-index: 2;}
em i {
    border-right: 8px solid transparent;
    border-top: 6px solid #000000;
    height: 0;
    left: 6px;
    position: absolute;
    top: 47px;
    width: 0;

</style>
</head>

<body>
<div class="tip">你好~我是提示框</div>
<div class="box"></div>

<em>
我是提示框你好~我是提示框
<i></i>
</em>
</body>
</html>

第一个不兼容ie6 ie7 第二个ok