https://files.cnblogs.com/ShepherdIsland/pop-tip-log.7thpark.com.zip
代码
<!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>popup tip样式</title>
<style type="text/css">
/* =======poptip style======= */
.pop-tip{position:absolute;overflow:hidden;}
.pop-tip .pt-container{font-size:12px;background:#fff;}
.pt-top,.pt-bottom,.pt-middle{position:relative;padding:0 8px;height:20px;overflow:hidden;}
.pt-middle{height:auto;zoom:1;}
.pt-top div,.pt-bottom div,.pt-left,.pt-right{overflow:hidden;}
.pt-arrow{position:absolute;display:none;height:20px;width:30px;overflow:hidden;}
.pop-tip .sprite{position:absolute;top:0;left:0;width:800px;height:600px;background:url(images/sprite-poptip.png) no-repeat left top;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/sprite-poptip.png", sizingMethod="crop");}
.pt-t-l,.pt-b-l,.pt-t-r,.pt-b-r{position:absolute;left:0;top:0;width:8px;height:20px;}
.pt-t-r,.pt-b-r{left:auto;right:0px;}
.pt-t-r .sprite{left:-792px;}
.pt-t{position:relative;height:20px;}
.pt-t .sprite{left:-70px;}
.pt-b-l .sprite{top:-580px;}
.pt-b-r .sprite{top:-580px;left:-792px;}
.pt-b{position:relative;height:20px;}
.pt-b .sprite{top:-580px;left:-70px;}
.pt-l,.pt-r{position:absolute;left:0;top:0;width:8px;height:560px;overflow:hidden;}
.pt-r{left:auto;right:0px;}
.pt-l .sprite{top:-20px;}
.pt-r .sprite{left:-792px;top:-20px;}
/* add arrow */
.a-t-l .pt-top,.a-b-l .pt-bottom{padding-left:38px;}
.pt-arrow{display:block;}
.a-t-l .pt-arrow{left:8px;top:0;}
.a-b-l .pt-arrow{left:8px;bottom:0;}
.a-t-r .pt-top,.a-b-r .pt-bottom{padding-right:38px;}
.a-t-r .pt-arrow{right:8px;top:0;}
.a-b-r .pt-arrow{right:8px;bottom:0;}
.pt-arrow-t-l .sprite{left:-38px;top:0;}
.pt-arrow-t-r .sprite{left:-730px;top:0;}
.pt-arrow-b-l .sprite{left:-38px;top:-580px;}
.pt-arrow-b-r .sprite{left:-730px;top:-580px;}
/* bar and content */
.pt-bar{position:relative;height:28px;padding:0 10px;line-height:28px;font-size:12px;font-weight:bold;color:#5b94e6;background:url(images/sprite-poptip.png) repeat-x left -600px;}
.pt-bar .pt-close{position:absolute;top:6px;left:auto;right:7px;width:13px;height:0;padding-top:13px;overflow:hidden;background:url(images/sprite-poptip.png) no-repeat left -630px;cursor:pointer;}
.pt-content{padding:10px;}
</style>
</head>
<body>
<div style="left:100px;top:30px;300px;" class="pop-tip a-t-l">
<div class="pt-arrow pt-arrow-t-l">
<div class="sprite"></div>
</div>
<div class="pt-top">
<div class="pt-t-l">
<div class="sprite"></div>
</div>
<div class="pt-t-r">
<div class="sprite"></div>
</div>
<div class="pt-t">
<div class="sprite"></div>
</div>
</div>
<div class="pt-middle">
<div class="pt-l">
<div class="sprite"></div>
</div>
<div class="pt-r">
<div class="sprite"></div>
</div>
<div class="pt-container">
<div class="pt-bar">标题<span class="sprite pt-close">x</span></div>
<div class="pt-content">
<div>写点内容吧，都放在.pt-conte写点内容吧，都放在.pt-conte写点内容吧，都放在.pt-conte写点内容吧，都放在.pt-conte写点内容吧，都放在.pt-conte写点内容吧，都放在.pt-conte写点内容吧，都放在.pt-conte写点内容吧，都放在.pt-conte写点内容吧，都放在.pt-conte写点内容吧，都放在.pt-conte写点内容吧，都放在.pt-conte写点内容吧，都放在.pt-</div>
</div>
</div>
</div>
<div class="pt-bottom">
<div class="pt-b-l">
<div class="sprite"></div>
</div>
<div class="pt-b-r">
<div class="sprite"></div>
</div>
<div class="pt-b">
<div class="sprite"></div>
</div>
</div>
</div>
</body>
</html>