猿吟鹤唳本无意,不知下有行人行

你好,我是提示框,tip

<!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

发表评论

您的电子邮箱地址不会被公开。